Accessibility tests added to AreaChart, LineChart, VerticalBarChart (#…

…30059) * Accessibility tests added to AreaChart * Accessibility tests added for Line and Vertical Bar chart * Fixed accessibility bug * Removed unnecessary logging * Test snapshots updated * Changefile added * Tests updated * Changefile type changes
microsoft · Dec 18, 2023 · e8f375b · e8f375b
1 parent 22942e7
commit e8f375b
Show file tree

Hide file tree

Showing 7 changed files with 33 additions and 36 deletions.
diff --git a/change/@fluentui-react-charting-209f77d4-492f-4ffe-948f-1bd8220ff566.json b/change/@fluentui-react-charting-209f77d4-492f-4ffe-948f-1bd8220ff566.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Added accessibility tests for LineChart, VerticalBarChart and AreaChart",
+  "packageName": "@fluentui/react-charting",
+  "email": "shubhabrata08@gmail.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-charting/src/components/AreaChart/AreaChartRTL.test.tsx b/packages/react-charting/src/components/AreaChart/AreaChartRTL.test.tsx
@@ -8,7 +8,9 @@ import { DefaultPalette } from '@fluentui/react/lib/Styling';
 
 import { getByClass, getById, testWithWait, testWithoutWait } from '../../utilities/TestUtility.test';
 import { AreaChartBase } from './AreaChart.base';
+import { axe, toHaveNoViolations } from 'jest-axe';
 
+expect.extend(toHaveNoViolations);
 const beforeAll = () => {
   jest.spyOn(AreaChartBase.prototype as any, '_getAriaLabel').mockReturnValue('08/25/2023');
 };
@@ -490,3 +492,9 @@ test('Should reflect theme change', () => {
   // Assert
   expect(container).toMatchSnapshot();
 });
+
+test('Should pass accessibility tests', async () => {
+  const { container } = render(<AreaChart data={chartData} />);
+  const axeResults = await axe(container);
+  expect(axeResults).toHaveNoViolations();
+}, 10000);
diff --git a/packages/react-charting/src/components/LineChart/LineChart.base.tsx b/packages/react-charting/src/components/LineChart/LineChart.base.tsx
@@ -860,10 +860,8 @@ export class LineChartBase extends React.Component<ILineChartProps, ILineChartSt
                   )}
                   onMouseOut={this._handleMouseOut}
                   strokeWidth={0}
-                  role="none"
                   focusable={false}
                   onBlur={this._handleMouseOut}
-                  aria-label={this._getAriaLabel(i, j)}
                 />
               </React.Fragment>,
             );

diff --git a/packages/react-charting/src/components/LineChart/LineChartRTL.test.tsx b/packages/react-charting/src/components/LineChart/LineChartRTL.test.tsx
@@ -7,6 +7,9 @@ import { ILineChartPoints, LineChart } from './index';
 import { mergeStyles } from '@fluentui/merge-styles';
 
 import { getByClass, getById, testWithWait, testWithoutWait } from '../../utilities/TestUtility.test';
+import { axe, toHaveNoViolations } from 'jest-axe';
+
+expect.extend(toHaveNoViolations);
 
 const beforeAll = () => {
   jest.spyOn(Date.prototype, 'toLocaleString').mockReturnValue('08/25/2023');
@@ -654,3 +657,9 @@ test('Should reflect theme change', () => {
   // Assert
   expect(container).toMatchSnapshot();
 });
+
+test('Should pass accessibility tests', async () => {
+  const { container } = render(<LineChart data={basicChartPoints} />);
+  const axeResults = await axe(container);
+  expect(axeResults).toHaveNoViolations();
+}, 10000);
diff --git a/packages/react-charting/src/components/LineChart/__snapshots__/LineChart.test.tsx.snap b/packages/react-charting/src/components/LineChart/__snapshots__/LineChart.test.tsx.snap
@@ -3584,7 +3584,6 @@ exports[`LineChart snapShot testing renders wrapXAxisLables correctly 1`] = `
             strokeWidth={4}
           />
           <circle
-            aria-label="40. metaData1, 80."
             cx={120}
             cy={20}
             focusable={false}
@@ -3596,7 +3595,6 @@ exports[`LineChart snapShot testing renders wrapXAxisLables correctly 1`] = `
             onMouseOver={[Function]}
             opacity={0}
             r={8}
-            role="none"
             strokeWidth={0}
             width={0}
           />

diff --git a/packages/react-charting/src/components/LineChart/__snapshots__/LineChartRTL.test.tsx.snap b/packages/react-charting/src/components/LineChart/__snapshots__/LineChartRTL.test.tsx.snap
@@ -317,14 +317,12 @@ exports[`Line chart rendering Should render the Line chart with date x-axis data
               tabindex="-1"
             />
             <circle
-              aria-label="08/25/2023. First, 50."
               cx="-20"
               cy="17.884615384615383"
               focusable="false"
               id="circle13_0_55D"
               opacity="0"
               r="8"
-              role="none"
               stroke-width="0"
               width="0"
             />
@@ -634,14 +632,12 @@ exports[`Line chart rendering Should render the Line chart with numeric x-axis d
               tabindex="-1"
             />
             <circle
-              aria-label="40. metaData3, 80."
               cx="16"
               cy="12.826086956521738"
               focusable="false"
               id="circle0_2_11D"
               opacity="0"
               r="8"
-              role="none"
               stroke-width="0"
               width="0"
             />
@@ -689,14 +685,12 @@ exports[`Line chart rendering Should render the Line chart with numeric x-axis d
               tabindex="-1"
             />
             <circle
-              aria-label="50. metaData2, 90."
               cx="4"
               cy="18.804347826086957"
               focusable="false"
               id="circle0_1_11D"
               opacity="0"
               r="8"
-              role="none"
               stroke-width="0"
               width="0"
             />
@@ -744,14 +738,12 @@ exports[`Line chart rendering Should render the Line chart with numeric x-axis d
               tabindex="-1"
             />
             <circle
-              aria-label="40. metaData1, 80."
               cx="16"
               cy="12.826086956521738"
               focusable="false"
               id="circle0_0_11D"
               opacity="0"
               r="8"
-              role="none"
               stroke-width="0"
               width="0"
             />
@@ -1229,14 +1221,12 @@ exports[`Line chart rendering Should render the Line chart with points in multip
               tabindex="-1"
             />
             <circle
-              aria-label="40. metaData3, 80."
               cx="16"
               cy="12.826086956521738"
               focusable="false"
               id="circle26_2_11D"
               opacity="0"
               r="8"
-              role="none"
               stroke-width="0"
               width="0"
             />
@@ -1284,14 +1274,12 @@ exports[`Line chart rendering Should render the Line chart with points in multip
               tabindex="-1"
             />
             <circle
-              aria-label="50. metaData2, 90."
               cx="4"
               cy="18.804347826086957"
               focusable="false"
               id="circle26_1_11D"
               opacity="0"
               r="8"
-              role="none"
               stroke-width="0"
               width="0"
             />
@@ -1339,14 +1327,12 @@ exports[`Line chart rendering Should render the Line chart with points in multip
               tabindex="-1"
             />
             <circle
-              aria-label="40. metaData1, 80."
               cx="16"
               cy="12.826086956521738"
               focusable="false"
               id="circle26_0_11D"
               opacity="0"
               r="8"
-              role="none"
               stroke-width="0"
               width="0"
             />
@@ -1834,14 +1820,12 @@ exports[`Screen resolution Should remain unchanged on zoom in 1`] = `
               tabindex="-1"
             />
             <circle
-              aria-label="40. metaData3, 80."
               cx="16"
               cy="12.826086956521738"
               focusable="false"
               id="circle227_2_11D"
               opacity="0"
               r="8"
-              role="none"
               stroke-width="0"
               width="0"
             />
@@ -1889,14 +1873,12 @@ exports[`Screen resolution Should remain unchanged on zoom in 1`] = `
               tabindex="-1"
             />
             <circle
-              aria-label="50. metaData2, 90."
               cx="4"
               cy="18.804347826086957"
               focusable="false"
               id="circle227_1_11D"
               opacity="0"
               r="8"
-              role="none"
               stroke-width="0"
               width="0"
             />
@@ -1944,14 +1926,12 @@ exports[`Screen resolution Should remain unchanged on zoom in 1`] = `
               tabindex="-1"
             />
             <circle
-              aria-label="40. metaData1, 80."
               cx="16"
               cy="12.826086956521738"
               focusable="false"
               id="circle227_0_11D"
               opacity="0"
               r="8"
-              role="none"
               stroke-width="0"
               width="0"
             />
@@ -2433,14 +2413,12 @@ exports[`Screen resolution Should remain unchanged on zoom out 1`] = `
               tabindex="-1"
             />
             <circle
-              aria-label="40. metaData3, 80."
               cx="16"
               cy="12.826086956521738"
               focusable="false"
               id="circle240_2_11D"
               opacity="0"
               r="8"
-              role="none"
               stroke-width="0"
               width="0"
             />
@@ -2488,14 +2466,12 @@ exports[`Screen resolution Should remain unchanged on zoom out 1`] = `
               tabindex="-1"
             />
             <circle
-              aria-label="50. metaData2, 90."
               cx="4"
               cy="18.804347826086957"
               focusable="false"
               id="circle240_1_11D"
               opacity="0"
               r="8"
-              role="none"
               stroke-width="0"
               width="0"
             />
@@ -2543,14 +2519,12 @@ exports[`Screen resolution Should remain unchanged on zoom out 1`] = `
               tabindex="-1"
             />
             <circle
-              aria-label="40. metaData1, 80."
               cx="16"
               cy="12.826086956521738"
               focusable="false"
               id="circle240_0_11D"
               opacity="0"
               r="8"
-              role="none"
               stroke-width="0"
               width="0"
             />
@@ -3045,14 +3019,12 @@ exports[`Should reflect theme change 1`] = `
                 tabindex="-1"
               />
               <circle
-                aria-label="40. metaData3, 80."
                 cx="16"
                 cy="12.826086956521738"
                 focusable="false"
                 id="circle256_2_11D"
                 opacity="0"
                 r="8"
-                role="none"
                 stroke-width="0"
                 width="0"
               />
@@ -3100,14 +3072,12 @@ exports[`Should reflect theme change 1`] = `
                 tabindex="-1"
               />
               <circle
-                aria-label="50. metaData2, 90."
                 cx="4"
                 cy="18.804347826086957"
                 focusable="false"
                 id="circle256_1_11D"
                 opacity="0"
                 r="8"
-                role="none"
                 stroke-width="0"
                 width="0"
               />
@@ -3155,14 +3125,12 @@ exports[`Should reflect theme change 1`] = `
                 tabindex="-1"
               />
               <circle
-                aria-label="40. metaData1, 80."
                 cx="16"
                 cy="12.826086956521738"
                 focusable="false"
                 id="circle256_0_11D"
                 opacity="0"
                 r="8"
-                role="none"
                 stroke-width="0"
                 width="0"
               />

diff --git a/packages/react-charting/src/components/VerticalBarChart/VerticalBarChartRTL.test.tsx b/packages/react-charting/src/components/VerticalBarChart/VerticalBarChartRTL.test.tsx
@@ -15,6 +15,9 @@ import {
   testWithoutWait,
 } from '../../utilities/TestUtility.test';
 import { IVerticalBarChartProps } from './VerticalBarChart.types';
+import { axe, toHaveNoViolations } from 'jest-axe';
+
+expect.extend(toHaveNoViolations);
 
 const pointsWithLine = [
   {
@@ -465,3 +468,9 @@ describe('Vertical bar chart re-rendering', () => {
     });
   });
 });
+
+test('Should pass accessibility tests', async () => {
+  const { container } = render(<VerticalBarChart data={chartPoints} />);
+  const axeResults = await axe(container);
+  expect(axeResults).toHaveNoViolations();
+}, 10000);