refactor(project): update AC config and add in AVT tests (#10956)

* test(react): add AVT to breadcrumb

* feat(jest-config): update accessibility-checker config

* test(react): add accessibility-checker tests to ContentSwitcher

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

.gitignore

@@ -49,8 +49,8 @@ node_modules
 # Generated by npm@5, but project currently uses Yarn
 package-lock.json
 
-# AAT test results from DAP/Axe
-results/
-
 # Directories generated by Next.js
 .next
+
+# Accessibility Verification Testing
+.avt/

.prettierignore

@@ -62,3 +62,6 @@ packages/**/examples/**
 
 # Upgrade
 packages/upgrade/cli.js
+
+# Accessibility Verification Testing
+**/.avt/**

achecker.js

@@ -0,0 +1,26 @@
+/**
+ * Copyright IBM Corp. 2016, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+const path = require('path');
+
+module.exports = {
+  ruleArchive: 'latest',
+  policies: ['Custom_Ruleset'],
+  failLevels: ['violation'],
+  reportLevels: [
+    'violation',
+    'potentialviolation',
+    'recommendation',
+    'potentialrecommendation',
+    'manual',
+  ],
+  outputFormat: ['json'],
+  outputFolder: path.join('.avt', 'reports'),
+  baselineFolder: path.join('.avt', 'baseline'),
+};

config/jest-config-carbon/index.js

@@ -29,6 +29,7 @@ module.exports = {
   testEnvironment: 'jsdom',
   testRunner: 'jest-circus/runner',
   testPathIgnorePatterns: [
+    '/.avt/',
     '/cjs/',
     '/dist/',
     '/es/',
@@ -47,6 +48,7 @@ module.exports = {
     '[/\\\\]node_modules[/\\\\].+\\.(js|jsx)$',
   ],
   watchPathIgnorePatterns: [
+    '/.avt/',
     '/cjs/',
     '/dist/',
     '/es/',

config/jest-config-carbon/matchers/toHaveNoACViolations.js

@@ -1,10 +1,37 @@
+/**
+ * Copyright IBM Corp. 2016, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 'use strict';
 
 let aChecker = null;
 
 async function toHaveNoACViolations(node, label) {
   if (aChecker === null) {
     aChecker = require('accessibility-checker');
+
+    const denylist = new Set([
+      'WCAG20_Html_HasLang',
+      'WCAG20_Doc_HasTitle',
+      'WCAG20_Body_FirstASkips_Native_Host_Sematics',
+      'RPT_Html_SkipNav',
+      'Rpt_Aria_OrphanedContent_Native_Host_Sematics',
+    ]);
+    const ruleset = await aChecker.getRuleset('IBM_Accessibility');
+    const customRuleset = JSON.parse(JSON.stringify(ruleset));
+
+    customRuleset.id = 'Custom_Ruleset';
+    customRuleset.checkpoints = customRuleset.checkpoints.map((checkpoint) => {
+      checkpoint.rules = checkpoint.rules.filter((rule) => {
+        return !denylist.has(rule.id);
+      });
+      return checkpoint;
+    });
+
+    aChecker.addRuleset(customRuleset);
   }
 
   let results = await aChecker.getCompliance(node, label);

config/jest-config-carbon/package.json

@@ -28,7 +28,7 @@
     "@babel/preset-react": "^7.16.7",
     "@babel/runtime": "^7.16.7",
     "@wojtekmaj/enzyme-adapter-react-17": "^0.6.5",
-    "accessibility-checker": "^3.1.13",
+    "accessibility-checker": "^3.1.18",
     "axe-core": "^4.3.5",
     "babel-jest": "^27.4.6",
     "chalk": "^4.1.1",

packages/react/src/components/Breadcrumb/__tests__/Breadcrumb-test.js

@@ -15,66 +15,88 @@ import BreadcrumbItem from '../BreadcrumbItem';
 const { prefix } = settings;
 
 describe('Breadcrumb', () => {
-  describe('API', () => {
-    it('should accept a `aria-label` for nav element', () => {
-      render(<Breadcrumb aria-label={'test-label'} />);
-      expect(screen.getByLabelText('test-label')).toBeInTheDocument();
-    });
+  it('should accept a `aria-label` for nav element', () => {
+    render(<Breadcrumb aria-label={'test-label'} />);
+    expect(screen.getByLabelText('test-label')).toBeInTheDocument();
+  });
 
-    it('should provide a default `aria-label` for nav element', () => {
-      render(<Breadcrumb />);
-      expect(screen.getByLabelText('Breadcrumb')).toBeInTheDocument();
-    });
+  it('should provide a default `aria-label` for nav element', () => {
+    render(<Breadcrumb />);
+    expect(screen.getByLabelText('Breadcrumb')).toBeInTheDocument();
+  });
+
+  it('should accept `children` of BreadcrumbItem', () => {
+    render(
+      <Breadcrumb>
+        <BreadcrumbItem href="#a">A</BreadcrumbItem>
+        <BreadcrumbItem href="#b">B</BreadcrumbItem>
+        <BreadcrumbItem href="#c">C</BreadcrumbItem>
+      </Breadcrumb>
+    );
+    expect(screen.getByText('A')).toBeInTheDocument();
+    expect(screen.getByText('B')).toBeInTheDocument();
+    expect(screen.getByText('C')).toBeInTheDocument();
+  });
+
+  it('should accept a `noTrailingSlash` and omit the trailing slash', () => {
+    render(
+      <Breadcrumb noTrailingSlash>
+        <BreadcrumbItem href="#a">A</BreadcrumbItem>
+        <BreadcrumbItem href="#b">B</BreadcrumbItem>
+        <BreadcrumbItem href="#c">C</BreadcrumbItem>
+      </Breadcrumb>
+    );
+
+    // The slashes are implemented with pseudo elements that can't be detected in jsdom.
+    // So we have to settle here for just validating against the class. Pseudo elements
+    // should be tested in the browser/e2e tests.
+    // https://testing-library.com/docs/dom-testing-library/api-configuration/#computedstylesupportspseudoelements
+    // https://github.com/jsdom/jsdom/issues/1928
+    expect(screen.getByRole('list')).toHaveClass(
+      `${prefix}--breadcrumb--no-trailing-slash`
+    );
+  });
+
+  it('should accept a `className` for outermost DOM node', () => {
+    const { container } = render(<Breadcrumb className="test" />);
+
+    expect(container.firstChild).toHaveClass('test');
+  });
+
+  it('should apply additional props to the outermost element', () => {
+    const { container } = render(<Breadcrumb data-testid="test" />);
+
+    expect(container.firstChild).toHaveAttribute('data-testid', 'test');
+  });
 
-    it('should accept `children` of BreadcrumbItem', () => {
-      render(
+  it('should accept a `ref` for the outermost element', () => {
+    const ref = jest.fn();
+    const { container } = render(<Breadcrumb ref={ref} />);
+
+    expect(ref).toHaveBeenCalledWith(container.firstChild);
+  });
+
+  describe('automated verification testing', () => {
+    it('should have no aXe violations', async () => {
+      const { container } = render(
         <Breadcrumb>
           <BreadcrumbItem href="#a">A</BreadcrumbItem>
           <BreadcrumbItem href="#b">B</BreadcrumbItem>
           <BreadcrumbItem href="#c">C</BreadcrumbItem>
         </Breadcrumb>
       );
-      expect(screen.getByText('A')).toBeInTheDocument();
-      expect(screen.getByText('B')).toBeInTheDocument();
-      expect(screen.getByText('C')).toBeInTheDocument();
+      await expect(container).toHaveNoAxeViolations();
     });
 
-    it('should accept a `noTrailingSlash` and omit the trailing slash', () => {
-      render(
-        <Breadcrumb noTrailingSlash>
+    it('should have no AC violations', async () => {
+      const { container } = render(
+        <Breadcrumb>
           <BreadcrumbItem href="#a">A</BreadcrumbItem>
           <BreadcrumbItem href="#b">B</BreadcrumbItem>
           <BreadcrumbItem href="#c">C</BreadcrumbItem>
         </Breadcrumb>
       );
-
-      // The slashes are implemented with pseudo elements that can't be detected in jsdom.
-      // So we have to settle here for just validating against the class. Pseudo elements
-      // should be tested in the browser/e2e tests.
-      // https://testing-library.com/docs/dom-testing-library/api-configuration/#computedstylesupportspseudoelements
-      // https://github.com/jsdom/jsdom/issues/1928
-      expect(screen.getByRole('list')).toHaveClass(
-        `${prefix}--breadcrumb--no-trailing-slash`
-      );
-    });
-
-    it('should accept a `className` for outermost DOM node', () => {
-      const { container } = render(<Breadcrumb className="test" />);
-
-      expect(container.firstChild).toHaveClass('test');
-    });
-
-    it('should apply additional props to the outermost element', () => {
-      const { container } = render(<Breadcrumb data-testid="test" />);
-
-      expect(container.firstChild).toHaveAttribute('data-testid', 'test');
-    });
-
-    it('should accept a `ref` for the outermost element', () => {
-      const ref = jest.fn();
-      const { container } = render(<Breadcrumb ref={ref} />);
-
-      expect(ref).toHaveBeenCalledWith(container.firstChild);
+      await expect(container).toHaveNoACViolations('Breadcrumb');
     });
   });
 });

packages/react/src/components/ContentSwitcher/ContentSwitcher-test.js

@@ -5,6 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+import { render } from '@testing-library/react';
 import React from 'react';
 import ContentSwitcher from '../ContentSwitcher';
 import Switch from '../Switch';
@@ -219,4 +220,26 @@ describe('ContentSwitcher', () => {
       });
     });
   });
+
+  describe('automated verification testing', () => {
+    it('should have no aXe violations', async () => {
+      const { container } = render(
+        <ContentSwitcher>
+          <Switch kind="anchor" text="one" />
+          <Switch kind="anchor" text="two" />
+        </ContentSwitcher>
+      );
+      await expect(container).toHaveNoAxeViolations();
+    });
+
+    it('should have no AC violations', async () => {
+      const { container } = render(
+        <ContentSwitcher>
+          <Switch kind="anchor" text="one" />
+          <Switch kind="anchor" text="two" />
+        </ContentSwitcher>
+      );
+      await expect(container).toHaveNoACViolations('ContentSwitcher');
+    });
+  });
 });

yarn.lock

@@ -8570,9 +8570,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"accessibility-checker@npm:^3.1.13":
-  version: 3.1.13
-  resolution: "accessibility-checker@npm:3.1.13"
+"accessibility-checker@npm:^3.1.18":
+  version: 3.1.18
+  resolution: "accessibility-checker@npm:3.1.18"
   dependencies:
     chromedriver: "*"
     deep-diff: ^0.3.4
@@ -8581,7 +8581,7 @@ __metadata:
     request: ^2.88.2
   bin:
     achecker: bin/achecker.js
-  checksum: c31de81e4b0e6da0b31596f9ef2e5abefdb01f6b17193b7153dafe30a0d587b3e9c2ed24989a4dd8a65d20d5e8f704685a58107be7c35e55e2ac2b381d3c41c9
+  checksum: e859f3ee4de316e8c1902bb702558e2c86a3490ed8da6a12fd92752365288295cf413688dbfca6dfb5058eac89115c7572cdd07795ecf59f80dcbbe3375edc1c
   languageName: node
   linkType: hard
 
@@ -22678,7 +22678,7 @@ __metadata:
     "@babel/preset-react": ^7.16.7
     "@babel/runtime": ^7.16.7
     "@wojtekmaj/enzyme-adapter-react-17": ^0.6.5
-    accessibility-checker: ^3.1.13
+    accessibility-checker: ^3.1.18
     axe-core: ^4.3.5
     babel-jest: ^27.4.6
     chalk: ^4.1.1