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

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 (