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); +});