Add first accessibility tests

config/test/setupTests.ts

@@ -1,7 +1,19 @@
+import 'vitest-canvas-mock';
 import '@testing-library/jest-dom/vitest';
 import { cleanup } from '@testing-library/react';
+import axe from 'axe-core';
 import { afterEach } from 'vitest';
 
+axe.configure({
+  checks: [
+    {
+      // Disable color contrast checking, as it doesn't work in jsdom
+      id: 'color-contrast',
+      enabled: false,
+    },
+  ],
+});
+
 // Clear all mocks and cleanup DOM after every test
 afterEach(() => {
   vi.clearAllMocks();

package-lock.json

@@ -53,6 +53,7 @@
         "@vitejs/plugin-react": "^4.0.4",
         "@vitest/coverage-v8": "^0.34.5",
         "adm-zip": "^0.5.10",
+        "axe-core": "^4.8.2",
         "chalk": "^5.3.0",
         "eslint": "^8.50.0",
         "history": "^5.3.0",
@@ -62,7 +63,8 @@
         "typescript": "^5.2.2",
         "vite": "^4.4.9",
         "vite-plugin-pwa": "^0.16.5",
-        "vitest": "^0.34.5"
+        "vitest": "^0.34.5",
+        "vitest-canvas-mock": "^0.3.3"
       }
     },
     "node_modules/@aashutoshrathi/word-wrap": {
@@ -4261,10 +4263,10 @@
       }
     },
     "node_modules/axe-core": {
-      "version": "4.4.1",
+      "version": "4.8.2",
+      "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.8.2.tgz",
+      "integrity": "sha512-/dlp0fxyM3R8YW7MFzaHWXrf4zzbr0vaYb23VBFCl83R7nWNPg/yaQw2Dc8jzCMmDVLhSdzH8MjrsuIUuvX+6g==",
       "dev": true,
-      "license": "MPL-2.0",
-      "peer": true,
       "engines": {
         "node": ">=4"
       }
@@ -4798,6 +4800,12 @@
         "node": ">=4"
       }
     },
+    "node_modules/cssfontparser": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/cssfontparser/-/cssfontparser-1.2.1.tgz",
+      "integrity": "sha512-6tun4LoZnj7VN6YeegOVb67KBX/7JJsqvj+pv3ZA7F878/eN33AbGa5b/S/wXxS/tcp8nc40xRUrsPlxIyNUPg==",
+      "dev": true
+    },
     "node_modules/cssstyle": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cssstyle/-/cssstyle-3.0.0.tgz",
@@ -6931,6 +6939,16 @@
         "node": ">=8"
       }
     },
+    "node_modules/jest-canvas-mock": {
+      "version": "2.5.2",
+      "resolved": "https://registry.npmjs.org/jest-canvas-mock/-/jest-canvas-mock-2.5.2.tgz",
+      "integrity": "sha512-vgnpPupjOL6+L5oJXzxTxFrlGEIbHdZqFU+LFNdtLxZ3lRDCl17FlTMM7IatoRQkrcyOTMlDinjUguqmQ6bR2A==",
+      "dev": true,
+      "dependencies": {
+        "cssfontparser": "^1.2.1",
+        "moo-color": "^1.0.2"
+      }
+    },
     "node_modules/jest-worker": {
       "version": "26.6.2",
       "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-26.6.2.tgz",
@@ -7517,6 +7535,15 @@
         "ufo": "^1.3.0"
       }
     },
+    "node_modules/moo-color": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/moo-color/-/moo-color-1.0.3.tgz",
+      "integrity": "sha512-i/+ZKXMDf6aqYtBhuOcej71YSlbjT3wCO/4H1j8rPvxDJEifdwgg5MaFyu6iYAT8GBZJg2z0dkgK4YMzvURALQ==",
+      "dev": true,
+      "dependencies": {
+        "color-name": "^1.1.4"
+      }
+    },
     "node_modules/ms": {
       "version": "2.0.0",
       "dev": true,
@@ -10001,6 +10028,18 @@
         }
       }
     },
+    "node_modules/vitest-canvas-mock": {
+      "version": "0.3.3",
+      "resolved": "https://registry.npmjs.org/vitest-canvas-mock/-/vitest-canvas-mock-0.3.3.tgz",
+      "integrity": "sha512-3P968tYBpqYyzzOaVtqnmYjqbe13576/fkjbDEJSfQAkHtC5/UjuRHOhFEN/ZV5HVZIkaROBUWgazDKJ+Ibw+Q==",
+      "dev": true,
+      "dependencies": {
+        "jest-canvas-mock": "~2.5.2"
+      },
+      "peerDependencies": {
+        "vitest": "*"
+      }
+    },
     "node_modules/vitest/node_modules/debug": {
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
@@ -13339,9 +13378,10 @@
       "dev": true
     },
     "axe-core": {
-      "version": "4.4.1",
+      "version": "4.8.2",
-      "dev": true,
+      "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.8.2.tgz",
-      "peer": true
+      "integrity": "sha512-/dlp0fxyM3R8YW7MFzaHWXrf4zzbr0vaYb23VBFCl83R7nWNPg/yaQw2Dc8jzCMmDVLhSdzH8MjrsuIUuvX+6g==",
+      "dev": true
     },
     "axobject-query": {
       "version": "2.2.0",
@@ -13689,6 +13729,12 @@
       "version": "3.0.0",
       "dev": true
     },
+    "cssfontparser": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/cssfontparser/-/cssfontparser-1.2.1.tgz",
+      "integrity": "sha512-6tun4LoZnj7VN6YeegOVb67KBX/7JJsqvj+pv3ZA7F878/eN33AbGa5b/S/wXxS/tcp8nc40xRUrsPlxIyNUPg==",
+      "dev": true
+    },
     "cssstyle": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cssstyle/-/cssstyle-3.0.0.tgz",
@@ -15114,6 +15160,16 @@
         }
       }
     },
+    "jest-canvas-mock": {
+      "version": "2.5.2",
+      "resolved": "https://registry.npmjs.org/jest-canvas-mock/-/jest-canvas-mock-2.5.2.tgz",
+      "integrity": "sha512-vgnpPupjOL6+L5oJXzxTxFrlGEIbHdZqFU+LFNdtLxZ3lRDCl17FlTMM7IatoRQkrcyOTMlDinjUguqmQ6bR2A==",
+      "dev": true,
+      "requires": {
+        "cssfontparser": "^1.2.1",
+        "moo-color": "^1.0.2"
+      }
+    },
     "jest-worker": {
       "version": "26.6.2",
       "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-26.6.2.tgz",
@@ -15539,6 +15595,15 @@
         "ufo": "^1.3.0"
       }
     },
+    "moo-color": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/moo-color/-/moo-color-1.0.3.tgz",
+      "integrity": "sha512-i/+ZKXMDf6aqYtBhuOcej71YSlbjT3wCO/4H1j8rPvxDJEifdwgg5MaFyu6iYAT8GBZJg2z0dkgK4YMzvURALQ==",
+      "dev": true,
+      "requires": {
+        "color-name": "^1.1.4"
+      }
+    },
     "ms": {
       "version": "2.0.0",
       "dev": true,
@@ -17165,6 +17230,15 @@
         }
       }
     },
+    "vitest-canvas-mock": {
+      "version": "0.3.3",
+      "resolved": "https://registry.npmjs.org/vitest-canvas-mock/-/vitest-canvas-mock-0.3.3.tgz",
+      "integrity": "sha512-3P968tYBpqYyzzOaVtqnmYjqbe13576/fkjbDEJSfQAkHtC5/UjuRHOhFEN/ZV5HVZIkaROBUWgazDKJ+Ibw+Q==",
+      "dev": true,
+      "requires": {
+        "jest-canvas-mock": "~2.5.2"
+      }
+    },
     "w3c-xmlserializer": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-4.0.0.tgz",

package.json

@@ -69,6 +69,7 @@
     "@vitejs/plugin-react": "^4.0.4",
     "@vitest/coverage-v8": "^0.34.5",
     "adm-zip": "^0.5.10",
+    "axe-core": "^4.8.2",
     "chalk": "^5.3.0",
     "eslint": "^8.50.0",
     "history": "^5.3.0",
@@ -78,7 +79,8 @@
     "typescript": "^5.2.2",
     "vite": "^4.4.9",
     "vite-plugin-pwa": "^0.16.5",
-    "vitest": "^0.34.5"
+    "vitest": "^0.34.5",
+    "vitest-canvas-mock": "^0.3.3"
   },
   "browserslist": [
     ">0.2%",

src/servers/ServersListGroup.tsx

@@ -21,9 +21,10 @@ const ServerListItem = ({ id, name }: { id: string; name: string }) => (
 
 export const ServersListGroup: FC<ServersListGroupProps> = ({ servers, children, embedded = false }) => (
   <>
-    {children && <h5 className="mb-md-3">{children}</h5>}
+    {children && <div className="mb-0 fs-5 fw-normal lh-sm">{children}</div>}
     {servers.length > 0 && (
       <ListGroup
+        tag="div"
         className={classNames('servers-list__list-group', { 'servers-list__list-group--embedded': embedded })}
       >
         {servers.map(({ id, name }) => <ServerListItem key={id} id={id} name={name} />)}

src/servers/helpers/ServerError.tsx

@@ -36,17 +36,19 @@ const ServerError: FCWithDeps<ServerErrorProps, ServerErrorDeps> = ({ servers, s
         </Message>
 
         <ServersListGroup servers={Object.values(servers)}>
+          <p className="mb-md-3">
             These are the Shlink servers currently configured. Choose one of
             them or <Link to="/server/create">add a new one</Link>.
+          </p>
         </ServersListGroup>
 
         {isServerWithId(selectedServer) && (
           <div className="container mt-3 mt-md-5">
-            <h5>
+            <p className="fs-5 fw-normal lh-sm">
               Alternatively, if you think you may have miss-configured this server, you
               can <DeleteServerButton server={selectedServer} className="server-error__delete-btn">remove it</DeleteServerButton> or&nbsp;
               <Link to={`/server/${selectedServer.id}/edit?reconnect=true`}>edit it</Link>.
-            </h5>
+            </p>
           </div>
         )}
       </div>

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],