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

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>
-      <Input id="label" value={current} onChange={(e) => set(e.target.value)} />
+      <Label htmlFor={inputId}>{t("labels.label")}</Label>
+      <Input id={inputId} value={current} onChange={(e) => set(e.target.value)} />
       {hasOtherLanguages && (
         <p className="text-xs text-muted-foreground">{t("labels.otherLanguages")}</p>
       )}