Add accessibility checks with axe-core to component tests (#9488)

Author: acelaya

h/static/scripts/group-forms/components/EditGroupMembersForm.tsx

@@ -158,6 +158,7 @@ function RoleSelect({
       buttonContent={roleStrings[current]}
       data-testid={`role-${username}`}
       disabled={disabled}
+      aria-label="Select role"
     >
       {available.map(role => (
         <Select.Option key={role} value={role}>

h/static/scripts/group-forms/components/forms/test/TextField-test.js

@@ -1,4 +1,4 @@
-import { mount } from '@hypothesis/frontend-testing';
+import { checkAccessibility, mount } from '@hypothesis/frontend-testing';
 
 import TextField from '../TextField';
 
@@ -78,4 +78,11 @@ describe('TextField', () => {
       'Must be 5 characters or more.',
     );
   });
+
+  it(
+    'should pass a11y checks',
+    checkAccessibility({
+      content: () => mount(<TextField value="" label="Text field" />),
+    }),
+  );
 });

h/static/scripts/group-forms/components/test/AppRoot-test.js

@@ -1,4 +1,4 @@
-import { mount } from '@hypothesis/frontend-testing';
+import { checkAccessibility, mount } from '@hypothesis/frontend-testing';
 import { useContext } from 'preact/hooks';
 
 import { $imports, default as AppRoot } from '../AppRoot';
@@ -31,9 +31,13 @@ describe('AppRoot', () => {
     $imports.$restore();
   });
 
+  function createComponent() {
+    return mount(<AppRoot config={config} />);
+  }
+
   it('renders style links', () => {
     config.styles = ['/static/styles/foo.css'];
-    const links = mount(<AppRoot config={config} />).find('link');
+    const links = createComponent().find('link');
     assert.equal(links.length, 1);
     assert.equal(links.at(0).prop('rel'), 'stylesheet');
     assert.equal(links.at(0).prop('href'), '/static/styles/foo.css');
@@ -51,14 +55,14 @@ describe('AppRoot', () => {
 
   it('passes config to route', () => {
     navigate('/groups/new', () => {
-      mount(<AppRoot config={config} />);
+      createComponent();
       assert.strictEqual(configContext, config);
     });
   });
 
   it('passes saved group to group settings route', () => {
     navigate('/groups/1234/edit', () => {
-      const wrapper = mount(<AppRoot config={config} />);
+      const wrapper = createComponent();
       assert.equal(
         wrapper.find('CreateEditGroupForm').prop('group'),
         config.context.group,
@@ -68,7 +72,7 @@ describe('AppRoot', () => {
 
   it('passes updated group to group settings route', () => {
     navigate('/groups/1234/edit', () => {
-      const wrapper = mount(<AppRoot config={config} />);
+      const wrapper = createComponent();
       const updatedGroup = { name: 'foobar' };
       wrapper.find('CreateEditGroupForm').prop('onUpdateGroup')(updatedGroup);
       wrapper.update();
@@ -99,10 +103,15 @@ describe('AppRoot', () => {
   ].forEach(({ path, selector }) => {
     it(`renders expected component for URL (${path})`, () => {
       navigate(path, () => {
-        const wrapper = mount(<AppRoot config={config} />);
+        const wrapper = createComponent();
         const component = wrapper.find(selector);
         assert.isTrue(component.exists());
       });
     });
   });
+
+  it(
+    'should pass a11y checks',
+    checkAccessibility({ content: createComponent }),
+  );
 });

h/static/scripts/group-forms/components/test/CreateEditGroupForm-test.js

@@ -1,5 +1,10 @@
 import { act } from 'preact/test-utils';
-import { delay, mount, waitForElement } from '@hypothesis/frontend-testing';
+import {
+  checkAccessibility,
+  delay,
+  mount,
+  waitForElement,
+} from '@hypothesis/frontend-testing';
 
 import {
   $imports,
@@ -581,6 +586,11 @@ describe('CreateEditGroupForm', () => {
 
     assert.equal(getSelectedGroupType(wrapper), 'private');
   });
+
+  it(
+    'should pass a11y checks',
+    checkAccessibility({ content: () => createWrapper().wrapper }),
+  );
 });
 
 async function assertInLoadingState(wrapper, inLoadingState) {

h/static/scripts/group-forms/components/test/EditGroupMembersForm-test.js

@@ -1,4 +1,5 @@
 import {
+  checkAccessibility,
   delay,
   mount,
   waitFor,
@@ -537,4 +538,11 @@ describe('EditGroupMembersForm', () => {
     assert.equal(bobRole.prop('value'), originalRole);
     assert.isFalse(controlsDisabled(wrapper, 'bob'));
   });
+
+  it('should pass a11y checks', async () => {
+    const wrapper = createForm();
+    await waitForTable(wrapper);
+
+    await checkAccessibility({ content: () => wrapper })();
+  });
 });

h/static/scripts/group-forms/components/test/GroupFormHeader-test.js

@@ -1,4 +1,4 @@
-import { mount } from '@hypothesis/frontend-testing';
+import { checkAccessibility, mount } from '@hypothesis/frontend-testing';
 
 import GroupFormHeader from '../GroupFormHeader';
 
@@ -43,4 +43,6 @@ describe('GroupFormHeader', () => {
     assert.isFalse(getLink(header, 'settings-link').exists());
     assert.isFalse(getLink(header, 'members-link').exists());
   });
+
+  it('should pass a11y checks', checkAccessibility({ content: createHeader }));
 });

h/static/scripts/group-forms/components/test/SaveStateIcon-test.js

@@ -1,7 +1,11 @@
-import { mount } from '@hypothesis/frontend-testing';
+import { checkAccessibility, mount } from '@hypothesis/frontend-testing';
 import SaveStateIcon from '../SaveStateIcon';
 
 describe('SaveStateIcon', () => {
+  function createComponent(state) {
+    return mount(<SaveStateIcon state={state} />);
+  }
+
   [
     {
       state: 'unsaved',
@@ -20,9 +24,14 @@ describe('SaveStateIcon', () => {
     },
   ].forEach(({ state, checkIcon, spinnerIcon }) => {
     it(`shows expected icons in "${state}" state`, () => {
-      const wrapper = mount(<SaveStateIcon state={state} />);
+      const wrapper = createComponent(state);
       assert.equal(wrapper.exists('CheckIcon'), checkIcon);
       assert.equal(wrapper.exists('SpinnerSpokesIcon'), spinnerIcon);
     });
+
+    it(
+      'should pass a11y checks',
+      checkAccessibility({ content: () => createComponent(state) }),
+    );
   });
 });