fix: add idforchartseries types

elastic · Apr 21, 2021 · 6150d2d · 6150d2d
1 parent c1a9b8d
commit 6150d2d
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 5 deletions.
diff --git a/src/chart_types/xy_chart/renderer/canvas/xy_chart.tsx b/src/chart_types/xy_chart/renderer/canvas/xy_chart.tsx
@@ -183,14 +183,17 @@ class XYChartComponent extends React.Component<XYChartProps> {
       seriesTypes.size > 1 ? `Mixed chart: ${[...seriesTypes].join(' and ')} chart` : `${[...seriesTypes]} chart`;
     const chartIdDescription = `${chartId}--description`;
     const chartIdLabel = ariaLabel ? `${chartId}--label` : undefined;
+    const idForChartSeriesTypes = `${chartId}--series-types`;
 
     const ariaProps: AriaProps = {};
 
     if (ariaLabelledBy || ariaLabel) {
       ariaProps['aria-labelledby'] = ariaLabelledBy ?? chartIdLabel;
     }
-    if (ariaLabelledBy || useDefaultSummary) {
-      ariaProps['aria-describedby'] = `${ariaLabelledBy || ''} ${useDefaultSummary ? chartIdLabel : undefined}`;
+    if (accessibilityDescription || useDefaultSummary) {
+      ariaProps['aria-describedby'] = `${accessibilityDescription ? chartIdDescription : undefined} ${
+        useDefaultSummary ? idForChartSeriesTypes : undefined
+      }`;
     }
 
     const ChartLabel = (heading: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p', id: string, label?: string) => {
@@ -262,7 +265,7 @@ class XYChartComponent extends React.Component<XYChartProps> {
               {useDefaultSummary && (
                 <dl>
                   <dt>Chart type</dt>
-                  <dd>{chartSeriesTypes}</dd>
+                  <dd id={idForChartSeriesTypes}>{chartSeriesTypes}</dd>
                 </dl>
               )}
             </div>

diff --git a/src/components/__snapshots__/chart.test.tsx.snap b/src/components/__snapshots__/chart.test.tsx.snap
@@ -73,15 +73,15 @@ exports[`Chart should render the legend name test 1`] = `
                 </Connect(Crosshair)>
                 <Connect(XYChart) forwardStageRef={{...}}>
                   <XYChart forwardStageRef={{...}} initialized={true} isChartEmpty={false} debug={true} geometries={{...}} geometriesIndex={{...}} theme={{...}} chartContainerDimensions={{...}} highlightedLegendItem={[undefined]} rotation={0} renderingArea={{...}} chartTransform={{...}} axesSpecs={{...}} perPanelAxisGeoms={{...}} perPanelGridLines={{...}} axesStyles={{...}} annotationDimensions={{...}} annotationSpecs={{...}} panelGeoms={{...}} seriesTypes={{...}} accessibilityDescription={[undefined]} useDefaultSummary={true} chartId=\\"chart1\\" ariaLabel={[undefined]} ariaLabelledBy={[undefined]} headingLevel=\\"p\\" onChartRendered={[Function (anonymous)]}>
-                    <figure aria-describedby=\\" undefined\\">
+                    <figure aria-describedby=\\"undefined chart1--series-types\\">
                       <canvas className=\\"echCanvasRenderer\\" width={150} height={200} style={{...}} role=\\"presentation\\">
                         <ChartLabel id={[undefined]} label={[undefined]} heading=\\"p\\" />
                         <div className=\\"echScreenReaderOnly\\">
                           <dl>
                             <dt>
                               Chart type
                             </dt>
-                            <dd>
+                            <dd id=\\"chart1--series-types\\">
                               bar chart
                             </dd>
                           </dl>