WIP #567 Add vitest-axe and add a11y tests where applicable

package.json

@@ -91,7 +91,8 @@
     "rollup-plugin-visualizer": "^5.9.0",
     "string_decoder": "^1.3.0",
     "vite": "^4.5.0",
-    "vitest": "^0.34.6"
+    "vitest": "^0.34.6",
+    "vitest-axe": "^0.1.0"
   },
   "lint-staged": {
     "*.{js,css,ts,tsx,jsx}": [

test/components/CivicProfileForms/BasicInfo.test.jsx

@@ -2,10 +2,15 @@ import React from 'react';
 import { render } from '@testing-library/react';
 import { expect, it, describe } from 'vitest';
 import { BasicInfo } from '@components/CivicProfileForms';
+import isAccessible from '../../utils/axe';
 
 describe('Basic Info Form', () => {
   it('renders', () => {
     const { getByText } = render(<BasicInfo />);
     expect(getByText('Basic Info')).not.toBeNull();
   });
+
+  it('should be accessible', () => {
+    isAccessible(render(<BasicInfo />));
+  });
 });

test/components/CivicProfileForms/FinancialInfo.test.jsx

@@ -2,10 +2,15 @@ import React from 'react';
 import { render } from '@testing-library/react';
 import { expect, it, describe } from 'vitest';
 import { FinancialInfo } from '@components/CivicProfileForms';
+import isAccessible from '../../utils/axe';
 
 describe('Financial Info Form', () => {
   it('renders', () => {
     const { getByText } = render(<FinancialInfo />);
     expect(getByText('Financial Info')).not.toBeNull();
   });
+
+  it('should be accessible', () => {
+    isAccessible(render(<FinancialInfo />));
+  });
 });

test/components/CivicProfileForms/FormLayout.test.jsx

@@ -3,6 +3,7 @@ import { render } from '@testing-library/react';
 import { MemoryRouter as Router } from 'react-router-dom';
 import { expect, it, describe } from 'vitest';
 import { FormLayout, CIVIC_FORM_LIST } from '@components/CivicProfileForms';
+import isAccessible from '../../utils/axe';
 
 const renderLayout = (route) =>
   render(
@@ -37,3 +38,7 @@ describe('Civic Form Layout', () => {
     expect(queryAllByRole('link')[0].getAttribute('href')).toBe(`/${prevRoute.path}`);
   });
 });
+
+it('should be accessible', () => {
+  isAccessible(renderLayout(CIVIC_FORM_LIST[0].path));
+});

test/components/CivicProfileForms/HousingInfo.test.jsx

@@ -4,6 +4,7 @@ import { vi, expect, it, describe } from 'vitest';
 import { HousingInfo } from '@components/CivicProfileForms';
 import { useCivicProfile } from '@hooks';
 import userEvent from '@testing-library/user-event';
+import isAccessible from '../../utils/axe';
 
 vi.mock('@hooks', async () => {
   const actual = await vi.importActual('@hooks');
@@ -22,6 +23,11 @@ describe('Housing info form', () => {
     expect(cityField).not.toBeNull();
   });
 
+  it('should be accessible', () => {
+    useCivicProfile.mockReturnValue({ data: {}, isSuccess: true });
+    isAccessible(render(<HousingInfo />));
+  });
+
   it('submits an address update when you click the submit button', async () => {
     const user = userEvent.setup();
     const mockAdd = vi.fn();

test/components/Contacts/ContactsListTable.test.jsx

@@ -4,6 +4,7 @@ import { expect, it } from 'vitest';
 import { BrowserRouter } from 'react-router-dom';
 import { ContactListTable } from '@components/Contacts';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import isAccessible from '../../utils/axe';
 
 const queryClient = new QueryClient();
 
@@ -15,6 +16,25 @@ const MockTableComponent = ({ contacts }) => (
   </QueryClientProvider>
 );
 
+// TODO: Fix accessibility issues within this component
+it.skip('should be accessible', () => {
+  const contacts = [
+    {
+      familyName: 'Abby',
+      givenName: 'Aaron',
+      person: 'Aaron Abby',
+      webId: 'https://example.com/Abby'
+    },
+    {
+      familyName: 'Builder',
+      givenName: 'Bob',
+      person: 'Bob Builder',
+      webId: 'https://example.com/Builder'
+    }
+  ];
+  isAccessible(render(<MockTableComponent contacts={contacts} />));
+});
+
 it('renders all clients from client context', () => {
   const contacts = [
     {

test/components/Documents/DocumentTable.test.jsx

@@ -3,8 +3,8 @@ import { render } from '@testing-library/react';
 import { describe, expect, it } from 'vitest';
 import { BrowserRouter } from 'react-router-dom';
 import DocumentTable from '@components/Documents';
-
 import { DocumentListContext } from '@contexts';
+import isAccessible from '../../utils/axe';
 
 const mockedDocumentContext = {
   documentListObject: {
@@ -60,4 +60,9 @@ describe('DocumentTable Component', () => {
     expect(row2FileType).not.toBeNull();
     expect(row2Description).not.toBeNull();
   });
+
+  // TODO: Fix accessibility issues with this component
+  it.skip('should be accessible', () => {
+    isAccessible(render(<MockTableComponent />));
+  });
 });

test/components/Footer/Footer.test.jsx

@@ -6,6 +6,7 @@ import { SessionContext } from '@contexts';
 import { ThemeProvider } from '@mui/material/styles';
 import theme from '../../../src/theme';
 import Footer from '../../../src/components/Footer/Footer';
+import isAccessible from '../../utils/axe';
 
 // clear created dom after each test, to start fresh for next
 afterEach(() => {
@@ -28,4 +29,18 @@ describe('Footer', () => {
 
     expect(headings.length).toBe(2);
   });
+
+  it('should be accessible', () => {
+    isAccessible(
+      render(
+        <SessionContext.Provider value={{ session: { info: { isLoggedIn: false } } }}>
+          <ThemeProvider theme={theme}>
+            <BrowserRouter>
+              <Footer />
+            </BrowserRouter>
+          </ThemeProvider>
+        </SessionContext.Provider>
+      )
+    );
+  });
 });

test/components/Form/FormSection.test.jsx

@@ -3,6 +3,7 @@ import { render } from '@testing-library/react';
 import { expect, it } from 'vitest';
 import { FormSection } from '@components/Form';
 import createMatchMedia from '../../helpers/createMatchMedia';
+import isAccessible from '../../utils/axe';
 
 const MockChildrenComponent = () => <div />;
 
@@ -12,6 +13,10 @@ const MockFormSection = () => (
   </FormSection>
 );
 
+it('should be accessible', () => {
+  isAccessible(render(<MockFormSection />));
+});
+
 it('renders 20px padding by default', () => {
   const component = render(<MockFormSection />);
   const adjustableBox = getComputedStyle(component.container.firstChild);

test/components/Home/HomeSection.test.jsx

@@ -3,6 +3,7 @@ import { render } from '@testing-library/react';
 import { expect, it, describe } from 'vitest';
 import { HomeSection } from '@components/Home';
 import createMatchMedia from '../../helpers/createMatchMedia';
+import isAccessible from '../../utils/axe';
 
 const MockSection = () => <HomeSection />;
 const MockSectionDescription = () => <HomeSection description="Example Text" />;
@@ -82,3 +83,30 @@ describe('Image rendering', () => {
     expect(image.width).toBe('80%');
   });
 });
+
+describe('Accessibility', () => {
+  // TODO: Fix accessibility issues with this component
+  it.skip('should have basic rendering be accessible', () => {
+    isAccessible(render(<MockSection />));
+  });
+
+  // TODO: Fix accessibility issues with this component
+  it.skip('should have description rendering be accessible', () => {
+    isAccessible(render(<MockSectionDescription />));
+  });
+
+  // TODO: Fix accessibility issues with this component
+  it.skip('should have description mobile rendering be accessible', () => {
+    isAccessible(render(<MockSectionDescriptionMobile />));
+  });
+
+  // TODO: Fix accessibility issues with this component
+  it.skip('should have button rendering be accessible', () => {
+    isAccessible(render(<MockSectionButton />));
+  });
+
+  // TODO: Fix accessibility issues with this component
+  it.skip('should have button mobile rendering be accessible', () => {
+    isAccessible(render(<MockSectionButtonMobile />));
+  });
+});

test/components/Home/KeyFeatures.test.jsx

@@ -1,12 +1,25 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import { expect, it } from 'vitest';
+import { describe, expect, it } from 'vitest';
 import { KeyFeatures } from '@components/Home';
 import createMatchMedia from '../../helpers/createMatchMedia';
+import isAccessible from '../../utils/axe';
 
 const MockKeyFeaturesDefault = () => <KeyFeatures description="Example Text" />;
 const MockKeyFeaturesMobile = () => <KeyFeatures isReallySmallScreen description="Example Text" />;
 
+describe('Accessibility', () => {
+  // TODO: Fix accessibility issues with this component
+  it.skip('should be accessible', async () => {
+    await isAccessible(render(<MockKeyFeaturesDefault />));
+  });
+
+  // TODO: Fix accessibility issues with this component
+  it.skip('should be accessible on mobile', async () => {
+    await isAccessible(render(<MockKeyFeaturesMobile />));
+  });
+});
+
 it('renders less width by default', () => {
   const { getByText } = render(<MockKeyFeaturesDefault />);
   const description = getByText('Example Text');

test/components/Messages/Inbox.test.jsx

@@ -9,6 +9,7 @@ import Badge from '@mui/material/Badge';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { useMessageList } from '@hooks';
 import { Inbox, MessagesLayout } from '@components/Messages';
+import isAccessible from '../../utils/axe';
 
 vi.mock('@inrupt/solid-client');
 
@@ -109,6 +110,12 @@ describe('Messages Page', () => {
       }
     }
   };
+
+  // TODO: Fix accessibility issues with this component
+  it.skip('should be accessible', () => {
+    isAccessible(render(<MockMessagePage session={sessionObj} />));
+  });
+
   it('renders', () => {
     const { getByText } = render(<MockMessagePage session={sessionObj} />);
     expect(getByText('Inbox', { exact: true })).not.toBeNull();

test/components/Messages/MessageButtonGroup.test.jsx

@@ -4,12 +4,18 @@ import { render } from '@testing-library/react';
 import { expect, it } from 'vitest';
 import { MessageButtonGroup } from '@components/Messages';
 import createMatchMedia from '../../helpers/createMatchMedia';
+import isAccessible from '../../utils/axe';
 
 const MockMessageButtonGroup = () => (
   <BrowserRouter>
     <MessageButtonGroup boxType="inbox" />
   </BrowserRouter>
 );
+
+it('should be accessible', () => {
+  isAccessible(render(<MockMessageButtonGroup />));
+});
+
 it('renders button group as a row default', () => {
   const { getByRole } = render(<MockMessageButtonGroup />);
   const newMessageButton = getByRole('button', { name: 'New Message' });