diff --git a/packages/osd-charts/.playground/playground.tsx b/packages/osd-charts/.playground/playground.tsx
index ad08028b58ff..10810899bcfe 100644
--- a/packages/osd-charts/.playground/playground.tsx
+++ b/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 ;
+ return (
+
+
+
+
+
+
+ );
}
}
diff --git a/packages/osd-charts/integration/page_objects/common.ts b/packages/osd-charts/integration/page_objects/common.ts
index 6a58f8308456..71983806e192 100644
--- a/packages/osd-charts/integration/page_objects/common.ts
+++ b/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 {
+ await this.loadElementFromURL(url, waitSelector);
+ const accessibilitySnapshot = await page.accessibility.snapshot().then((value) => {
+ return value;
+ });
+ return accessibilitySnapshot;
+ }
}
export const common = new CommonPage();
diff --git a/packages/osd-charts/integration/tests/accessibility.test.ts b/packages/osd-charts/integration/tests/accessibility.test.ts
new file mode 100644
index 000000000000..4173895c3082
--- /dev/null
+++ b/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');
+ });
+});
diff --git a/packages/osd-charts/integration/tests/legend_stories.test.ts b/packages/osd-charts/integration/tests/legend_stories.test.ts
index 7424811467ea..b0afea39adce 100644
--- a/packages/osd-charts/integration/tests/legend_stories.test.ts
+++ b/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',
diff --git a/packages/osd-charts/src/chart_types/xy_chart/renderer/canvas/xy_chart.tsx b/packages/osd-charts/src/chart_types/xy_chart/renderer/canvas/xy_chart.tsx
index 3565a86bd7b7..94be7d259e5d 100644
--- a/packages/osd-charts/src/chart_types/xy_chart/renderer/canvas/xy_chart.tsx
+++ b/packages/osd-charts/src/chart_types/xy_chart/renderer/canvas/xy_chart.tsx
@@ -145,6 +145,7 @@ class XYChartComponent extends React.Component {
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 {
width,
height,
}}
+ aria-label="Chart"
+ // eslint-disable-next-line jsx-a11y/no-interactive-element-to-noninteractive-role
+ role="img"
/>
);
}
diff --git a/packages/osd-charts/src/components/__snapshots__/chart.test.tsx.snap b/packages/osd-charts/src/components/__snapshots__/chart.test.tsx.snap
index 42fae7308bc5..496feecdee1c 100644
--- a/packages/osd-charts/src/components/__snapshots__/chart.test.tsx.snap
+++ b/packages/osd-charts/src/components/__snapshots__/chart.test.tsx.snap
@@ -73,7 +73,7 @@ exports[`Chart should render the legend name test 1`] = `
-
+