feat: add alt text for parititon charts

elastic · Apr 13, 2021 · 3564f82 · 3564f82
1 parent 3b712ab
commit 3564f82
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 14 deletions.
diff --git a/src/chart_types/partition_chart/renderer/canvas/partition.tsx b/src/chart_types/partition_chart/renderer/canvas/partition.tsx
@@ -141,23 +141,31 @@ class PartitionComponent extends React.Component<PartitionProps> {
       forwardStageRef,
       initialized,
       chartContainerDimensions: { width, height },
+      geometries: { partitionLayout },
     } = this.props;
     if (!initialized || width === 0 || height === 0) {
       return null;
     }
-
     return (
-      <canvas
-        ref={forwardStageRef}
-        className="echCanvasRenderer"
-        width={width * this.devicePixelRatio}
-        height={height * this.devicePixelRatio}
-        onMouseMove={this.handleMouseMove.bind(this)}
-        style={{
-          width,
-          height,
-        }}
-      />
+      <figure>
+        <canvas
+          ref={forwardStageRef}
+          className="echCanvasRenderer"
+          width={width * this.devicePixelRatio}
+          height={height * this.devicePixelRatio}
+          onMouseMove={this.handleMouseMove.bind(this)}
+          style={{
+            width,
+            height,
+          }}
+          // eslint-disable-next-line jsx-a11y/no-interactive-element-to-noninteractive-role
+          role="presentation"
+        />
+        <dl className="echScreenReaderOnly">
+          <dt>Chart type</dt>
+          <dd>{partitionLayout}</dd>
+        </dl>
+      </figure>
     );
   }
 

diff --git a/src/chart_types/xy_chart/renderer/canvas/xy_chart.tsx b/src/chart_types/xy_chart/renderer/canvas/xy_chart.tsx
@@ -179,7 +179,7 @@ class XYChartComponent extends React.Component<XYChartProps> {
           // eslint-disable-next-line jsx-a11y/no-interactive-element-to-noninteractive-role
           role="presentation"
         >
-          <dl className="echScreen-reader">
+          <dl className="echScreenReaderOnly">
             <dt>Chart type</dt>
             <dd>{chartSeriesTypes}</dd>
           </dl>

diff --git a/src/components/__snapshots__/chart.test.tsx.snap b/src/components/__snapshots__/chart.test.tsx.snap
@@ -75,7 +75,7 @@ exports[`Chart should render the legend name test 1`] = `
                   <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={{...}} onChartRendered={[Function (anonymous)]}>
                     <figure>
                       <canvas className=\\"echCanvasRenderer\\" width={150} height={200} style={{...}} role=\\"presentation\\">
-                        <dl className=\\"echScreen-reader\\">
+                        <dl className=\\"echScreenReaderOnly\\">
                           <dt>
                             Chart type
                           </dt>