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.

tests/components/Lookup.test.tsx

@@ -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]);
+  });
+});