test(Checkbox): add accessibility unit tests and docs (#7422)

* test(Checkbox): add AAT and WCAG tests

* docs(Checkbox): add manual AVT guide

* test(Checkbox): add more explicit assertions

* test(Checkbox): remove unused import

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

Co-authored-by: Josh Black <josh@josh.black>

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

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

@@ -10,6 +10,9 @@ import Checkbox from '../Checkbox';
 import CheckboxSkeleton from '../Checkbox/Checkbox.Skeleton';
 import { mount } from 'enzyme';
 import { settings } from 'carbon-components';
+import { cleanup, render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import '@testing-library/jest-dom';
 
 const { prefix } = settings;
 
@@ -190,3 +193,41 @@ describe('CheckboxSkeleton', () => {
     });
   });
 });
+
+describe('Checkbox accessibility', () => {
+  afterEach(cleanup);
+
+  it('should have no Axe violations', async () => {
+    render(<Checkbox labelText="Checkbox label" id="test_id" />);
+    await expect(
+      screen.getByLabelText('Checkbox label')
+    ).toHaveNoAxeViolations();
+  });
+
+  it('should have no Accessibility Checker violations', async () => {
+    render(
+      <main>
+        <Checkbox labelText="Checkbox label" id="test_id" />
+      </main>
+    );
+    await expect(screen.getByLabelText('Checkbox label')).toHaveNoACViolations(
+      'Checkbox'
+    );
+  });
+
+  it('can receive keyboard focus', () => {
+    render(<Checkbox labelText="Checkbox label" id="test_id" />);
+    userEvent.tab();
+    expect(screen.getByLabelText('Checkbox label')).toHaveFocus();
+  });
+
+  it('should have an accessible label', () => {
+    render(<Checkbox labelText="Checkbox label" id="test_id" />);
+    expect(() => screen.getByText('Checkbox label')).not.toThrow();
+  });
+
+  it('should have an appropriate role', () => {
+    render(<Checkbox labelText="Checkbox label" id="test_id" />);
+    expect(() => screen.getByRole('checkbox')).not.toThrow();
+  });
+});

packages/react/src/components/Checkbox/checkbox-avt.md

@@ -0,0 +1,26 @@
+Checkbox Component Accessibility Verification Testing
+
+Developers or designers wanting to manually verify the accessibility of the
+component can carry out the following steps:
+
+## Contrast
+
+- [ ] the Checkbox border has a contrast of 4.5:1 minimum against the page
+      background
+
+## Screen reader
+
+Each screen reader should be tested when paired with its preferred browser.
+
+### VoiceOver on Safari
+
+1. {tab} "Checkbox. You are currently on a checkbox. To select or unselect this
+   checkbox press ctrl-option-space"
+
+### JAWS on Edge/Chrome
+
+1. {tab} "Checkbox. Checkbox not checked"
+
+### NVDA on Firefox (optional, but recommended)
+
+1. {tab} "Checkbox. Checkbox not checked. To check press SPACEBAR"