feat(web): focus-visible rings on custom controls; honest authority links + lang group (#52)

web/src/authorities/authorities-page.tsx

@@ -13,8 +13,10 @@ import { ListSkeleton } from "@/components/ui/skeletons";
 import { AuthorityRow } from "./authority-row";
 import { byLabel } from "../lib/sort";
 import { labelText } from "../lib/labels";
+import { focusRing } from "../lib/focus-ring";
 import { useDocumentTitle } from "../lib/use-document-title";
 import { useBreadcrumb } from "../shell/use-breadcrumb";
+import { cn } from "@/lib/utils";
 
 type LabelInput = components["schemas"]["LabelInput"];
 
@@ -64,21 +66,19 @@ export function AuthoritiesPage() {
   return (
     <div className="overflow-auto p-4">
       <PageTitle className="mb-3">{t("nav.authorities")}</PageTitle>
-      <div role="tablist" className="mb-3 flex gap-2">
+      <nav aria-label={t("nav.authorities")} className="mb-3 flex gap-2">
         {KINDS.map((k) => (
           <NavLink
             key={k}
             to={`/authorities/${k}`}
-            role="tab"
-            aria-selected={k === currentKind}
             className={({ isActive }) =>
-              `rounded-md px-3 py-1 text-sm ${isActive ? "bg-primary text-primary-foreground" : "border"}`
+              cn("rounded-md px-3 py-1 text-sm", focusRing, isActive ? "bg-primary text-primary-foreground" : "border")
             }
           >
             {t(`authorities.${k}`)}
           </NavLink>
         ))}
-      </div>
+      </nav>
 
       <div className="mb-3">
         <Input

web/src/authorities/authorities.test.tsx

@@ -33,13 +33,13 @@ test("lists authorities for the kind and creates one", async () => {
 
 test("kind tabs link to the other kinds", async () => {
   renderApp(tree(), { route: "/authorities/person" });
-  expect(await screen.findByRole("tab", { name: /place/i })).toHaveAttribute("href", "/authorities/place");
+  expect(await screen.findByRole("link", { name: /place/i })).toHaveAttribute("href", "/authorities/place");
 });
 
-test("aria-selected is on the tab element and reflects the active kind", async () => {
+test("aria-current marks the active kind link", async () => {
   renderApp(tree(), { route: "/authorities/person" });
-  expect(await screen.findByRole("tab", { name: /^person$/i })).toHaveAttribute("aria-selected", "true");
+  expect(await screen.findByRole("link", { name: /^person$/i })).toHaveAttribute("aria-current", "page");
-  expect(screen.getByRole("tab", { name: /^place$/i })).toHaveAttribute("aria-selected", "false");
+  expect(screen.getByRole("link", { name: /^place$/i })).not.toHaveAttribute("aria-current");
 });
 
 test("create without EN label shows required alert and does not POST", async () => {

web/src/fields/field-list.tsx

@@ -5,8 +5,10 @@ import type { components } from "../api/schema";
 import { useFieldDefinitions, useDeleteFieldDefinition } from "../api/queries";
 import { labelText } from "../lib/labels";
 import { byLabel, compareStrings } from "../lib/sort";
+import { focusRing } from "../lib/focus-ring";
 import { DeleteConfirmDialog } from "../components/delete-confirm-dialog";
 import { Badge } from "@/components/ui/badge";
+import { cn } from "@/lib/utils";
 import { Input } from "@/components/ui/input";
 import { ListSkeleton } from "@/components/ui/skeletons";
 
@@ -86,7 +88,7 @@ export function FieldList({
                   >
                     <button
                       type="button"
-                      className="flex flex-1 items-center gap-2 text-left"
+                      className={cn("flex flex-1 items-center gap-2 rounded-sm text-left", focusRing)}
                       aria-pressed={def.key === selectedKey}
                       onClick={() => onSelect(def)}
                     >

web/src/i18n/en.json

@@ -1,5 +1,5 @@
 {
-  "common": { "yes": "Yes", "no": "No", "close": "Close", "loading": "Loading", "filter": "Filter…", "noMatches": "No matches" },
+  "common": { "yes": "Yes", "no": "No", "close": "Close", "loading": "Loading", "filter": "Filter…", "noMatches": "No matches", "language": "Language" },
   "nav": { "objects": "Objects", "vocabularies": "Vocabularies", "authorities": "Authorities", "fields": "Fields", "search": "Search", "collapseSidebar": "Collapse sidebar", "expandSidebar": "Expand sidebar" },
   "auth": { "email": "Email", "password": "Password", "signIn": "Sign in", "signOut": "Sign out", "invalid": "Invalid email or password", "networkError": "Could not reach the server" },
   "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)" },

web/src/i18n/sv.json

@@ -1,5 +1,5 @@
 {
-  "common": { "yes": "Ja", "no": "Nej", "close": "Stäng", "loading": "Laddar", "filter": "Filtrera…", "noMatches": "Inga träffar" },
+  "common": { "yes": "Ja", "no": "Nej", "close": "Stäng", "loading": "Laddar", "filter": "Filtrera…", "noMatches": "Inga träffar", "language": "Språk" },
   "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" },
   "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" },
   "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)" },

web/src/lib/focus-ring.ts

@@ -0,0 +1 @@
+export const focusRing = "outline-none focus-visible:ring-3 focus-visible:ring-ring/50";

web/src/search/search-panel.tsx

@@ -4,7 +4,9 @@ import { useTranslation } from "react-i18next";
 
 import { useSearch, HttpError } from "../api/queries";
 import { useDebouncedValue } from "../lib/use-debounced-value";
+import { focusRing } from "../lib/focus-ring";
 import { SearchResultRow } from "./search-result-row";
+import { cn } from "@/lib/utils";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { ListSkeleton } from "@/components/ui/skeletons";
@@ -71,7 +73,7 @@ export function SearchPanel() {
                 type="button"
                 aria-pressed={active}
                 onClick={() => setVisibility(value)}
-                className={`rounded-md px-2 py-0.5 ${active ? "bg-primary text-primary-foreground" : "border"}`}
+                className={cn("rounded-md px-2 py-0.5", focusRing, active ? "bg-primary text-primary-foreground" : "border")}
               >
                 {value === "all" ? t("search.all") : t(`visibility.${value}`)}
               </button>

web/src/shell/lang-switch.tsx

@@ -1,17 +1,23 @@
+import { useTranslation } from "react-i18next";
+
 import { useLocale } from "../i18n/use-locale";
+import { focusRing } from "../lib/focus-ring";
+import { cn } from "@/lib/utils";
 
 export function LangSwitch() {
+  const { t } = useTranslation();
   const { locale, setLocale } = useLocale();
   const base = locale.startsWith("sv") ? "sv" : "en";
 
   return (
-    <div className="flex gap-1 text-xs">
+    <div role="group" aria-label={t("common.language")} className="flex gap-1 text-xs">
       {(["sv", "en"] as const).map((lng) => (
         <button
           key={lng}
+          type="button"
           onClick={() => setLocale(lng)}
           aria-pressed={base === lng}
-          className={base === lng ? "font-bold" : "text-muted-foreground"}
+          className={cn("rounded-sm px-1", focusRing, base === lng ? "font-bold" : "text-muted-foreground")}
         >
           {lng.toUpperCase()}
         </button>

web/src/shell/theme-switch.tsx

@@ -3,6 +3,7 @@ import { useTranslation } from "react-i18next";
 
 import { useTheme } from "../theme/use-theme";
 import type { Theme } from "../theme/theme";
+import { focusRing } from "../lib/focus-ring";
 import { cn } from "@/lib/utils";
 
 const OPTIONS: { value: Theme; Icon: typeof Sun }[] = [
@@ -29,6 +30,7 @@ export function ThemeSwitch() {
             title={t(`theme.${value}`)}
             className={cn(
               "rounded-md p-1 transition-colors",
+              focusRing,
               active
                 ? "bg-accent text-foreground"
                 : "text-muted-foreground hover:text-foreground",