feat(a11y): add basic aria-label to canvas element (opensearch-projec…

…t#1084)

packages/osd-charts/.playground/playground.tsx

@@ -19,10 +19,31 @@
 
 import React from 'react';
 
-import { Example } from '../stories/small_multiples/7_sunbursts';
+import { Chart, BarSeries, ScaleType, Settings } from '../src';
 
 export class Playground extends React.Component {
   render() {
-    return <Example />;
+    return (
+      <div className="story-chart story-root root">
+        <Chart size={[500, 200]}>
+          <Settings showLegend showLegendExtra />
+          <BarSeries
+            id="areas"
+            name="area"
+            xScaleType={ScaleType.Linear}
+            yScaleType={ScaleType.Linear}
+            xAccessor={0}
+            yAccessors={[1]}
+            splitSeriesAccessors={[2]}
+            data={[
+              [0, 123, 'group0'],
+              [0, 123, 'group1'],
+              [0, 123, 'group2'],
+              [0, 123, 'group3'],
+            ]}
+          />
+        </Chart>
+      </div>
+    );
   }
 }

packages/osd-charts/integration/page_objects/common.ts

@@ -19,6 +19,8 @@
 
 import Url from 'url';
 
+import { AXNode } from 'puppeteer';
+
 import { DRAG_DETECTION_TIMEOUT } from '../../src/state/reducers/interactions';
 // @ts-ignore
 import defaults from '../defaults';
@@ -459,6 +461,19 @@ class CommonPage {
   async waitForElement(waitSelector: string, timeout = 10000) {
     await page.waitForSelector(waitSelector, { timeout });
   }
+
+  /**
+   * puppeteer accessibility functionality
+   * @param {string} [url]
+   * @param {string} [waitSelector]
+   */
+  async testAccessibilityTree(url: string, waitSelector: string): Promise<AXNode> {
+    await this.loadElementFromURL(url, waitSelector);
+    const accessibilitySnapshot = await page.accessibility.snapshot().then((value) => {
+      return value;
+    });
+    return accessibilitySnapshot;
+  }
 }
 
 export const common = new CommonPage();

packages/osd-charts/integration/tests/accessibility.test.ts

@@ -0,0 +1,34 @@
+/*
+ * 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 show the aria-label for the canvas element in the accessibility tree', async () => {
+    const tree = await common.testAccessibilityTree(
+      'http://localhost:9001/iframe.html?id=annotations-lines--x-continuous-domain',
+      '#story-root',
+    );
+    // digging into the accessibility tree for the canvas element
+    const expectedAriaLabel = tree.children.filter((value) => {
+      return value.name === 'Chart';
+    });
+    expect(expectedAriaLabel[0].name).toBe('Chart');
+  });
+});

packages/osd-charts/integration/tests/legend_stories.test.ts

@@ -48,8 +48,10 @@ describe('Legend stories', () => {
   });
 
   it('should render color picker on mouse click', async () => {
-    const action = async () =>
+    const action = async () => {
+      await common.disableAnimations();
       await common.clickMouseRelativeToDOMElement({ left: 0, top: 0 }, '.echLegendItem__color');
+    };
     await common.expectElementAtUrlToMatchScreenshot(
       'http://localhost:9001/?path=/story/legend--color-picker',
       'body',

packages/osd-charts/src/chart_types/xy_chart/renderer/canvas/xy_chart.tsx

@@ -145,6 +145,7 @@ class XYChartComponent extends React.Component<XYChartProps> {
     this.ctx = canvas && canvas.getContext('2d');
   }
 
+  // eslint-disable-next-line @typescript-eslint/member-ordering
   render() {
     const {
       forwardStageRef,
@@ -168,6 +169,9 @@ class XYChartComponent extends React.Component<XYChartProps> {
           width,
           height,
         }}
+        aria-label="Chart"
+        // eslint-disable-next-line jsx-a11y/no-interactive-element-to-noninteractive-role
+        role="img"
       />
     );
   }

packages/osd-charts/src/components/__snapshots__/chart.test.tsx.snap

@@ -73,7 +73,7 @@ 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={{...}} />
+                    <canvas className=\\"echCanvasRenderer\\" width={150} height={200} style={{...}} aria-label=\\"Chart\\" role=\\"img\\" />
                   </XYChart>
                 </Connect(XYChart)>
                 <Connect(Tooltip) getChartContainerRef={[Function (anonymous)]}>