Pages

test/pages/CivicProfile.test.jsx

@@ -4,6 +4,18 @@ import { render } from '@testing-library/react';
 import { expect, it } from 'vitest';
 import { CivicProfile } from '@pages';
 import createMatchMedia from '../helpers/createMatchMedia';
+import isAccessible from '../utils/axe';
+
+// TODO: Fix accessibility issues with this component
+it.skip('should be accessible', () => {
+  isAccessible(
+    render(
+      <BrowserRouter>
+        <CivicProfile />
+      </BrowserRouter>
+    )
+  );
+});
 
 it('renders page container flex direction as row and nav container width as 25% by default', () => {
   const component = render(

test/pages/Contacts.test.jsx

@@ -5,6 +5,7 @@ import { render } from '@testing-library/react';
 import { useContactsList } from '@hooks';
 import { BrowserRouter } from 'react-router-dom';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import isAccessible from '../utils/axe';
 
 vi.mock('@hooks', async () => {
   const actual = await vi.importActual('@hooks');
@@ -22,6 +23,32 @@ describe('Contacts Page', () => {
     vi.clearAllMocks();
   });
 
+  // TODO: Fix accessibility issues with this component
+  it.skip('should be accessible', () => {
+    const firstContact = {
+      person: 'Peter Parker',
+      familyName: 'Parker',
+      givenName: 'Peter',
+      webId: 'http://peter.com'
+    };
+    const secondContact = {
+      person: 'Batman',
+      familyName: 'Batman',
+      givenName: 'Batman',
+      webId: 'http://batman.com'
+    };
+    useContactsList.mockReturnValue({ data: [firstContact, secondContact] });
+    isAccessible(
+      render(
+        <QueryClientProvider client={queryClient}>
+          <BrowserRouter>
+            <Contacts />
+          </BrowserRouter>
+        </QueryClientProvider>
+      )
+    );
+  });
+
   it('displays Loading message while loading', () => {
     useContactsList.mockReturnValue({ isLoading: true });
     const { getByRole } = render(

test/pages/Home.test.jsx

@@ -3,10 +3,15 @@ import { render, cleanup, screen } from '@testing-library/react';
 import { expect, describe, it, afterEach } from 'vitest';
 import { Home } from '@pages';
 import createMatchMedia from '../helpers/createMatchMedia';
+import isAccessible from '../utils/axe';
 
 describe('Home Page', () => {
   afterEach(cleanup);
 
+  it('should be accessible', () => {
+    isAccessible(render(<Home />));
+  });
+
   it('renders with correct order of logoSection on mobile', () => {
     window.matchMedia = createMatchMedia(599);
     render(<Home />);

test/pages/PersonalProfile.test.jsx

@@ -4,10 +4,22 @@ import { BrowserRouter } from 'react-router-dom';
 import { expect, it, describe } from 'vitest';
 import { CivicProfile } from '@pages';
 import { CIVIC_FORM_LIST } from '@components/CivicProfileForms';
+import isAccessible from '../utils/axe';
 
 describe('Civic Profile', () => {
   const numLinks = CIVIC_FORM_LIST.length;
 
+  // TODO: Fix accessibility issues with this component
+  it.skip('should be accessible', () => {
+    isAccessible(
+      render(
+        <BrowserRouter>
+          <CivicProfile />
+        </BrowserRouter>
+      )
+    );
+  });
+
   it('renders buttons for all forms in CIVIC_FORM_LIST', () => {
     const { getByRole, getAllByRole } = render(
       <BrowserRouter>

test/pages/Signup.test.jsx

@@ -6,6 +6,7 @@ import { BrowserRouter } from 'react-router-dom';
 import { Signup } from '@pages';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { SessionContext } from '@contexts';
+import isAccessible from '../utils/axe';
 
 vi.mock('@inrupt/solid-client');
 
@@ -37,6 +38,21 @@ const MockSignupContexts = ({ session }) => (
 );
 
 describe('Signup Page', () => {
+  it('should be accessible', () => {
+    const sessionObj = {
+      login: vi.fn(),
+      fetch: vi.fn(),
+      podUrl: 'https://example.com',
+      session: {
+        info: {
+          webId: 'https://example.com/profile/',
+          isLoggedIn: false
+        }
+      }
+    };
+    isAccessible(render(<MockSignupContexts session={sessionObj} />));
+  });
+
   it('renders', () => {
     const sessionObj = {
       login: vi.fn(),