Form primitives, keyboard-operable comboboxes, dialog focus, route states
Accessibility work on the UI layer, all of it rooted in one structural gap: there were no form primitives, so every field was hand-assembled and every field got the same details wrong. Form primitives - components/ui/Field.tsx (Field/TextField/SelectField/TextareaField) and Button.tsx. Field generates the control id with useId and derives htmlFor from it, which is what makes the association impossible to omit rather than merely conventional. - 92 labels existed, 4 used htmlFor, and no input carried an id at all: a screen reader announced an unnamed edit box and clicking a label focused nothing. Now every label resolves to its control (0 unassociated), and the input class chain that appeared verbatim 85 times appears zero times. - Field also takes a render prop, so Lookup, CountryPicker and Picklist get the same wiring instead of a second, partial solution. - SearchInput replaces three hand-rolled copies of the icon-in-a-box search whose input had only a placeholder — not a label — and killed its own focus ring with outline-none and nothing in its place. - Toggle groups (workdays, reorg change type) became fieldsets with aria-pressed; colour alone was carrying the selected state. Comboboxes - Lookup and CountryPicker were text inputs with a div of clickable buttons underneath: typeable, but no keyboard path to a result and nothing telling a screen reader a list had appeared. Both now carry role=combobox, aria-expanded/controls/activedescendant and listbox semantics, with arrow keys, Enter and Escape. Escape stops propagation, or it would close the surrounding dialog along with the dropdown. Dialogs - useDialogFocus centralises what Modal and SlideOver each owed the keyboard and neither provided beyond Escape: focus into the dialog on open, Tab and Shift+Tab cycling within it, focus restored to the trigger on close. - SlideOver stays mounted for its transition, and aria-hidden does not remove anything from the tab order — so every closed panel was leaving invisible tab stops at the end of the page. `inert` fixes that. Route states - loading.tsx, error.tsx, not-found.tsx and global-error.tsx. Every page in the (app) group is server-rendered per request, so without loading.tsx a navigation showed nothing at all until the server answered, and a render error dropped the user on Next's own screen with no way back. Tests - 22 component tests (vitest jsdom project). Two of them found limits of the environment rather than of the code: jsdom implements neither `inert` nor scrollIntoView, so the inert test asserts the attribute and the missing scrollIntoView — which was taking the whole render down from inside an effect — is stubbed in the setup file.
This commit is contained in:
93
tests/components/Lookup.test.tsx
Normal file
93
tests/components/Lookup.test.tsx
Normal file
@@ -0,0 +1,93 @@
|
||||
import { render, screen } from "@testing-library/react";
|
||||
import userEvent from "@testing-library/user-event";
|
||||
import { describe, expect, it, vi } from "vitest";
|
||||
import { Lookup } from "@/components/ui/Lookup";
|
||||
|
||||
type Person = { id: string; name: string };
|
||||
|
||||
const PEOPLE: Person[] = [
|
||||
{ id: "1", name: "Katharina Aigner" },
|
||||
{ id: "2", name: "Kurt Aigner" },
|
||||
{ id: "3", name: "Simon Aigner" },
|
||||
];
|
||||
|
||||
function renderLookup(onSelect = vi.fn()) {
|
||||
const onSearch = vi.fn(async (q: string) => PEOPLE.filter((p) => p.name.toLowerCase().includes(q.toLowerCase())));
|
||||
render(<Lookup<Person> onSearch={onSearch} onSelect={onSelect} renderResult={(p) => <span>{p.name}</span>} placeholder="Suchen…" />);
|
||||
return { onSelect, input: screen.getByRole("combobox") };
|
||||
}
|
||||
|
||||
// The component was a text input with a div of clickable buttons under it:
|
||||
// typeable, but no keyboard path to a result and nothing announcing that a
|
||||
// list had appeared.
|
||||
describe("Lookup keyboard operation", () => {
|
||||
it("exposes combobox semantics", async () => {
|
||||
const { input } = renderLookup();
|
||||
expect(input).toHaveAttribute("aria-expanded", "false");
|
||||
await userEvent.type(input, "Aigner");
|
||||
expect(await screen.findByRole("listbox")).toBeInTheDocument();
|
||||
expect(input).toHaveAttribute("aria-expanded", "true");
|
||||
expect(await screen.findAllByRole("option")).toHaveLength(3);
|
||||
});
|
||||
|
||||
it("moves the selection with the arrow keys", async () => {
|
||||
const { input } = renderLookup();
|
||||
await userEvent.type(input, "Aigner");
|
||||
await screen.findByRole("listbox");
|
||||
|
||||
const options = screen.getAllByRole("option");
|
||||
expect(options[0]).toHaveAttribute("aria-selected", "true");
|
||||
|
||||
await userEvent.keyboard("{ArrowDown}");
|
||||
expect(screen.getAllByRole("option")[1]).toHaveAttribute("aria-selected", "true");
|
||||
// aria-activedescendant is what tells a screen reader which row is
|
||||
// current while focus stays in the input.
|
||||
expect(input).toHaveAttribute("aria-activedescendant", screen.getAllByRole("option")[1].id);
|
||||
});
|
||||
|
||||
it("wraps around at the ends", async () => {
|
||||
const { input } = renderLookup();
|
||||
await userEvent.type(input, "Aigner");
|
||||
await screen.findByRole("listbox");
|
||||
|
||||
await userEvent.keyboard("{ArrowUp}");
|
||||
expect(screen.getAllByRole("option")[2]).toHaveAttribute("aria-selected", "true");
|
||||
await userEvent.keyboard("{ArrowDown}");
|
||||
expect(screen.getAllByRole("option")[0]).toHaveAttribute("aria-selected", "true");
|
||||
});
|
||||
|
||||
it("selects the highlighted result with Enter", async () => {
|
||||
const { input, onSelect } = renderLookup();
|
||||
await userEvent.type(input, "Aigner");
|
||||
await screen.findByRole("listbox");
|
||||
|
||||
await userEvent.keyboard("{ArrowDown}{Enter}");
|
||||
expect(onSelect).toHaveBeenCalledWith(PEOPLE[1]);
|
||||
// Clears itself afterwards, ready for the next search.
|
||||
expect(input).toHaveValue("");
|
||||
});
|
||||
|
||||
it("closes on Escape without selecting", async () => {
|
||||
const { input, onSelect } = renderLookup();
|
||||
await userEvent.type(input, "Aigner");
|
||||
await screen.findByRole("listbox");
|
||||
|
||||
await userEvent.keyboard("{Escape}");
|
||||
expect(screen.queryByRole("listbox")).not.toBeInTheDocument();
|
||||
expect(onSelect).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it("does not open below the minimum query length", async () => {
|
||||
const { input } = renderLookup();
|
||||
await userEvent.type(input, "A");
|
||||
expect(screen.queryByRole("listbox")).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("still selects on click", async () => {
|
||||
const { input, onSelect } = renderLookup();
|
||||
await userEvent.type(input, "Kurt");
|
||||
await screen.findByRole("listbox");
|
||||
await userEvent.click(screen.getByRole("option", { name: "Kurt Aigner" }));
|
||||
expect(onSelect).toHaveBeenCalledWith(PEOPLE[1]);
|
||||
});
|
||||
});
|
||||
130
tests/components/dialog-a11y.test.tsx
Normal file
130
tests/components/dialog-a11y.test.tsx
Normal file
@@ -0,0 +1,130 @@
|
||||
import { render, screen } from "@testing-library/react";
|
||||
import userEvent from "@testing-library/user-event";
|
||||
import { useState } from "react";
|
||||
import { describe, expect, it, vi } from "vitest";
|
||||
import { Button } from "@/components/ui/Button";
|
||||
import { TextField } from "@/components/ui/Field";
|
||||
import { Modal } from "@/components/ui/Modal";
|
||||
import { SlideOver } from "@/components/ui/SlideOver";
|
||||
|
||||
function ModalHarness({ onClose = () => {} }: { onClose?: () => void }) {
|
||||
const [first, setFirst] = useState("");
|
||||
const [second, setSecond] = useState("");
|
||||
return (
|
||||
<Modal
|
||||
open
|
||||
onClose={onClose}
|
||||
title="Testdialog"
|
||||
footer={
|
||||
<Button onClick={() => {}}>Speichern</Button>
|
||||
}
|
||||
>
|
||||
<TextField label="Erstes Feld" value={first} onChange={setFirst} />
|
||||
<TextField label="Zweites Feld" value={second} onChange={setSecond} />
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
|
||||
describe("Modal focus management", () => {
|
||||
it("names the dialog from its visible heading", () => {
|
||||
render(<ModalHarness />);
|
||||
expect(screen.getByRole("dialog", { name: "Testdialog" })).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("moves focus into the dialog on open", () => {
|
||||
render(<ModalHarness />);
|
||||
// Not the page behind it: without this, the first Tab would start from
|
||||
// the top of the document.
|
||||
expect(document.body.contains(document.activeElement)).toBe(true);
|
||||
expect(screen.getByRole("dialog").contains(document.activeElement)).toBe(true);
|
||||
});
|
||||
|
||||
it("keeps Tab inside the dialog and wraps at the end", async () => {
|
||||
render(<ModalHarness />);
|
||||
const dialog = screen.getByRole("dialog");
|
||||
for (let i = 0; i < 8; i++) {
|
||||
await userEvent.tab();
|
||||
expect(dialog.contains(document.activeElement)).toBe(true);
|
||||
}
|
||||
});
|
||||
|
||||
it("wraps backwards on Shift+Tab", async () => {
|
||||
render(<ModalHarness />);
|
||||
const dialog = screen.getByRole("dialog");
|
||||
for (let i = 0; i < 8; i++) {
|
||||
await userEvent.tab({ shift: true });
|
||||
expect(dialog.contains(document.activeElement)).toBe(true);
|
||||
}
|
||||
});
|
||||
|
||||
it("closes on Escape", async () => {
|
||||
const onClose = vi.fn();
|
||||
render(<ModalHarness onClose={onClose} />);
|
||||
await userEvent.keyboard("{Escape}");
|
||||
expect(onClose).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it("returns focus to the element that opened it", async () => {
|
||||
function Toggle() {
|
||||
const [open, setOpen] = useState(false);
|
||||
return (
|
||||
<>
|
||||
<button onClick={() => setOpen(true)}>Öffnen</button>
|
||||
<Modal open={open} onClose={() => setOpen(false)} title="Testdialog">
|
||||
<p>Inhalt</p>
|
||||
</Modal>
|
||||
</>
|
||||
);
|
||||
}
|
||||
render(<Toggle />);
|
||||
const trigger = screen.getByRole("button", { name: "Öffnen" });
|
||||
await userEvent.click(trigger);
|
||||
expect(screen.getByRole("dialog")).toBeInTheDocument();
|
||||
await userEvent.keyboard("{Escape}");
|
||||
expect(trigger).toHaveFocus();
|
||||
});
|
||||
});
|
||||
|
||||
describe("SlideOver", () => {
|
||||
it("marks a closed panel inert", () => {
|
||||
// It stays mounted for the slide transition, so without `inert` its
|
||||
// fields stay in the tab order behind the page — aria-hidden does not
|
||||
// remove them.
|
||||
//
|
||||
// Asserted on the attribute rather than by tabbing: jsdom does not
|
||||
// implement inert at all ("inert" in HTMLElement.prototype === false),
|
||||
// so a focus-based assertion here would be testing jsdom, not this
|
||||
// component. Browsers enforce it.
|
||||
const { container } = render(
|
||||
<SlideOver open={false} onClose={() => {}} title="Geschlossen">
|
||||
<button>Im Panel</button>
|
||||
</SlideOver>
|
||||
);
|
||||
expect(container.firstElementChild).toHaveAttribute("inert");
|
||||
});
|
||||
|
||||
it("is not inert while open", () => {
|
||||
const { container } = render(
|
||||
<SlideOver open onClose={() => {}} title="Offen">
|
||||
<button>Im Panel</button>
|
||||
</SlideOver>
|
||||
);
|
||||
expect(container.firstElementChild).not.toHaveAttribute("inert");
|
||||
});
|
||||
|
||||
it("traps focus once open", async () => {
|
||||
render(
|
||||
<>
|
||||
<button>Dahinter</button>
|
||||
<SlideOver open onClose={() => {}} title="Offen" footer={<Button>Speichern</Button>}>
|
||||
<button>Im Panel</button>
|
||||
</SlideOver>
|
||||
</>
|
||||
);
|
||||
const dialog = screen.getByRole("dialog", { name: "Offen" });
|
||||
for (let i = 0; i < 6; i++) {
|
||||
await userEvent.tab();
|
||||
expect(dialog.contains(document.activeElement)).toBe(true);
|
||||
}
|
||||
});
|
||||
});
|
||||
@@ -33,6 +33,13 @@ if (!("DOMMatrixReadOnly" in globalThis)) {
|
||||
vi.stubGlobal("DOMMatrixReadOnly", DOMMatrixReadOnlyStub);
|
||||
}
|
||||
|
||||
// Not implemented by jsdom at all, and the comboboxes call it to keep the
|
||||
// highlighted row in view — an unstubbed call throws inside the effect and
|
||||
// takes the render down with it.
|
||||
if (!("scrollIntoView" in Element.prototype)) {
|
||||
Object.defineProperty(Element.prototype, "scrollIntoView", { configurable: true, value: () => {} });
|
||||
}
|
||||
|
||||
// jsdom reports 0 for every layout box; React Flow reads these to size nodes.
|
||||
Object.defineProperty(HTMLElement.prototype, "offsetWidth", { configurable: true, value: NODE_WIDTH });
|
||||
Object.defineProperty(HTMLElement.prototype, "offsetHeight", { configurable: true, value: NODE_HEIGHT });
|
||||
|
||||
Reference in New Issue
Block a user