Add more accessibility tests

package-lock.json

@@ -15,7 +15,7 @@
         "@fortawesome/react-fontawesome": "^0.2.0",
         "@json2csv/plainjs": "^7.0.3",
         "@reduxjs/toolkit": "^1.9.5",
-        "@shlinkio/shlink-frontend-kit": "^0.3.0",
+        "@shlinkio/shlink-frontend-kit": "^0.4.0",
         "@shlinkio/shlink-js-sdk": "^0.1.0",
         "@shlinkio/shlink-web-component": "^0.3.4",
         "bootstrap": "5.2.3",
@@ -2802,13 +2802,13 @@
       }
     },
     "node_modules/@shlinkio/shlink-frontend-kit": {
-      "version": "0.3.0",
+      "version": "0.4.0",
-      "resolved": "https://registry.npmjs.org/@shlinkio/shlink-frontend-kit/-/shlink-frontend-kit-0.3.0.tgz",
+      "resolved": "https://registry.npmjs.org/@shlinkio/shlink-frontend-kit/-/shlink-frontend-kit-0.4.0.tgz",
-      "integrity": "sha512-MjftbQKc+Vq2rGsjsTQHcnq4IFSjaazBZ82T/TSEz9wza/y/Siy7bBQlTdALyaHW+FT0Lv5nOf/V5RH+iotsCA==",
+      "integrity": "sha512-Z9GqIqc6iHGMs9GHEQ+ERv5NfdvnoReHJbz5WPgXMlVT0s5ooL7s0hdsR/zgppLVF0r8HsKLXKlKR8bMY8B22g==",
       "dependencies": {
         "classnames": "^2.3.2",
         "qs": "^6.11.2",
-        "uuid": "^9.0.0"
+        "uuid": "^9.0.1"
       },
       "peerDependencies": {
         "@fortawesome/fontawesome-free": "^6.4.2",
@@ -12420,13 +12420,13 @@
       }
     },
     "@shlinkio/shlink-frontend-kit": {
-      "version": "0.3.0",
+      "version": "0.4.0",
-      "resolved": "https://registry.npmjs.org/@shlinkio/shlink-frontend-kit/-/shlink-frontend-kit-0.3.0.tgz",
+      "resolved": "https://registry.npmjs.org/@shlinkio/shlink-frontend-kit/-/shlink-frontend-kit-0.4.0.tgz",
-      "integrity": "sha512-MjftbQKc+Vq2rGsjsTQHcnq4IFSjaazBZ82T/TSEz9wza/y/Siy7bBQlTdALyaHW+FT0Lv5nOf/V5RH+iotsCA==",
+      "integrity": "sha512-Z9GqIqc6iHGMs9GHEQ+ERv5NfdvnoReHJbz5WPgXMlVT0s5ooL7s0hdsR/zgppLVF0r8HsKLXKlKR8bMY8B22g==",
       "requires": {
         "classnames": "^2.3.2",
         "qs": "^6.11.2",
-        "uuid": "^9.0.0"
+        "uuid": "^9.0.1"
       }
     },
     "@shlinkio/shlink-js-sdk": {

package.json

@@ -31,7 +31,7 @@
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@json2csv/plainjs": "^7.0.3",
     "@reduxjs/toolkit": "^1.9.5",
-    "@shlinkio/shlink-frontend-kit": "^0.3.0",
+    "@shlinkio/shlink-frontend-kit": "^0.4.0",
     "@shlinkio/shlink-js-sdk": "^0.1.0",
     "@shlinkio/shlink-web-component": "^0.3.4",
     "bootstrap": "5.2.3",

src/servers/ManageServers.tsx

@@ -70,10 +70,10 @@ const ManageServers: FCWithDeps<ManageServersProps, ManageServersDeps> = ({ serv
         <table className="table table-hover responsive-table mb-0">
           <thead className="responsive-table__header">
             <tr>
-              {hasAutoConnect && <th aria-label="Auto-connect" style={{ width: '50px' }} />}
+              {hasAutoConnect && <th style={{ width: '50px' }}><span className="sr-only">Auto-connect</span></th>}
               <th>Name</th>
               <th>Base URL</th>
-              <th aria-label="Options" />
+              <th><span className="sr-only">Options</span></th>
             </tr>
           </thead>
           <tbody>

src/servers/ManageServersRowDropdown.tsx

@@ -47,7 +47,7 @@ const ManageServersRowDropdown: FCWithDeps<ManageServersRowDropdownConnectProps,
       <DropdownItem onClick={() => setAutoConnect(server, !isAutoConnect)}>
         <FontAwesomeIcon icon={autoConnectIcon} fixedWidth /> {isAutoConnect ? 'Do not a' : 'A'}uto-connect
       </DropdownItem>
-      <DropdownItem divider />
+      <DropdownItem divider tag="hr" />
       <DropdownItem className="dropdown-item--danger" onClick={showModal}>
         <FontAwesomeIcon icon={deleteIcon} fixedWidth /> Remove server
       </DropdownItem>

src/servers/ServersDropdown.tsx

@@ -30,7 +30,7 @@ export const ServersDropdown = ({ servers, selectedServer }: ServersDropdownProp
             {name}
           </DropdownItem>
         ))}
-        <DropdownItem divider />
+        <DropdownItem divider tag="hr" />
         <DropdownItem tag={Link} to="/manage-servers">
           <FontAwesomeIcon icon={serverIcon} /> <span className="ms-1">Manage servers</span>
         </DropdownItem>

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 && <div className="mb-0 fs-5 fw-normal lh-sm">{children}</div>}
+    {children && <div data-testid="title" className="mb-0 fs-5 fw-normal lh-sm">{children}</div>}
     {servers.length > 0 && (
       <ListGroup
+        data-testid="list"
         tag="div"
         className={classNames('servers-list__list-group', { 'servers-list__list-group--embedded': embedded })}
       >

src/servers/helpers/ImportServersBtn.tsx

@@ -88,7 +88,7 @@ const ImportServersBtn: FCWithDeps<ImportServersBtnConnectProps, ImportServersBt
         You can create servers by importing a CSV file with <b>name</b>, <b>apiKey</b> and <b>url</b> columns.
       </UncontrolledTooltip>
 
-      <input type="file" accept="text/csv" className="d-none" ref={ref} onChange={onFile} />
+      <input type="file" accept="text/csv" className="d-none" ref={ref} onChange={onFile} aria-hidden />
 
       <DuplicatedServersModal
         isOpen={isModalOpen}

test/__helpers__/accessibility.ts

@@ -1,4 +1,3 @@
-import { screen } from '@testing-library/react';
 import { run } from 'axe-core';
 
 type ContainerWrapper = { container: HTMLElement };
@@ -7,7 +6,6 @@ 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/servers/CreateServer.test.tsx

@@ -3,6 +3,7 @@ import { fromPartial } from '@total-typescript/shoehorn';
 import { useNavigate } from 'react-router-dom';
 import { CreateServerFactory } from '../../src/servers/CreateServer';
 import type { ServersMap } from '../../src/servers/data';
+import { checkAccessibility } from '../__helpers__/accessibility';
 import { renderWithEvents } from '../__helpers__/setUpTest';
 
 vi.mock('react-router-dom', async () => ({
@@ -39,6 +40,8 @@ describe('<CreateServer />', () => {
     return renderWithEvents(<CreateServer createServers={createServersMock} servers={servers} />);
   };
 
+  it('passes a11y checks', () => checkAccessibility(setUp()));
+
   it('shows success message when imported is true', () => {
     setUp({ serversImported: true });
 

test/servers/DeleteServerButton.test.tsx

@@ -3,6 +3,7 @@ import { fromPartial } from '@total-typescript/shoehorn';
 import type { ReactNode } from 'react';
 import { DeleteServerButtonFactory } from '../../src/servers/DeleteServerButton';
 import type { DeleteServerModalProps } from '../../src/servers/DeleteServerModal';
+import { checkAccessibility } from '../__helpers__/accessibility';
 import { renderWithEvents } from '../__helpers__/setUpTest';
 
 describe('<DeleteServerButton />', () => {
@@ -13,6 +14,8 @@ describe('<DeleteServerButton />', () => {
     <DeleteServerButton server={fromPartial({})} textClassName="button">{children}</DeleteServerButton>,
   );
 
+  it('passes a11y checks', () => checkAccessibility(setUp('Delete me')));
+
   it.each([
     ['Foo bar'],
     ['baz'],

test/servers/DeleteServerModal.test.tsx

@@ -2,6 +2,7 @@ import { screen, waitFor } from '@testing-library/react';
 import { fromPartial } from '@total-typescript/shoehorn';
 import { useNavigate } from 'react-router-dom';
 import { DeleteServerModal } from '../../src/servers/DeleteServerModal';
+import { checkAccessibility } from '../__helpers__/accessibility';
 import { renderWithEvents } from '../__helpers__/setUpTest';
 import { TestModalWrapper } from '../__helpers__/TestModalWrapper';
 
@@ -30,6 +31,8 @@ describe('<DeleteServerModal />', () => {
     );
   };
 
+  it('passes a11y checks', () => checkAccessibility(setUp()));
+
   it('renders a modal window', () => {
     setUp();
 

test/servers/EditServer.test.tsx

@@ -3,6 +3,7 @@ import { fromPartial } from '@total-typescript/shoehorn';
 import { MemoryRouter, useNavigate } from 'react-router-dom';
 import type { ReachableServer, SelectedServer } from '../../src/servers/data';
 import { EditServerFactory } from '../../src/servers/EditServer';
+import { checkAccessibility } from '../__helpers__/accessibility';
 import { renderWithEvents } from '../__helpers__/setUpTest';
 
 vi.mock('react-router-dom', async () => ({
@@ -31,6 +32,8 @@ describe('<EditServer />', () => {
     (useNavigate as any).mockReturnValue(navigate);
   });
 
+  it('passes a11y checks', () => checkAccessibility(setUp()));
+
   it('renders nothing if selected server is not reachable', () => {
     setUp(fromPartial<SelectedServer>({}));
 

test/servers/ManageServers.test.tsx

@@ -4,6 +4,7 @@ import { MemoryRouter } from 'react-router-dom';
 import type { ServersMap, ServerWithId } from '../../src/servers/data';
 import { ManageServersFactory } from '../../src/servers/ManageServers';
 import type { ServersExporter } from '../../src/servers/services/ServersExporter';
+import { checkAccessibility } from '../__helpers__/accessibility';
 import { renderWithEvents } from '../__helpers__/setUpTest';
 
 describe('<ManageServers />', () => {
@@ -25,6 +26,12 @@ describe('<ManageServers />', () => {
     <MemoryRouter><ManageServers servers={servers} /></MemoryRouter>,
   );
 
+  it('passes a11y checks', () => checkAccessibility(setUp({
+    foo: createServerMock('foo'),
+    bar: createServerMock('bar'),
+    baz: createServerMock('baz'),
+  })));
+
   it('shows search field which allows searching servers, affecting te amount of rendered rows', async () => {
     const { user } = setUp({
       foo: createServerMock('foo'),

test/servers/ManageServersRow.test.tsx

@@ -3,6 +3,7 @@ import { fromPartial } from '@total-typescript/shoehorn';
 import { MemoryRouter } from 'react-router-dom';
 import type { ServerWithId } from '../../src/servers/data';
 import { ManageServersRowFactory } from '../../src/servers/ManageServersRow';
+import { checkAccessibility } from '../__helpers__/accessibility';
 
 describe('<ManageServersRow />', () => {
   const ManageServersRow = ManageServersRowFactory(fromPartial({
@@ -24,6 +25,8 @@ describe('<ManageServersRow />', () => {
     </MemoryRouter>,
   );
 
+  it('passes a11y checks', () => checkAccessibility(setUp()));
+
   it.each([
     [true, 4],
     [false, 3],

test/servers/ManageServersRowDropdown.test.tsx

@@ -1,8 +1,10 @@
 import { screen } from '@testing-library/react';
+import type { UserEvent } from '@testing-library/user-event';
 import { fromPartial } from '@total-typescript/shoehorn';
 import { MemoryRouter } from 'react-router-dom';
 import type { ServerWithId } from '../../src/servers/data';
 import { ManageServersRowDropdownFactory } from '../../src/servers/ManageServersRowDropdown';
+import { checkAccessibility } from '../__helpers__/accessibility';
 import { renderWithEvents } from '../__helpers__/setUpTest';
 
 describe('<ManageServersRowDropdown />', () => {
@@ -20,12 +22,23 @@ describe('<ManageServersRowDropdown />', () => {
       </MemoryRouter>,
     );
   };
+  const toggleDropdown = (user: UserEvent) => user.click(screen.getByRole('button'));
+
+  it.each([
+    [setUp],
+    [async () => {
+      const { user, container } = setUp();
+      await toggleDropdown(user);
+
+      return { container };
+    }],
+  ])('passes a11y checks', (setUp) => checkAccessibility(setUp()));
 
   it('renders expected amount of dropdown items', async () => {
     const { user } = setUp();
 
     expect(screen.queryByRole('menu')).not.toBeInTheDocument();
-    await user.click(screen.getByRole('button'));
+    await toggleDropdown(user);
     expect(screen.getByRole('menu')).toBeInTheDocument();
 
     expect(screen.getAllByRole('menuitem')).toHaveLength(4);
@@ -37,7 +50,7 @@ describe('<ManageServersRowDropdown />', () => {
     const { user } = setUp();
 
     expect(setAutoConnect).not.toHaveBeenCalled();
-    await user.click(screen.getByRole('button'));
+    await toggleDropdown(user);
     await user.click(screen.getByRole('menuitem', { name: 'Auto-connect' }));
     expect(setAutoConnect).toHaveBeenCalledWith(expect.objectContaining({ id: 'abc123' }), true);
   });
@@ -48,7 +61,7 @@ describe('<ManageServersRowDropdown />', () => {
     expect(screen.queryByText('DeleteServerModal [OPEN]')).not.toBeInTheDocument();
     expect(screen.getByText('DeleteServerModal [CLOSED]')).toBeInTheDocument();
 
-    await user.click(screen.getByRole('button'));
+    await toggleDropdown(user);
     await user.click(screen.getByRole('menuitem', { name: 'Remove server' }));
 
     expect(screen.getByText('DeleteServerModal [OPEN]')).toBeInTheDocument();

test/servers/ServersDropdown.test.tsx

@@ -4,6 +4,7 @@ import { values } from 'ramda';
 import { MemoryRouter } from 'react-router-dom';
 import type { ServersMap } from '../../src/servers/data';
 import { ServersDropdown } from '../../src/servers/ServersDropdown';
+import { checkAccessibility } from '../__helpers__/accessibility';
 import { renderWithEvents } from '../__helpers__/setUpTest';
 
 describe('<ServersDropdown />', () => {
@@ -13,9 +14,15 @@ describe('<ServersDropdown />', () => {
     '3c': fromPartial({ name: 'baz', id: '3c' }),
   };
   const setUp = (servers: ServersMap = fallbackServers) => renderWithEvents(
-    <MemoryRouter><ServersDropdown servers={servers} selectedServer={null} /></MemoryRouter>,
+    <MemoryRouter>
+      <ul>
+        <ServersDropdown servers={servers} selectedServer={null} />
+      </ul>
+    </MemoryRouter>,
   );
 
+  it('passes a11y checks', () => checkAccessibility(setUp()));
+
   it('contains the list of servers and the "mange servers" button', async () => {
     const { user } = setUp();
 

test/servers/ServersListGroup.test.tsx

@@ -3,13 +3,14 @@ import { fromPartial } from '@total-typescript/shoehorn';
 import { MemoryRouter } from 'react-router-dom';
 import type { ServerWithId } from '../../src/servers/data';
 import { ServersListGroup } from '../../src/servers/ServersListGroup';
+import { checkAccessibility } from '../__helpers__/accessibility';
 
 describe('<ServersListGroup />', () => {
   const servers: ServerWithId[] = [
     fromPartial({ name: 'foo', id: '123' }),
     fromPartial({ name: 'bar', id: '456' }),
   ];
-  const setUp = (params: { servers?: ServerWithId[]; withChildren?: boolean; embedded?: boolean }) => {
+  const setUp = (params: { servers?: ServerWithId[]; withChildren?: boolean; embedded?: boolean } = {}) => {
     const { servers = [], withChildren = true, embedded } = params;
 
     return render(
@@ -21,14 +22,16 @@ describe('<ServersListGroup />', () => {
     );
   };
 
+  it('passes a11y checks', () => checkAccessibility(setUp()));
+
   it('renders title', () => {
     setUp({});
-    expect(screen.getByRole('heading')).toHaveTextContent('The list of servers');
+    expect(screen.getByTestId('title')).toHaveTextContent('The list of servers');
   });
 
   it('does not render title when children is not provided', () => {
     setUp({ withChildren: false });
-    expect(screen.queryByRole('heading')).not.toBeInTheDocument();
+    expect(screen.queryByTestId('title')).not.toBeInTheDocument();
   });
 
   it.each([
@@ -37,7 +40,7 @@ describe('<ServersListGroup />', () => {
   ])('shows servers list', (servers) => {
     setUp({ servers });
 
-    expect(screen.queryAllByRole('list')).toHaveLength(servers.length ? 1 : 0);
+    expect(screen.queryAllByTestId('list')).toHaveLength(servers.length ? 1 : 0);
     expect(screen.queryAllByRole('link')).toHaveLength(servers.length);
   });
 
@@ -47,6 +50,6 @@ describe('<ServersListGroup />', () => {
     [undefined, 'servers-list__list-group'],
   ])('renders proper classes for embedded', (embedded, expectedClasses) => {
     setUp({ servers, embedded });
-    expect(screen.getByRole('list')).toHaveAttribute('class', `${expectedClasses} list-group`);
+    expect(screen.getByTestId('list')).toHaveAttribute('class', `${expectedClasses} list-group`);
   });
 });

test/servers/helpers/DuplicatedServersModal.test.tsx

@@ -2,6 +2,7 @@ import { screen } from '@testing-library/react';
 import { fromPartial } from '@total-typescript/shoehorn';
 import type { ServerData } from '../../../src/servers/data';
 import { DuplicatedServersModal } from '../../../src/servers/helpers/DuplicatedServersModal';
+import { checkAccessibility } from '../../__helpers__/accessibility';
 import { renderWithEvents } from '../../__helpers__/setUpTest';
 
 describe('<DuplicatedServersModal />', () => {
@@ -12,6 +13,8 @@ describe('<DuplicatedServersModal />', () => {
   );
   const mockServer = (data: Partial<ServerData> = {}) => fromPartial<ServerData>(data);
 
+  it('passes a11y checks', () => checkAccessibility(setUp()));
+
   it.each([
     [[], 0],
     [[mockServer()], 2],

test/servers/helpers/ImportServersBtn.test.tsx

@@ -5,6 +5,7 @@ import type {
   ImportServersBtnProps } from '../../../src/servers/helpers/ImportServersBtn';
 import { ImportServersBtnFactory } from '../../../src/servers/helpers/ImportServersBtn';
 import type { ServersImporter } from '../../../src/servers/services/ServersImporter';
+import { checkAccessibility } from '../../__helpers__/accessibility';
 import { renderWithEvents } from '../../__helpers__/setUpTest';
 
 describe('<ImportServersBtn />', () => {
@@ -22,6 +23,8 @@ describe('<ImportServersBtn />', () => {
     />,
   );
 
+  it('passes a11y checks', () => checkAccessibility(setUp()));
+
   it('shows tooltip on button hover', async () => {
     const { user } = setUp();
 

test/servers/helpers/ServerError.test.tsx

@@ -1,11 +1,22 @@
 import { render, screen } from '@testing-library/react';
 import { fromPartial } from '@total-typescript/shoehorn';
 import { MemoryRouter } from 'react-router-dom';
-import type { NonReachableServer, NotFoundServer } from '../../../src/servers/data';
+import type { NonReachableServer, NotFoundServer, SelectedServer } from '../../../src/servers/data';
 import { ServerErrorFactory } from '../../../src/servers/helpers/ServerError';
+import { checkAccessibility } from '../../__helpers__/accessibility';
 
 describe('<ServerError />', () => {
   const ServerError = ServerErrorFactory(fromPartial({ DeleteServerButton: () => null }));
+  const setUp = (selectedServer: SelectedServer) => render(
+    <MemoryRouter>
+      <ServerError servers={{}} selectedServer={selectedServer} />
+    </MemoryRouter>,
+  );
+
+  it.each([
+    [fromPartial<NotFoundServer>({})],
+    [fromPartial<NonReachableServer>({ id: 'abc123' })],
+  ])('passes a11y checks', (selectedServer) => checkAccessibility(setUp(selectedServer)));
 
   it.each([
     [
@@ -31,11 +42,7 @@ describe('<ServerError />', () => {
       },
     ],
   ])('renders expected information based on provided server type', (selectedServer, { found, notFound }) => {
-    render(
+    setUp(selectedServer);
-      <MemoryRouter>
-        <ServerError servers={{}} selectedServer={selectedServer} />
-      </MemoryRouter>,
-    );
 
     found.forEach((text) => expect(screen.getByText(text)).toBeInTheDocument());
     notFound.forEach((text) => expect(screen.queryByText(text)).not.toBeInTheDocument());

test/servers/helpers/ServerForm.test.tsx

@@ -1,10 +1,13 @@
 import { fireEvent, render, screen } from '@testing-library/react';
 import { ServerForm } from '../../../src/servers/helpers/ServerForm';
+import { checkAccessibility } from '../../__helpers__/accessibility';
 
 describe('<ServerForm />', () => {
   const onSubmit = vi.fn();
   const setUp = () => render(<ServerForm onSubmit={onSubmit}>Something</ServerForm>);
 
+  it('passes a11y checks', () => checkAccessibility(setUp()));
+
   it('renders components', () => {
     setUp();
 

test/settings/RealTimeUpdatesSettings.test.tsx

@@ -2,6 +2,7 @@ import type { RealTimeUpdatesSettings as RealTimeUpdatesSettingsOptions } from '
 import { screen } from '@testing-library/react';
 import { fromPartial } from '@total-typescript/shoehorn';
 import { RealTimeUpdatesSettings } from '../../src/settings/RealTimeUpdatesSettings';
+import { checkAccessibility } from '../__helpers__/accessibility';
 import { renderWithEvents } from '../__helpers__/setUpTest';
 
 describe('<RealTimeUpdatesSettings />', () => {
@@ -15,6 +16,8 @@ describe('<RealTimeUpdatesSettings />', () => {
     />,
   );
 
+  it('passes a11y checks', () => checkAccessibility(setUp()));
+
   it('renders enabled real time updates as expected', () => {
     setUp({ enabled: true });
 

test/settings/Settings.test.tsx

@@ -3,6 +3,7 @@ import { fromPartial } from '@total-typescript/shoehorn';
 import { createMemoryHistory } from 'history';
 import { Router } from 'react-router-dom';
 import { SettingsFactory } from '../../src/settings/Settings';
+import { checkAccessibility } from '../__helpers__/accessibility';
 
 describe('<Settings />', () => {
   const Settings = SettingsFactory(fromPartial({
@@ -19,6 +20,8 @@ describe('<Settings />', () => {
     return render(<Router location={history.location} navigator={history}><Settings /></Router>);
   };
 
+  it('passes a11y checks', () => checkAccessibility(setUp()));
+
   it.each([
     ['/general', {
       visibleComps: ['UserInterface', 'RealTimeUpdates'],

test/settings/ShortUrlCreationSettings.test.tsx

@@ -2,6 +2,7 @@ import type { ShortUrlCreationSettings as ShortUrlsSettings } from '@shlinkio/sh
 import { screen } from '@testing-library/react';
 import { fromPartial } from '@total-typescript/shoehorn';
 import { ShortUrlCreationSettings } from '../../src/settings/ShortUrlCreationSettings';
+import { checkAccessibility } from '../__helpers__/accessibility';
 import { renderWithEvents } from '../__helpers__/setUpTest';
 
 describe('<ShortUrlCreationSettings />', () => {
@@ -13,6 +14,8 @@ describe('<ShortUrlCreationSettings />', () => {
     />,
   );
 
+  it('passes a11y checks', () => checkAccessibility(setUp()));
+
   it.each([
     [{ validateUrls: true }, true],
     [{ validateUrls: false }, false],

test/settings/ShortUrlsListSettings.test.tsx

@@ -2,6 +2,7 @@ import type { ShortUrlsListSettings as ShortUrlsSettings } from '@shlinkio/shlin
 import { screen } from '@testing-library/react';
 import { fromPartial } from '@total-typescript/shoehorn';
 import { ShortUrlsListSettings } from '../../src/settings/ShortUrlsListSettings';
+import { checkAccessibility } from '../__helpers__/accessibility';
 import { renderWithEvents } from '../__helpers__/setUpTest';
 
 describe('<ShortUrlsListSettings />', () => {
@@ -10,6 +11,8 @@ describe('<ShortUrlsListSettings />', () => {
     <ShortUrlsListSettings settings={fromPartial({ shortUrlsList })} setShortUrlsListSettings={setSettings} />,
   );
 
+  it('passes a11y checks', () => checkAccessibility(setUp()));
+
   it.each([
     [undefined, 'Order by: Created at - DESC'],
     [fromPartial<ShortUrlsSettings>({}), 'Order by: Created at - DESC'],

test/settings/TagsSettings.test.tsx

@@ -3,6 +3,7 @@ import { screen } from '@testing-library/react';
 import { fromPartial } from '@total-typescript/shoehorn';
 import type { TagsOrder } from '../../src/settings/TagsSettings';
 import { TagsSettings } from '../../src/settings/TagsSettings';
+import { checkAccessibility } from '../__helpers__/accessibility';
 import { renderWithEvents } from '../__helpers__/setUpTest';
 
 describe('<TagsSettings />', () => {
@@ -11,6 +12,8 @@ describe('<TagsSettings />', () => {
     <TagsSettings settings={fromPartial({ tags })} setTagsSettings={setTagsSettings} />,
   );
 
+  it('passes a11y checks', () => checkAccessibility(setUp()));
+
   it('renders expected amount of groups', () => {
     setUp();
 

test/settings/UserInterfaceSettings.test.tsx

@@ -3,6 +3,7 @@ import { screen } from '@testing-library/react';
 import { fromPartial } from '@total-typescript/shoehorn';
 import type { UiSettings } from '../../src/settings/reducers/settings';
 import { UserInterfaceSettings } from '../../src/settings/UserInterfaceSettings';
+import { checkAccessibility } from '../__helpers__/accessibility';
 import { renderWithEvents } from '../__helpers__/setUpTest';
 
 describe('<UserInterfaceSettings />', () => {
@@ -11,6 +12,8 @@ describe('<UserInterfaceSettings />', () => {
     <UserInterfaceSettings settings={fromPartial({ ui })} setUiSettings={setUiSettings} />,
   );
 
+  it('passes a11y checks', () => checkAccessibility(setUp()));
+
   it.each([
     [{ theme: 'dark' as Theme }, true],
     [{ theme: 'light' as Theme }, false],

test/settings/VisitsSettings.test.tsx

@@ -2,6 +2,7 @@ import type { Settings } from '@shlinkio/shlink-web-component';
 import { screen } from '@testing-library/react';
 import { fromPartial } from '@total-typescript/shoehorn';
 import { VisitsSettings } from '../../src/settings/VisitsSettings';
+import { checkAccessibility } from '../__helpers__/accessibility';
 import { renderWithEvents } from '../__helpers__/setUpTest';
 
 describe('<VisitsSettings />', () => {
@@ -10,6 +11,8 @@ describe('<VisitsSettings />', () => {
     <VisitsSettings settings={fromPartial(settings)} setVisitsSettings={setVisitsSettings} />,
   );
 
+  it('passes a11y checks', () => checkAccessibility(setUp()));
+
   it('renders expected components', () => {
     setUp();
 

test/utils/dates/DateIntervalSelector.test.tsx

@@ -1,6 +1,7 @@
 import { screen, waitFor } from '@testing-library/react';
 import type { DateInterval } from '../../../src/utils/dates/DateIntervalSelector';
 import { DateIntervalSelector, INTERVAL_TO_STRING_MAP } from '../../../src/utils/dates/DateIntervalSelector';
+import { checkAccessibility } from '../../__helpers__/accessibility';
 import { renderWithEvents } from '../../__helpers__/setUpTest';
 
 describe('<DateIntervalSelector />', () => {
@@ -10,6 +11,8 @@ describe('<DateIntervalSelector />', () => {
     <DateIntervalSelector allText="All text" active={activeInterval} onChange={onChange} />,
   );
 
+  it('passes a11y checks', () => checkAccessibility(setUp()));
+
   it('passes props down to nested DateIntervalDropdownItems', async () => {
     const { user } = setUp();
     const btn = screen.getByRole('button');