Frontend a11y: label-id collision, invalid table row semantics, unnamed drawer, unannounced table states #62

New Issue

2026-06-08T13:42:12Z

logaritmisk commented

2026-06-08 13:42:12 +00:00

Severity: High (mixed). From a frontend deep audit, 2026-06-08 (post #48). The #52 a11y pass is verified correct; these are the remaining gaps it didn't cover.

Problems

[High] Duplicate id="label" collides across simultaneous editors. LabelEditor hard-codes <Label htmlFor="label"> + <Input id="label"> (web/src/components/label-editor.tsx:35-36). It renders simultaneously in the create form and any inline-edit row — authorities (authorities-page.tsx:125 + authority-row.tsx:30) and vocab (vocabulary-terms.tsx + term-row.tsx:29). With two id="label" inputs in the DOM, every <label for="label"> resolves to the first match, so the second editor's label points at the wrong field. WCAG 1.3.1 / 4.1.1 / 4.1.2.
[Med] Invalid role="link" + aria-selected on table rows. objects-table.tsx:247-259 — aria-selected is not a supported state for role="link" (AT ignores/warns). The segmented filter pills in the same toolbar (objects-table.tsx:173) also dropped the focusRing present on the equivalent pills in search-panel.tsx/authorities-page.tsx — a keyboard-focus regression. WCAG 4.1.2 / 2.4.7.
[Med] Drawer dialog has no accessible name. The narrow-viewport object-detail drawer (objects/object-detail-drawer.tsx, components/ui/drawer.tsx:35) supplies no Drawer.Title/aria-label, so it announces as an anonymous modal. WCAG 4.1.2 / 2.4.6.
[Med] Table loading/error states aren't announced. objects-table.tsx:207-228 renders bare <Skeleton> rows (no aria-busy/role="status") and a plain <td> error (no role="alert"), unlike the ListSkeleton/FormSkeleton pattern in components/ui/skeletons.tsx. WCAG 4.1.3.
[Low] Only untranslated UI strings in the app. objects/options-combobox.tsx:47-52 — aria-label="Clear", aria-label="Open", <ComboboxEmpty>No matches.</ComboboxEmpty> bypass t() (render English for Swedish users). common.noMatches already exists and is unused. Also shell/breadcrumb.tsx:10 aria-label="Breadcrumb" is hardcoded.

Suggested fixes

LabelEditor: accept an id/idPrefix prop or use useId(); pass unique ids (label-create, label-${record.id}).
Table rows: drop role="link"/aria-selected; make the object-number cell a real <Link> (gains middle-click/open-in-new-tab) and keep <tr> plain — OR move to a valid role="grid"/role="row" structure. Restore focusRing on the filter pills.
Drawer: add aria-label/visually-hidden Drawer.Title.
Table states: aria-busy + role="status" while loading, role="alert" on error.
Translate the combobox strings (t("common.noMatches"), add common.clear/common.open) and the breadcrumb label.

Source: frontend deep audit (a11y dimension), 2026-06-08.

**Severity: High (mixed).** _From a frontend deep audit, 2026-06-08 (post #48). The #52 a11y pass is verified correct; these are the remaining gaps it didn't cover._ ## Problems - **[High] Duplicate `id="label"` collides across simultaneous editors.** `LabelEditor` hard-codes `<Label htmlFor="label">` + `<Input id="label">` (`web/src/components/label-editor.tsx:35-36`). It renders simultaneously in the create form **and** any inline-edit row — authorities (`authorities-page.tsx:125` + `authority-row.tsx:30`) and vocab (`vocabulary-terms.tsx` + `term-row.tsx:29`). With two `id="label"` inputs in the DOM, every `<label for="label">` resolves to the first match, so the second editor's label points at the wrong field. WCAG 1.3.1 / 4.1.1 / 4.1.2. - **[Med] Invalid `role="link"` + `aria-selected` on table rows.** `objects-table.tsx:247-259` — `aria-selected` is not a supported state for `role="link"` (AT ignores/warns). The segmented filter pills in the same toolbar (`objects-table.tsx:173`) also **dropped the `focusRing`** present on the equivalent pills in `search-panel.tsx`/`authorities-page.tsx` — a keyboard-focus regression. WCAG 4.1.2 / 2.4.7. - **[Med] Drawer dialog has no accessible name.** The narrow-viewport object-detail drawer (`objects/object-detail-drawer.tsx`, `components/ui/drawer.tsx:35`) supplies no `Drawer.Title`/`aria-label`, so it announces as an anonymous modal. WCAG 4.1.2 / 2.4.6. - **[Med] Table loading/error states aren't announced.** `objects-table.tsx:207-228` renders bare `<Skeleton>` rows (no `aria-busy`/`role="status"`) and a plain `<td>` error (no `role="alert"`), unlike the `ListSkeleton`/`FormSkeleton` pattern in `components/ui/skeletons.tsx`. WCAG 4.1.3. - **[Low] Only untranslated UI strings in the app.** `objects/options-combobox.tsx:47-52` — `aria-label="Clear"`, `aria-label="Open"`, `<ComboboxEmpty>No matches.</ComboboxEmpty>` bypass `t()` (render English for Swedish users). `common.noMatches` already exists and is unused. Also `shell/breadcrumb.tsx:10` `aria-label="Breadcrumb"` is hardcoded. ## Suggested fixes - `LabelEditor`: accept an `id`/`idPrefix` prop or use `useId()`; pass unique ids (`label-create`, `label-${record.id}`). - Table rows: drop `role="link"`/`aria-selected`; make the object-number cell a real `<Link>` (gains middle-click/open-in-new-tab) and keep `<tr>` plain — OR move to a valid `role="grid"`/`role="row"` structure. Restore `focusRing` on the filter pills. - Drawer: add `aria-label`/visually-hidden `Drawer.Title`. - Table states: `aria-busy` + `role="status"` while loading, `role="alert"` on error. - Translate the combobox strings (`t("common.noMatches")`, add `common.clear`/`common.open`) and the breadcrumb label. _Source: frontend deep audit (a11y dimension), 2026-06-08._