Maximilian Stubhan
d9367a8ce4
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.
47 lines
1.9 KiB
TypeScript
47 lines
1.9 KiB
TypeScript
import "@testing-library/jest-dom/vitest";
|
|
import { cleanup } from "@testing-library/react";
|
|
import { afterEach, vi } from "vitest";
|
|
|
|
afterEach(cleanup);
|
|
|
|
// React Flow keeps a node at visibility:hidden until ResizeObserver has
|
|
// reported its size, and Testing Library excludes hidden elements from the
|
|
// accessibility tree — so an inert stub makes every node unqueryable by
|
|
// role. This one reports a size, which is what actually makes the nodes
|
|
// visible and the chart behave as it does in a browser.
|
|
const NODE_WIDTH = 268;
|
|
const NODE_HEIGHT = 80;
|
|
|
|
class ResizeObserverStub {
|
|
constructor(private readonly callback: ResizeObserverCallback) {}
|
|
observe(target: Element) {
|
|
const entry = {
|
|
target,
|
|
contentRect: { width: NODE_WIDTH, height: NODE_HEIGHT, top: 0, left: 0, bottom: NODE_HEIGHT, right: NODE_WIDTH, x: 0, y: 0 },
|
|
} as unknown as ResizeObserverEntry;
|
|
queueMicrotask(() => this.callback([entry], this as unknown as ResizeObserver));
|
|
}
|
|
unobserve() {}
|
|
disconnect() {}
|
|
}
|
|
vi.stubGlobal("ResizeObserver", ResizeObserverStub);
|
|
|
|
if (!("DOMMatrixReadOnly" in globalThis)) {
|
|
class DOMMatrixReadOnlyStub {
|
|
m22 = 1;
|
|
}
|
|
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 });
|
|
Object.defineProperty(SVGElement.prototype, "getBBox", { configurable: true, value: () => ({ x: 0, y: 0, width: 0, height: 0 }) });
|