fix(web): a11y labelling — useId, named drawer/breadcrumb, translated combobox (#62)

web/src/components/label-editor.test.tsx

@@ -85,3 +85,16 @@ test("no hint when only the default-language label exists", () => {
   renderApp(<Harness initial={[{ lang: "sv", label: "Brons" }]} />);
   expect(screen.queryByText(/other languages/i)).not.toBeInTheDocument();
 });
+
+test("each LabelEditor instance gets a unique input id", () => {
+  renderApp(
+    <>
+      <LabelEditor value={[]} onChange={() => {}} />
+      <LabelEditor value={[]} onChange={() => {}} />
+    </>,
+  );
+  const inputs = screen.getAllByLabelText(/label/i);
+  expect(inputs).toHaveLength(2);
+  expect(inputs[0].id).not.toBe("");
+  expect(inputs[0].id).not.toBe(inputs[1].id);
+});

web/src/components/label-editor.tsx

@@ -1,3 +1,4 @@
+import { useId } from "react";
 import { useTranslation } from "react-i18next";
 
 import type { components } from "../api/schema";
@@ -19,6 +20,7 @@ export function LabelEditor({
   onChange: (labels: LabelInput[]) => void;
 }) {
   const { t } = useTranslation();
+  const inputId = useId();
   const { default_language } = useConfig();
 
   const current = value.find((l) => l.lang === default_language)?.label ?? "";
@@ -32,8 +34,8 @@ export function LabelEditor({
 
   return (
     <div className="space-y-1">
-      <Label htmlFor="label">{t("labels.label")}</Label>
+      <Label htmlFor={inputId}>{t("labels.label")}</Label>
-      <Input id="label" value={current} onChange={(e) => set(e.target.value)} />
+      <Input id={inputId} value={current} onChange={(e) => set(e.target.value)} />
       {hasOtherLanguages && (
         <p className="text-xs text-muted-foreground">{t("labels.otherLanguages")}</p>
       )}

web/src/i18n/en.json

@@ -1,8 +1,8 @@
 {
-  "common": { "yes": "Yes", "no": "No", "close": "Close", "loading": "Loading", "filter": "Filter…", "noMatches": "No matches", "language": "Language", "skipToContent": "Skip to content" },
+  "common": { "yes": "Yes", "no": "No", "close": "Close", "loading": "Loading", "filter": "Filter…", "noMatches": "No matches", "language": "Language", "skipToContent": "Skip to content", "clear": "Clear", "open": "Open" },
-  "nav": { "objects": "Objects", "vocabularies": "Vocabularies", "authorities": "Authorities", "fields": "Fields", "search": "Search", "collapseSidebar": "Collapse sidebar", "expandSidebar": "Expand sidebar" },
+  "nav": { "objects": "Objects", "vocabularies": "Vocabularies", "authorities": "Authorities", "fields": "Fields", "search": "Search", "collapseSidebar": "Collapse sidebar", "expandSidebar": "Expand sidebar", "breadcrumb": "Breadcrumb" },
   "auth": { "email": "Email", "password": "Password", "signIn": "Sign in", "signOut": "Sign out", "invalid": "Invalid email or password", "networkError": "Could not reach the server", "sessionExpired": "Your session expired — please sign in again.", "signingOut": "Signing out…" },
-  "objects": { "title": "Objects", "empty": "No objects yet", "loadError": "Could not load objects", "notFound": "Object not found", "prev": "Previous", "next": "Next", "of": "of", "new": "New object", "filter": "Filter objects…", "pageSize": "Per page", "columns": { "number": "Object №", "name": "Name", "visibility": "Visibility", "location": "Location", "count": "#", "updated": "Updated" }, "unknownRef": "(unknown)" },
+  "objects": { "title": "Objects", "empty": "No objects yet", "loadError": "Could not load objects", "notFound": "Object not found", "prev": "Previous", "next": "Next", "of": "of", "new": "New object", "filter": "Filter objects…", "pageSize": "Per page", "columns": { "number": "Object №", "name": "Name", "visibility": "Visibility", "location": "Location", "count": "#", "updated": "Updated" }, "unknownRef": "(unknown)", "detailTitle": "Object detail", "tableLabel": "Objects" },
   "fieldsLabels": { "objectNumber": "Object number", "objectName": "Name", "count": "Number of objects", "briefDescription": "Brief description", "currentLocation": "Current location", "currentOwner": "Current owner", "recorder": "Recorder", "recordingDate": "Recording date", "visibility": "Visibility" },
   "visibility": { "draft": "Draft", "internal": "Internal", "public": "Public" },
   "form": { "selectPlaceholder": "— select —", "create": "Create object", "save": "Save", "cancel": "Cancel", "visibility": "Visibility", "draft": "Draft", "internal": "Internal", "required": "This field is required", "rejected": "The server rejected the changes — check required and referenced fields", "fieldRejected": "The field \"{{field}}\" was rejected — check its value", "createdButFieldRejected": "Object created, but a field was rejected — fix it below.", "flexibleHeading": "Catalogue fields", "saving": "Saving…", "createAnother": "Save & create another", "minCount": "Must be at least 1", "fieldError": { "type_mismatch": "Wrong type for this field", "unresolved": "Referenced value not found", "unknown": "Unknown field" }, "unsaved": { "title": "Discard unsaved changes?", "body": "You have unsaved changes that will be lost.", "stay": "Keep editing", "leave": "Discard" } },

web/src/i18n/sv.json

@@ -1,8 +1,8 @@
 {
-  "common": { "yes": "Ja", "no": "Nej", "close": "Stäng", "loading": "Laddar", "filter": "Filtrera…", "noMatches": "Inga träffar", "language": "Språk", "skipToContent": "Hoppa till innehåll" },
+  "common": { "yes": "Ja", "no": "Nej", "close": "Stäng", "loading": "Laddar", "filter": "Filtrera…", "noMatches": "Inga träffar", "language": "Språk", "skipToContent": "Hoppa till innehåll", "clear": "Rensa", "open": "Öppna" },
-  "nav": { "objects": "Föremål", "vocabularies": "Vokabulär", "authorities": "Auktoriteter", "fields": "Fält", "search": "Sök", "collapseSidebar": "Fäll ihop sidofältet", "expandSidebar": "Fäll ut sidofältet" },
+  "nav": { "objects": "Föremål", "vocabularies": "Vokabulär", "authorities": "Auktoriteter", "fields": "Fält", "search": "Sök", "collapseSidebar": "Fäll ihop sidofältet", "expandSidebar": "Fäll ut sidofältet", "breadcrumb": "Brödsmulor" },
   "auth": { "email": "E-post", "password": "Lösenord", "signIn": "Logga in", "signOut": "Logga ut", "invalid": "Fel e-post eller lösenord", "networkError": "Kunde inte nå servern", "sessionExpired": "Din session har gått ut — logga in igen.", "signingOut": "Loggar ut…" },
-  "objects": { "title": "Föremål", "empty": "Inga föremål ännu", "loadError": "Kunde inte ladda föremål", "notFound": "Föremålet hittades inte", "prev": "Föregående", "next": "Nästa", "of": "av", "new": "Nytt föremål", "filter": "Filtrera föremål…", "pageSize": "Per sida", "columns": { "number": "Föremålsnr", "name": "Namn", "visibility": "Synlighet", "location": "Plats", "count": "Antal", "updated": "Uppdaterad" }, "unknownRef": "(okänd)" },
+  "objects": { "title": "Föremål", "empty": "Inga föremål ännu", "loadError": "Kunde inte ladda föremål", "notFound": "Föremålet hittades inte", "prev": "Föregående", "next": "Nästa", "of": "av", "new": "Nytt föremål", "filter": "Filtrera föremål…", "pageSize": "Per sida", "columns": { "number": "Föremålsnr", "name": "Namn", "visibility": "Synlighet", "location": "Plats", "count": "Antal", "updated": "Uppdaterad" }, "unknownRef": "(okänd)", "detailTitle": "Objektdetalj", "tableLabel": "Objekt" },
   "fieldsLabels": { "objectNumber": "Föremålsnummer", "objectName": "Namn", "count": "Antal föremål", "briefDescription": "Kort beskrivning", "currentLocation": "Nuvarande plats", "currentOwner": "Nuvarande ägare", "recorder": "Registrerad av", "recordingDate": "Registreringsdatum", "visibility": "Synlighet" },
   "visibility": { "draft": "Utkast", "internal": "Intern", "public": "Publik" },
   "form": { "selectPlaceholder": "— välj —", "create": "Skapa föremål", "save": "Spara", "cancel": "Avbryt", "visibility": "Synlighet", "draft": "Utkast", "internal": "Intern", "required": "Fältet är obligatoriskt", "rejected": "Servern avvisade ändringarna — kontrollera obligatoriska och refererade fält", "fieldRejected": "Fältet \"{{field}}\" avvisades — kontrollera värdet", "createdButFieldRejected": "Föremålet skapades, men ett fält avvisades — åtgärda nedan.", "flexibleHeading": "Katalogfält", "saving": "Sparar…", "createAnother": "Spara & skapa ny", "minCount": "Måste vara minst 1", "fieldError": { "type_mismatch": "Fel typ för detta fält", "unresolved": "Refererat värde hittades inte", "unknown": "Okänt fält" }, "unsaved": { "title": "Kasta osparade ändringar?", "body": "Du har osparade ändringar som går förlorade.", "stay": "Fortsätt redigera", "leave": "Kasta" } },

web/src/objects/object-detail-drawer.tsx

@@ -26,7 +26,7 @@ export function ObjectDetailDrawer({
       }}
       swipeDirection="right"
     >
-      <DrawerContent>
+      <DrawerContent aria-label={t("objects.detailTitle")}>
         <div className="flex justify-end border-b p-2">
           <DrawerClose
             aria-label={t("actions.closeDetail")}

web/src/objects/options-combobox.test.tsx

@@ -2,6 +2,7 @@ import { describe, it, expect, vi } from "vitest";
 import { render, screen, within } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 
+import "../i18n";
 import { OptionsCombobox, type Option } from "./options-combobox";
 
 const options: Option[] = [
@@ -49,6 +50,11 @@ describe("OptionsCombobox", () => {
     expect(screen.getByDisplayValue("Wood")).toBeInTheDocument();
   });
 
+  it("gives the open control a translated accessible name", () => {
+    setup();
+    expect(screen.getByRole("button", { name: /open/i })).toBeInTheDocument();
+  });
+
   it("clears the selection when the Clear button is clicked", async () => {
     const user = userEvent.setup();
     const { onChange } = setup("t1");

web/src/objects/options-combobox.tsx

@@ -1,3 +1,5 @@
+import { useTranslation } from "react-i18next";
+
 import type { components } from "../api/schema";
 import { labelText } from "../lib/labels";
 import {
@@ -32,6 +34,7 @@ export function OptionsCombobox({
   lang: string;
   placeholder: string;
 }) {
+  const { t } = useTranslation();
   const selected = options.find((o) => o.id === value) ?? null;
 
   return (
@@ -44,12 +47,12 @@ export function OptionsCombobox({
     >
       <ComboboxInputGroup>
         <ComboboxInput id={id} placeholder={placeholder} />
-        <ComboboxClear aria-label="Clear" />
+        <ComboboxClear aria-label={t("common.clear")} />
-        <ComboboxTrigger aria-label="Open" />
+        <ComboboxTrigger aria-label={t("common.open")} />
       </ComboboxInputGroup>
 
       <ComboboxPopup>
-        <ComboboxEmpty>No matches.</ComboboxEmpty>
+        <ComboboxEmpty>{t("common.noMatches")}</ComboboxEmpty>
         <ComboboxList>
           {(option: Option) => (
             <ComboboxItem key={option.id} value={option}>

web/src/shell/breadcrumb.test.tsx

@@ -26,6 +26,7 @@ test("renders the trail with a link on non-leaf crumbs", async () => {
   const link = await screen.findByRole("link", { name: "Objects" });
   expect(link).toHaveAttribute("href", "/objects");
   expect(screen.getByText("LM-0042")).toBeInTheDocument();
+  expect(screen.getByRole("navigation", { name: /breadcrumb/i })).toBeInTheDocument();
 });
 
 test("a nested route sets the header breadcrumb inside AppShell", async () => {

web/src/shell/breadcrumb.tsx

@@ -1,13 +1,15 @@
 import { Fragment } from "react";
+import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
 
 import { useBreadcrumbTrail } from "./breadcrumb-context";
 
 export function Breadcrumb() {
+  const { t } = useTranslation();
   const trail = useBreadcrumbTrail();
   if (trail.length === 0) return <div className="min-w-0 flex-1" />;
   return (
-    <nav aria-label="Breadcrumb" className="flex min-w-0 flex-1 items-center gap-1 text-sm">
+    <nav aria-label={t("nav.breadcrumb")} className="flex min-w-0 flex-1 items-center gap-1 text-sm">
       {trail.map((item, i) => {
         const last = i === trail.length - 1;
         return (