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(screen.getByRole("tab", { name: /^place$/i })).toHaveAttribute("aria-selected", "false");
+  expect(await screen.findByRole("link", { name: /^person$/i })).toHaveAttribute("aria-current", "page");
+  expect(screen.getByRole("link", { name: /^place$/i })).not.toHaveAttribute("aria-current");
 });
 
 test("create without EN label shows required alert and does not POST", async () => {