feat(a11y): improve chart figure

integration/tests/accessibility.test.ts

@@ -0,0 +1,45 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { common } from '../page_objects/common';
+
+describe('Accessibility tree', () => {
+  it('should include the series types if one type of series', async () => {
+    const tree = await common.testAccessibilityTree(
+      'http://localhost:9001/iframe.html?id=annotations-lines--x-continuous-domain',
+      '.echCanvasRenderer',
+    );
+    // the legend has bars and lines as value.descriptions not value.name
+    const hasTextOfChartTypes = tree.children.filter((value) => {
+      return value.name === 'bars';
+    });
+    expect(hasTextOfChartTypes.length).toBe(1);
+  });
+  it('should include the series types if multiple types of series', async () => {
+    const tree = await common.testAccessibilityTree(
+      'http://localhost:9001/iframe.html?id=mixed-charts--bars-and-lines',
+      '.echCanvasRenderer',
+    );
+    // the legend has bars and lines as value.descriptions not value.name
+    const hasTextOfChartTypes = tree.children.filter((value) => {
+      return value.name === 'bars' || value.name === 'lines';
+    });
+    expect(hasTextOfChartTypes.length).toBe(2);
+  });
+});

src/chart_types/xy_chart/renderer/canvas/xy_chart.tsx

@@ -152,27 +152,50 @@ class XYChartComponent extends React.Component<XYChartProps> {
       initialized,
       isChartEmpty,
       chartContainerDimensions: { width, height },
+      geometries,
     } = this.props;
 
     if (!initialized || isChartEmpty) {
       this.ctx = null;
       return null;
     }
 
+    const seriesTypes: string[] = [];
+    Object.entries(geometries).forEach((value) => {
+      if (value[1].length > 0) {
+        seriesTypes.push(value[0]);
+      }
+    });
+
     return (
-      <canvas
-        ref={forwardStageRef}
-        className="echCanvasRenderer"
-        width={width * this.devicePixelRatio}
-        height={height * this.devicePixelRatio}
-        style={{
-          width,
-          height,
-        }}
-        aria-label="Chart"
-        // eslint-disable-next-line jsx-a11y/no-interactive-element-to-noninteractive-role
-        role="img"
-      />
+      <figure>
+        <canvas
+          ref={forwardStageRef}
+          className="echCanvasRenderer"
+          width={width * this.devicePixelRatio}
+          height={height * this.devicePixelRatio}
+          style={{
+            width,
+            height,
+          }}
+          aria-label="Chart"
+          // eslint-disable-next-line jsx-a11y/no-interactive-element-to-noninteractive-role
+          role="presentation"
+        >
+          <dl className="screen-reader">
+            {seriesTypes.length > 0 ? (
+              <dt>
+                Chart type(s)
+                {seriesTypes.map((value, index) => {
+                  return <dd key={`${index}`}>{value}</dd>;
+                })}
+              </dt>
+            ) : (
+              <dt>No series in chart</dt>
+            )}
+          </dl>
+        </canvas>
+      </figure>
     );
   }
 }

src/chart_types/xy_chart/renderer/dom/_index.scss

@@ -1,3 +1,4 @@
 @import 'highlighter';
 @import 'crosshair';
+@import 'screen_reader';
 @import 'annotations/index';

src/chart_types/xy_chart/renderer/dom/_screen_reader.scss

@@ -0,0 +1,7 @@
+.screen-reader {
+  position: absolute;
+  left: -10000px;
+  top: auto;
+  width: 1px;
+  height: 1px;
+}

src/components/__snapshots__/chart.test.tsx.snap

@@ -73,7 +73,18 @@ 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={{...}} onChartRendered={[Function (anonymous)]}>
-                    <canvas className=\\"echCanvasRenderer\\" width={150} height={200} style={{...}} aria-label=\\"Chart\\" role=\\"img\\" />
+                    <figure>
+                      <canvas className=\\"echCanvasRenderer\\" width={150} height={200} style={{...}} aria-label=\\"Chart\\" role=\\"presentation\\">
+                        <dl className=\\"screen-reader\\">
+                          <dt>
+                            Chart type(s)
+                            <dd>
+                              bars
+                            </dd>
+                          </dt>
+                        </dl>
+                      </canvas>
+                    </figure>
                   </XYChart>
                 </Connect(XYChart)>
                 <Connect(Tooltip) getChartContainerRef={[Function (anonymous)]}>