feat: add alt text for other chart types

elastic · Apr 13, 2021 · 9f1c52e · 9f1c52e
1 parent 3564f82
commit 9f1c52e
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 21 deletions.
diff --git a/src/chart_types/goal_chart/renderer/canvas/connected_component.tsx b/src/chart_types/goal_chart/renderer/canvas/connected_component.tsx
@@ -110,17 +110,26 @@ class Component extends React.Component<Props> {
     }
 
     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>Goal chart</dd>
+          </dl>
+        </canvas>
+      </figure>
     );
   }
 

diff --git a/src/chart_types/heatmap/renderer/canvas/connected_component.tsx b/src/chart_types/heatmap/renderer/canvas/connected_component.tsx
@@ -97,6 +97,7 @@ class Component extends React.Component<Props> {
     }
   }
 
+  // eslint-disable-next-line @typescript-eslint/member-ordering
   render() {
     const {
       initialized,
@@ -107,16 +108,25 @@ class Component extends React.Component<Props> {
       return null;
     }
     return (
-      <canvas
-        ref={forwardStageRef}
-        className="echCanvasRenderer"
-        width={width * this.devicePixelRatio}
-        height={height * this.devicePixelRatio}
-        style={{
-          width,
-          height,
-        }}
-      />
+      <figure>
+        <canvas
+          ref={forwardStageRef}
+          className="echCanvasRenderer"
+          width={width * this.devicePixelRatio}
+          height={height * this.devicePixelRatio}
+          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>Heatmap</dd>
+          </dl>
+        </canvas>
+      </figure>
     );
   }
 }

diff --git a/src/chart_types/wordcloud/renderer/svg/connected_component.tsx b/src/chart_types/wordcloud/renderer/svg/connected_component.tsx
@@ -121,6 +121,7 @@ function layoutMaker(config: Configs, data: Datum[]) {
 
 const View = ({ words, conf }: { words: Word[]; conf: Configs }) => (
   <svg width={getWidth(conf)} height={getHeight(conf)}>
+    <title>Chart type: word cloud</title>
     <g transform={`translate(${getWidth(conf) / 2}, ${getHeight(conf) / 2})`}>
       {words.map((d, i) => {
         return (