Axe-core Integration into react-charting #2

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(<DonutChart data={chartPoints} />);
+    const axeResults = await axe(container);
+    expect(axeResults).toHaveNoViolations();
+  }, 10000);
+});

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(<GroupedVerticalBarChart data={accessibilityDataPoints} />);
+    const axeResults = await axe(container);
+    expect(axeResults).toHaveNoViolations();
+  }, 10000);
+});

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(<HorizontalBarChart data={chartPoints} />);
+    const axeResults = await axe(container);
+    expect(axeResults).toHaveNoViolations();
+  }, 10000);
+});

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<IHorizontalBarChartWithAxisProps, IHorizontalBarChartWithAxisState, HorizontalBarChartWithAxisBase>
@@ -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(<HorizontalBarChartWithAxis data={points} />);
+    const axeResults = await axe(container);
+    expect(axeResults).toHaveNoViolations();
+  }, 10000);
+});

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(<MultiStackedBarChart data={data} />);
+    const axeResults = await axe(container);
+    expect(axeResults).toHaveNoViolations();
+  }, 10000);
+});

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(<StackedBarChart data={data} />);
+    const axeResults = await axe(container);
+    expect(axeResults).toHaveNoViolations();
+  }, 10000);
+});

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(<VerticalStackedBarChart data={chartPoints} />);
+    const axeResults = await axe(container);
+    expect(axeResults).toHaveNoViolations();
+  }, 10000);
+});