test(Link): add RTL, add a11y tests, add Accessibility Checker/Axe (#…

…7284)

* test(Link): add RTL, add a11y tests, add AC

* Update packages/react/src/components/Link/Link-test.js

Co-authored-by: Josh Black <[email protected]>

* Update packages/react/src/components/Link/Link-test.js

Co-authored-by: Josh Black <[email protected]>

* test(Link): change import style/use RTL cleanup

* test(Link): change import style/use RTL cleanup

Co-authored-by: Josh Black <[email protected]>
Co-authored-by: TJ Egan <[email protected]>

package.json

@@ -47,6 +47,11 @@
     "@commitlint/cli": "^8.3.5",
     "@commitlint/config-conventional": "^8.3.4",
     "@ibma/aat": "https://able.ibm.com/tools/dist/ibma-aat-2.0.6.tgz",
+    "@testing-library/dom": "^7.26.6",
+    "@testing-library/jest-dom": "^5.11.5",
+    "@testing-library/react": "^11.1.1",
+    "@testing-library/user-event": "^12.2.0",
+    "accessibility-checker": "^3.1.1",
     "all-contributors-cli": "^6.19.0",
     "axe-core": "^3.3.2",
     "babel-jest": "^26.0.1",

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

@@ -9,10 +9,16 @@ import React from 'react';
 import Link from '../Link';
 import { shallow } from 'enzyme';
 import { settings } from 'carbon-components';
+import { cleanup, render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import userEvent from '@testing-library/user-event';
+import { describe, document } from 'window-or-global';
 
 const { prefix } = settings;
 
 describe('Link', () => {
+  afterEach(cleanup);
+
   describe('Renders as expected', () => {
     const link = shallow(
       <Link href="www.google.com" className="some-class">
@@ -56,4 +62,55 @@ describe('Link', () => {
       expect(link.props().rel).toEqual('noopener');
     });
   });
+
+  describe('automated verification testing', () => {
+    it('should have no Axe violations', async () => {
+      render(
+        <Link href="/" className="some-class">
+          A simple link
+        </Link>
+      );
+
+      await expect(screen.getByText('A simple link')).toHaveNoAxeViolations();
+    });
+
+    it('should have no Accessibility Checker violations', async () => {
+      render(
+        <main>
+          <Link href="/" className="some-class">
+            A simple link
+          </Link>
+        </main>
+      );
+
+      await expect(screen.getByText('A simple link')).toHaveNoACViolations(
+        'Link'
+      );
+    });
+  });
+
+  describe('keyboard support', () => {
+    it('should recieve keyboard focus', () => {
+      render(
+        <Link href="/" className="some-class">
+          A simple link
+        </Link>
+      );
+
+      expect(document.body).toHaveFocus();
+      userEvent.tab();
+      expect(screen.getByText('A simple link')).toHaveFocus();
+    });
+
+    it('should not receive keyboard focus when disabled', () => {
+      render(
+        <Link href="/" disabled className="some-class">
+          A simple link
+        </Link>
+      );
+      expect(document.body).toHaveFocus();
+      userEvent.tab();
+      expect(document.body).toHaveFocus();
+    });
+  });
 });

packages/react/src/components/Link/link-avt.md

@@ -0,0 +1,32 @@
+# Link Component Accessibility Verification Testing
+
+Developers or designers wanting to manually verify the accessibility of the
+component can carry out the following steps:
+
+## Keyboard
+
+- [ ] the user can focus the link with `tab`
+- [ ] the user can activate the link with `enter`
+
+## Contrast
+
+- [ ] the link text has a contrast of 4.5:1 minimum against the background color
+- [ ] the link focus outline has a contrast of 4.5:1 minimum against the
+      background color
+
+## Screen reader
+
+Each screen reader should be tested when paired with it's preferred browser.
+
+### VoiceOver on Safari
+
+"{link text}, link. You are currently on a link. To click this link, press
+Control-Option-Space."
+
+### JAWS on Edge/Chrome
+
+"Main region. {link text}, link."
+
+### NVDA on Firefox (optional, but recommended)
+
+"link {link text}"

tasks/jest/matchers/toHaveNoACViolations.js

@@ -0,0 +1,19 @@
+'use strict';
+
+const aChecker = require('accessibility-checker');
+
+async function toHaveNoACViolations(node, label) {
+  let results = await aChecker.getCompliance(node, label);
+  if (aChecker.assertCompliance(results.report) === 0) {
+    return {
+      pass: true,
+    };
+  } else {
+    return {
+      pass: false,
+      message: () => aChecker.stringifyResults(results.report),
+    };
+  }
+}
+
+module.exports = toHaveNoACViolations;

tasks/jest/setupAfterEnv.js

@@ -9,6 +9,7 @@ const chalk = require('chalk');
 const util = require('util');
 const toHaveNoAxeViolations = require('./matchers/toHaveNoAxeViolations');
 const toHaveNoDAPViolations = require('./matchers/toHaveNoDAPViolations');
+const toHaveNoACViolations = require('./matchers/toHaveNoACViolations');
 
 // We can extend `expect` using custom matchers as defined by:
 // https://jest-bot.github.io/jest/docs/expect.html#expectextendmatchers
@@ -21,7 +22,11 @@ const toHaveNoDAPViolations = require('./matchers/toHaveNoDAPViolations');
 //
 // For more information, check out the docs here:
 // https://jestjs.io/docs/en/configuration.html#setupfilesafterenv-array
-expect.extend({ toHaveNoAxeViolations, toHaveNoDAPViolations });
+expect.extend({
+  toHaveNoAxeViolations,
+  toHaveNoDAPViolations,
+  toHaveNoACViolations,
+});
 
 // Have our test suite throw an error if one of the below console methods are
 // called when we are not expecting them. This is often helpful for React