Add first accessibility tests

test/__helpers__/accessibility.ts

@@ -0,0 +1,14 @@
+import { screen } from '@testing-library/react';
+import { run } from 'axe-core';
+
+type ContainerWrapper = { container: HTMLElement };
+
+type AccessibilityTestSubject = ContainerWrapper | Promise<ContainerWrapper>;
+
+export const checkAccessibility = async (subject: AccessibilityTestSubject) => {
+  const { container } = await subject;
+  screen.debug(container);
+  const { violations } = await run(container);
+
+  expect(violations).toStrictEqual([]);
+};

test/app/App.test.tsx

@@ -3,6 +3,7 @@ import { fromPartial } from '@total-typescript/shoehorn';
 import { createMemoryHistory } from 'history';
 import { Router } from 'react-router-dom';
 import { AppFactory } from '../../src/app/App';
+import { checkAccessibility } from '../__helpers__/accessibility';
 
 describe('<App />', () => {
   const App = AppFactory(
@@ -34,6 +35,8 @@ describe('<App />', () => {
     );
   };
 
+  it('passes a11y checks', () => checkAccessibility(setUp()));
+
   it('renders children components', () => {
     setUp();
 

test/common/AppUpdateBanner.test.tsx

@@ -1,5 +1,6 @@
 import { screen } from '@testing-library/react';
 import { AppUpdateBanner } from '../../src/common/AppUpdateBanner';
+import { checkAccessibility } from '../__helpers__/accessibility';
 import { renderWithEvents } from '../__helpers__/setUpTest';
 
 describe('<AppUpdateBanner />', () => {
@@ -7,6 +8,8 @@ describe('<AppUpdateBanner />', () => {
   const forceUpdate = vi.fn();
   const setUp = () => renderWithEvents(<AppUpdateBanner isOpen toggle={toggle} forceUpdate={forceUpdate} />);
 
+  it('passes a11y checks', () => checkAccessibility(setUp()));
+
   it('renders initial state', () => {
     setUp();
 

test/common/ErrorHandler.test.tsx

@@ -1,7 +1,8 @@
-import { render, screen } from '@testing-library/react';
+import { screen } from '@testing-library/react';
 import { fromPartial } from '@total-typescript/shoehorn';
-import type { PropsWithChildren } from 'react';
+import type { PropsWithChildren, ReactNode } from 'react';
 import { ErrorHandler as BaseErrorHandler } from '../../src/common/ErrorHandler';
+import { checkAccessibility } from '../__helpers__/accessibility';
 import { renderWithEvents } from '../__helpers__/setUpTest';
 
 const ComponentWithError = () => {
@@ -13,13 +14,16 @@ describe('<ErrorHandler />', () => {
   const location = fromPartial<Window['location']>({ reload });
   const cons = fromPartial<Console>({ error: vi.fn() });
   const ErrorHandler = (props: PropsWithChildren) => <BaseErrorHandler console={cons} location={location} {...props} />;
+  const setUp = (children: ReactNode = 'Error') => renderWithEvents(<ErrorHandler>{children}</ErrorHandler>);
 
   beforeEach(() => {
     vi.spyOn(console, 'error').mockImplementation(() => {}); // Silence react errors
   });
 
+  it('passes a11y checks', () => checkAccessibility(setUp()));
+
   it('renders children when no error has occurred', () => {
-    render(<ErrorHandler><span>Foo</span></ErrorHandler>);
+    setUp(<span>Foo</span>);
 
     expect(screen.getByText('Foo')).toBeInTheDocument();
     expect(screen.queryByText('Oops! This is awkward :S')).not.toBeInTheDocument();
@@ -27,14 +31,14 @@ describe('<ErrorHandler />', () => {
   });
 
   it('renders error page when error has occurred', () => {
-    render(<ErrorHandler><ComponentWithError /></ErrorHandler>);
+    setUp(<ComponentWithError />);
 
     expect(screen.getByText('Oops! This is awkward :S')).toBeInTheDocument();
     expect(screen.getByRole('button')).toBeInTheDocument();
   });
 
   it('reloads page on button click', async () => {
-    const { user } = renderWithEvents(<ErrorHandler><ComponentWithError /></ErrorHandler>);
+    const { user } = setUp(<ComponentWithError />);
 
     expect(reload).not.toHaveBeenCalled();
     await user.click(screen.getByRole('button'));

test/common/Home.test.tsx

@@ -3,6 +3,7 @@ import { fromPartial } from '@total-typescript/shoehorn';
 import { MemoryRouter } from 'react-router';
 import { Home } from '../../src/common/Home';
 import type { ServersMap, ServerWithId } from '../../src/servers/data';
+import { checkAccessibility } from '../__helpers__/accessibility';
 
 describe('<Home />', () => {
   const setUp = (servers: ServersMap = {}) => render(
@@ -11,6 +12,10 @@ describe('<Home />', () => {
     </MemoryRouter>,
   );
 
+  it('passes a11y checks', () => checkAccessibility(
+    setUp({ '1a': fromPartial<ServerWithId>({ name: 'foo', id: '1' }) }),
+  ));
+
   it('renders title', () => {
     setUp();
     expect(screen.getByRole('heading', { name: 'Welcome!' })).toBeInTheDocument();

test/common/MainHeader.test.tsx

@@ -3,11 +3,13 @@ import { fromPartial } from '@total-typescript/shoehorn';
 import { createMemoryHistory } from 'history';
 import { Router } from 'react-router-dom';
 import { MainHeaderFactory } from '../../src/common/MainHeader';
+import { checkAccessibility } from '../__helpers__/accessibility';
 import { renderWithEvents } from '../__helpers__/setUpTest';
 
 describe('<MainHeader />', () => {
   const MainHeader = MainHeaderFactory(fromPartial({
-    ServersDropdown: () => <>ServersDropdown</>,
+    // Fake this component as a li, as it gets rendered inside a ul
+    ServersDropdown: () => <li>ServersDropdown</li>,
   }));
   const setUp = (pathname = '') => {
     const history = createMemoryHistory();
@@ -20,6 +22,8 @@ describe('<MainHeader />', () => {
     );
   };
 
+  it('passes a11y checks', () => checkAccessibility(setUp()));
+
   it('renders ServersDropdown', () => {
     setUp();
     expect(screen.getByText('ServersDropdown')).toBeInTheDocument();

test/common/NotFound.test.tsx

@@ -1,10 +1,13 @@
 import { render, screen } from '@testing-library/react';
 import { MemoryRouter } from 'react-router';
 import { NotFound } from '../../src/common/NotFound';
+import { checkAccessibility } from '../__helpers__/accessibility';
 
 describe('<NotFound />', () => {
   const setUp = (props = {}) => render(<MemoryRouter><NotFound {...props} /></MemoryRouter>);
 
+  it('passes a11y checks', () => checkAccessibility(setUp()));
+
   it('shows expected error title', () => {
     setUp();
     expect(screen.getByText('Oops! We could not find requested route.')).toBeInTheDocument();

test/common/ScrollToTop.test.tsx

@@ -1,14 +1,19 @@
 import { render, screen } from '@testing-library/react';
 import { MemoryRouter } from 'react-router';
 import { ScrollToTop } from '../../src/common/ScrollToTop';
+import { checkAccessibility } from '../__helpers__/accessibility';
 
 describe('<ScrollToTop />', () => {
+  const setUp = (children = 'Foo') => render(<MemoryRouter><ScrollToTop>{children}</ScrollToTop></MemoryRouter>);
+
+  it('passes a11y checks', () => checkAccessibility(setUp()));
+
   it.each([
     ['Foobar'],
     ['Barfoo'],
     ['Something'],
   ])('just renders children', (children) => {
-    render(<MemoryRouter><ScrollToTop>{children}</ScrollToTop></MemoryRouter>);
+    setUp(children);
     expect(screen.getByText(children)).toBeInTheDocument();
   });
 });

test/common/ShlinkVersions.test.tsx

@@ -3,10 +3,15 @@ import { fromPartial } from '@total-typescript/shoehorn';
 import type { ShlinkVersionsProps } from '../../src/common/ShlinkVersions';
 import { ShlinkVersions } from '../../src/common/ShlinkVersions';
 import type { NonReachableServer, NotFoundServer, ReachableServer } from '../../src/servers/data';
+import { checkAccessibility } from '../__helpers__/accessibility';
 
 describe('<ShlinkVersions />', () => {
   const setUp = (props: ShlinkVersionsProps) => render(<ShlinkVersions {...props} />);
 
+  it('passes a11y checks', () => checkAccessibility(
+    setUp({ selectedServer: fromPartial({ version: '1.0.0', printableVersion: '1.0.0' }) }),
+  ));
+
   it.each([
     ['1.2.3', fromPartial<ReachableServer>({ version: '1.0.0', printableVersion: 'foo' }), 'v1.2.3', 'foo'],
     ['foo', fromPartial<ReachableServer>({ version: '1.0.0', printableVersion: '1.2.3' }), 'latest', '1.2.3'],

test/common/ShlinkVersionsContainer.test.tsx

@@ -3,9 +3,10 @@ import { fromPartial } from '@total-typescript/shoehorn';
 import { createMemoryHistory } from 'history';
 import { Router } from 'react-router-dom';
 import { ShlinkVersionsContainer } from '../../src/common/ShlinkVersionsContainer';
+import { checkAccessibility } from '../__helpers__/accessibility';
 
 describe('<ShlinkVersionsContainer />', () => {
-  const setUp = (activeRoute: string) => {
+  const setUp = (activeRoute: string = '') => {
     const history = createMemoryHistory();
     history.push(activeRoute);
 
@@ -16,6 +17,8 @@ describe('<ShlinkVersionsContainer />', () => {
     );
   };
 
+  it('passes a11y checks', () => checkAccessibility(setUp()));
+
   it.each([
     ['/something', 'text-center'],
     ['/server/foo/edit', 'text-center'],

test/common/ShlinkWebComponentContainer.test.tsx

@@ -3,6 +3,7 @@ import { fromPartial } from '@total-typescript/shoehorn';
 import { useParams } from 'react-router-dom';
 import { ShlinkWebComponentContainerFactory } from '../../src/common/ShlinkWebComponentContainer';
 import type { NonReachableServer, NotFoundServer, SelectedServer } from '../../src/servers/data';
+import { checkAccessibility } from '../__helpers__/accessibility';
 
 vi.mock('react-router-dom', async () => ({
   ...(await vi.importActual<any>('react-router-dom')),
@@ -24,6 +25,8 @@ describe('<ShlinkWebComponentContainer />', () => {
     (useParams as any).mockReturnValue({ serverId: 'abc123' });
   });
 
+  it('passes a11y checks', () => checkAccessibility(setUp(fromPartial({ version: '3.0.0' }))));
+
   it('shows loading indicator while loading server', () => {
     setUp(null);
 

test/common/img/ShlinkLogo.test.tsx

@@ -2,9 +2,12 @@ import { MAIN_COLOR } from '@shlinkio/shlink-frontend-kit';
 import { render } from '@testing-library/react';
 import type { ShlinkLogoProps } from '../../../src/common/img/ShlinkLogo';
 import { ShlinkLogo } from '../../../src/common/img/ShlinkLogo';
+import { checkAccessibility } from '../../__helpers__/accessibility';
 
 describe('<ShlinkLogo />', () => {
-  const setUp = (props: ShlinkLogoProps) => render(<ShlinkLogo {...props} />);
+  const setUp = (props: ShlinkLogoProps = {}) => render(<ShlinkLogo {...props} />);
+
+  it('passes a11y checks', () => checkAccessibility(setUp()));
 
   it.each([
     [undefined, MAIN_COLOR],