# Accessibility Defect Bundle — Design **Date:** 2026-06-08 **Status:** Approved (brainstorming) — ready for implementation planning. **Issue:** #62 (label-id collision, invalid table row semantics, unnamed drawer, unannounced table states, last untranslated strings). ## Context A frontend deep audit (post the #52 a11y pass, which is verified correct) found five remaining accessibility gaps. They are independent, low-risk fixes; no new dependency. The #52 work (focus ring, skip link, route focus, authority nav links, lang group, `` sync) stays untouched. ## Components ### 1. `components/label-editor.tsx` — id collision → `useId()` `LabelEditor` hardcodes `` + `` (`:35-36`). It renders simultaneously in the create form **and** any inline-edit row (authorities + vocab), so two `id="label"` inputs coexist and every `` resolves to the first — the second editor's label points at the wrong field (WCAG 1.3.1 / 4.1.1 / 4.1.2). Fix with React's `useId()` (zero call-site changes): ```tsx import { useId } from "react"; // … const inputId = useId(); {t("labels.label")} set(e.target.value)} /> ``` ### 2. `objects/objects-table.tsx` — rows: real link + `aria-current` The data rows are `` (`:247-259`). `aria-selected` is invalid on `role="link"` (AT ignores it). Decision (brainstorming): make the object-**number** cell a real React Router `` and keep the whole row clickable. The `` becomes a plain row: ```tsx navigate(`/objects/${object.id}?${params}`)} className={`cursor-pointer border-b text-sm ${selected ? "bg-primary/10" : "hover:bg-muted"}`} > event.stopPropagation()} className={`${focusRing} rounded-sm hover:underline`} > {object.object_number} {/* …other cells unchanged… */} ``` - Native anchor ⇒ keyboard focus + Enter activation + SR "link" + middle-click / open-in-new-tab, all free. - `event.stopPropagation()` on the link prevents the row `onClick` from double-navigating when the link itself is clicked. - The whole-row `onClick` stays, so clicking any non-link cell still opens the object (preserves current UX; the existing "clicking a row …" test clicks the object-**name** cell and still passes). - Selection is conveyed by `aria-current="page"` on the link (announced when focused); the visual highlight stays on the `` via the className. - Drop `role="link"`, `tabIndex`, `onKeyDown`, and `aria-selected` from the ``. ### 2b. `objects/objects-table.tsx` — filter pills: restore `focusRing` The visibility pills (`:168-177`) lack the keyboard focus ring their siblings (`search-panel`, `authorities-page`) have. Import `focusRing` from `../lib/focus-ring` and append it to the pill className: ```tsx className={`${focusRing} rounded-md px-2 py-1 ${active ? "bg-primary text-primary-foreground" : "border"}`} ``` ### 3. `objects/objects-table.tsx` — announce loading / error Loading renders bare `` rows and the error a plain `` — neither is announced (WCAG 4.1.3). - Add `aria-busy={isLoading || undefined}` to the ``. - Add an `sr-only` live ` ``` ### 4. `objects/object-detail-drawer.tsx` — name the drawer dialog The Base UI drawer (a modal dialog) has no accessible name. `DrawerContent` spreads props onto the Popup, so pass an `aria-label`: ```tsx ``` (No change to `components/ui/drawer.tsx`.) ### 5. Last untranslated strings - `objects/options-combobox.tsx` (`:47-52`): add `import { useTranslation } from "react-i18next";` + `const { t } = useTranslation();`, then `aria-label={t("common.clear")}` on `ComboboxClear`, `aria-label={t("common.open")}` on `ComboboxTrigger`, and `{t("common.noMatches")}` (`common.noMatches` already exists). - `shell/breadcrumb.tsx` (`:10`): add `useTranslation`; `

`. ### i18n (en + sv parity — 5 new keys) `common.noMatches` and `common.loading` already exist. New keys: | key | en | sv | |-----|----|----| | `common.clear` | Clear | Rensa | | `common.open` | Open | Öppna | | `nav.breadcrumb` | Breadcrumb | Brödsmulor | | `objects.detailTitle` | Object detail | Objektdetalj | | `objects.tableLabel` | Objects | Objekt | ## Data flow / accessibility No data-flow changes. Tab order in the objects table becomes: filter input → visibility pills (now with ring) → New button → each row's object-number link → pagination. The selected row's link carries `aria-current="page"`. Loading politely announces via the caption; a load error asserts via the alert cell. The drawer and breadcrumb gain accessible names; every combobox control is named in the active locale. ## Error handling / edges - `aria-busy={isLoading || undefined}` omits the attribute when not loading (no `aria-busy="false"` noise). - `event.stopPropagation()` on the row link means a plain click on the number navigates once (link), not twice; modifier/middle clicks open a new tab natively (React Router `` respects them). - `aria-current` is omitted (not `"false"`) when the row isn't selected. - The `

`; whole-row click still navigates; the filter pills show the keyboard focus ring. 3. The table sets `aria-busy` while loading and exposes a polite live caption; a load error renders `role="alert"`. 4. The object-detail drawer dialog and the breadcrumb `

` have accessible names; the combobox clear/open/empty strings are translated. 5. `typecheck`/`lint`/`test`/`build`/`check:colors` green; `check:size` reported; en/sv parity (5 new keys); no codename; no new dependency. ## Out of scope → follow-ups - The combobox wrapper's raw palette utilities (`text-neutral-*`, `bg-indigo-50`, `bg-white`) inside `components/ui/combobox.tsx`, and the segmented-control extraction → design-kit issue **#66**. - A full ARIA grid for the objects table (sortable/selectable grid semantics) — the navigation-table + real-link pattern is the correct, simpler choice here. - Automated axe/CI a11y scanning.

` that announces loading and settles to the table name (also gives the table an accessible name): ```tsx {columns} {body}

``` - Add `role="alert"` to the error `

` (`:223`) so a load failure is announced assertively: ```tsx

{t("objects.loadError")}

` is `sr-only` — no visual change to the table. - `useId()` ids are SSR/StrictMode stable and unique per instance. ## Testing - **`label-editor`**: render two `LabelEditor`s together; assert their inputs have **different** ids and each `` is associated with its own input (e.g. `getAllByLabelText` returns two distinct nodes). - **`objects-table`**: (a) a data row exposes a `link` named by the object number (`getByRole("link", { name: })`); (b) the row matching the selected `:id` has the link with `aria-current="page"`; (c) clicking a row still deep-links (existing test stays green); (d) the loading state sets `aria-busy` on the table; (e) an errored fetch renders `role="alert"`. Update any existing assertion that referenced `aria-selected`/the row as a link. - **`options-combobox`**: the clear/open controls are named via `t()` and the empty text is translated (assert the English defaults render; the parity test guards sv). - **`breadcrumb`**: the `

` accessible name comes from `t("nav.breadcrumb")`. - **`object-detail-drawer`**: the open drawer dialog has an accessible name (`getByRole("dialog", { name })` or equivalent for the Base UI popup). - **Gate:** `typecheck`/`lint`/`test`/`build`/`check:size`/`check:colors` green; en/sv parity (5 new keys, guarded by the #60 parity test); no codename; no new dependency. `focusRing` is token-based so `check:colors` stays green. ## Acceptance criteria 1. `LabelEditor` uses `useId()`; two instances never share an input id. 2. Objects-table data rows expose a real `` (object-number cell) with `aria-current="page"` on the selected row; no `role="link"`/`aria-selected` on the `