diff --git a/packages/react-charting/src/components/DonutChart/DonutChartRTL.test.tsx b/packages/react-charting/src/components/DonutChart/DonutChartRTL.test.tsx
index 78c00c84b2c380..52df940fd15d02 100644
--- a/packages/react-charting/src/components/DonutChart/DonutChartRTL.test.tsx
+++ b/packages/react-charting/src/components/DonutChart/DonutChartRTL.test.tsx
@@ -6,6 +6,9 @@ import { DarkTheme } from '@fluentui/theme-samples';
import { ThemeProvider } from '@fluentui/react';
import * as utils from '../../utilities/utilities';
import { resetIds } from '../../Utilities';
+import { axe, toHaveNoViolations } from 'jest-axe';
+
+expect.extend(toHaveNoViolations);
describe('Donut chart interactions', () => {
beforeEach(() => {
@@ -178,3 +181,11 @@ describe('Donut chart interactions', () => {
expect(container).toMatchSnapshot();
});
});
+
+describe('Donut Chart - axe-core', () => {
+ test('Should pass accessibility tests', async () => {
+ const { container } = render();
+ const axeResults = await axe(container);
+ expect(axeResults).toHaveNoViolations();
+ }, 10000);
+});
diff --git a/packages/react-charting/src/components/GroupedVerticalBarChart/GroupedVerticalBarChartRTL.test.tsx b/packages/react-charting/src/components/GroupedVerticalBarChart/GroupedVerticalBarChartRTL.test.tsx
index 4a10f9807d9d0d..c0542ca1acf0bb 100644
--- a/packages/react-charting/src/components/GroupedVerticalBarChart/GroupedVerticalBarChartRTL.test.tsx
+++ b/packages/react-charting/src/components/GroupedVerticalBarChart/GroupedVerticalBarChartRTL.test.tsx
@@ -8,6 +8,9 @@ import { getByClass, getById, testWithWait, testWithoutWait } from '../../utilit
import { IGroupedVerticalBarChartData, IVSChartDataPoint } from '../../index';
import { DarkTheme } from '@fluentui/theme-samples';
import { ThemeProvider } from '@fluentui/react';
+import { axe, toHaveNoViolations } from 'jest-axe';
+
+expect.extend(toHaveNoViolations);
const accessibilityDataPoints: IGroupedVerticalBarChartData[] = [
{
@@ -481,3 +484,11 @@ testWithWait(
expect(bars[1].getAttribute('width')).toEqual('16');
},
);
+
+describe('Grouped Vertical Bar Chart - axe-core', () => {
+ test('Should pass accessibility tests', async () => {
+ const { container } = render();
+ const axeResults = await axe(container);
+ expect(axeResults).toHaveNoViolations();
+ }, 10000);
+});
diff --git a/packages/react-charting/src/components/HorizontalBarChart/HorizontalBarChartRTL.test.tsx b/packages/react-charting/src/components/HorizontalBarChart/HorizontalBarChartRTL.test.tsx
index 6b6a22257af2f6..fdea2dc10da9d5 100644
--- a/packages/react-charting/src/components/HorizontalBarChart/HorizontalBarChartRTL.test.tsx
+++ b/packages/react-charting/src/components/HorizontalBarChart/HorizontalBarChartRTL.test.tsx
@@ -7,6 +7,9 @@ import { HorizontalBarChart } from './HorizontalBarChart';
import { getByClass, getById, testWithWait, testWithoutWait } from '../../utilities/TestUtility.test';
import { HorizontalBarChartBase } from './HorizontalBarChart.base';
import { HorizontalBarChartVariant, IChartProps } from './index';
+import { axe, toHaveNoViolations } from 'jest-axe';
+
+expect.extend(toHaveNoViolations);
const chartPoints: IChartProps[] = [
{
@@ -348,3 +351,11 @@ describe('Horizontal bar chart re-rendering', () => {
});
});
});
+
+describe('Horizontal Bar Chart - axe-core', () => {
+ test('Should pass accessibility tests', async () => {
+ const { container } = render();
+ const axeResults = await axe(container);
+ expect(axeResults).toHaveNoViolations();
+ }, 10000);
+});
diff --git a/packages/react-charting/src/components/HorizontalBarChartWithAxis/HorizontalBarChartWithAxis.test.tsx b/packages/react-charting/src/components/HorizontalBarChartWithAxis/HorizontalBarChartWithAxis.test.tsx
index 0a327a9a8b0520..218022f8983fb1 100644
--- a/packages/react-charting/src/components/HorizontalBarChartWithAxis/HorizontalBarChartWithAxis.test.tsx
+++ b/packages/react-charting/src/components/HorizontalBarChartWithAxis/HorizontalBarChartWithAxis.test.tsx
@@ -7,6 +7,10 @@ import { HorizontalBarChartWithAxis, IHorizontalBarChartWithAxisProps } from '..
import { IHorizontalBarChartWithAxisState, HorizontalBarChartWithAxisBase } from './HorizontalBarChartWithAxis.base';
import { resetIds } from '@fluentui/react';
import toJson from 'enzyme-to-json';
+import { axe, toHaveNoViolations } from 'jest-axe';
+import { render } from '@testing-library/react';
+
+expect.extend(toHaveNoViolations);
let wrapper:
| ReactWrapper
@@ -192,3 +196,11 @@ describe('HorizontalBarChartWithAxis - mouse events', () => {
expect(tree).toMatchSnapshot();
});
});
+
+describe('Horizontal Bar Chart With Axis - axe-core', () => {
+ test('Should pass accessibility tests', async () => {
+ const { container } = render();
+ const axeResults = await axe(container);
+ expect(axeResults).toHaveNoViolations();
+ }, 10000);
+});
diff --git a/packages/react-charting/src/components/StackedBarChart/MultiStackedBarChartRTL.test.tsx b/packages/react-charting/src/components/StackedBarChart/MultiStackedBarChartRTL.test.tsx
index 28de7dad47c19b..053d5f8dfbda3a 100644
--- a/packages/react-charting/src/components/StackedBarChart/MultiStackedBarChartRTL.test.tsx
+++ b/packages/react-charting/src/components/StackedBarChart/MultiStackedBarChartRTL.test.tsx
@@ -13,6 +13,9 @@ import { DefaultPalette, ThemeProvider } from '@fluentui/react';
import { fireEvent, render, screen, waitFor } from '@testing-library/react';
import { DarkTheme } from '@fluentui/theme-samples';
import { MultiStackedBarChartBase } from './MultiStackedBarChart.base';
+import { axe, toHaveNoViolations } from 'jest-axe';
+
+expect.extend(toHaveNoViolations);
const firstChartPoints: IChartDataPoint[] = [
{
@@ -375,3 +378,11 @@ test('Should reflect theme change', () => {
// Assert
expect(container).toMatchSnapshot();
});
+
+describe('Multi Stacked Bar Chart - axe-core', () => {
+ test('Should pass accessibility tests', async () => {
+ const { container } = render();
+ const axeResults = await axe(container);
+ expect(axeResults).toHaveNoViolations();
+ }, 10000);
+});
diff --git a/packages/react-charting/src/components/StackedBarChart/StackedBarChartRTL.test.tsx b/packages/react-charting/src/components/StackedBarChart/StackedBarChartRTL.test.tsx
index 89ade9272c3b0f..f305dabc432c4d 100644
--- a/packages/react-charting/src/components/StackedBarChart/StackedBarChartRTL.test.tsx
+++ b/packages/react-charting/src/components/StackedBarChart/StackedBarChartRTL.test.tsx
@@ -13,6 +13,9 @@ import { DefaultPalette, ThemeProvider } from '@fluentui/react';
import { fireEvent, render, screen, waitFor } from '@testing-library/react';
import { StackedBarChartBase } from './StackedBarChart.base';
import { DarkTheme } from '@fluentui/theme-samples';
+import { axe, toHaveNoViolations } from 'jest-axe';
+
+expect.extend(toHaveNoViolations);
const points: IChartDataPoint[] = [
{
@@ -383,3 +386,11 @@ test('Should reflect theme change', () => {
// Assert
expect(container).toMatchSnapshot();
});
+
+describe('Stacked Bar Chart - axe-core', () => {
+ test('Should pass accessibility tests', async () => {
+ const { container } = render();
+ const axeResults = await axe(container);
+ expect(axeResults).toHaveNoViolations();
+ }, 10000);
+});
diff --git a/packages/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChartRTL.test.tsx b/packages/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChartRTL.test.tsx
index fd6b98cd2dc4e7..0fa639c1c0e01a 100644
--- a/packages/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChartRTL.test.tsx
+++ b/packages/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChartRTL.test.tsx
@@ -8,6 +8,9 @@ import { IVSChartDataPoint } from '../../index';
import { VerticalStackedBarChart } from './VerticalStackedBarChart';
import { getByClass, getById, testWithWait, testWithoutWait } from '../../utilities/TestUtility.test';
import { VerticalStackedBarChartBase } from './VerticalStackedBarChart.base';
+import { axe, toHaveNoViolations } from 'jest-axe';
+
+expect.extend(toHaveNoViolations);
const firstChartPoints: IVSChartDataPoint[] = [
{ legend: 'Metadata1', data: 2, color: DefaultPalette.blue },
@@ -491,3 +494,11 @@ describe('Vertical stacked bar chart - Theme', () => {
expect(container).toMatchSnapshot();
});
});
+
+describe('Vertical Stacked Bar Chart - axe-core', () => {
+ test('Should pass accessibility tests', async () => {
+ const { container } = render();
+ const axeResults = await axe(container);
+ expect(axeResults).toHaveNoViolations();
+ }, 10000);
+});