From ec11c9dc76516d265120e7016784364caca33da0 Mon Sep 17 00:00:00 2001
From: Anders Olsson <anders.e.olsson@gmail.com>
Date: Wed, 10 Jun 2026 13:29:27 +0200
Subject: [PATCH] fix(web): focus-visible rings on remaining controls + live
 search count (#69)

Keyboard focus was invisible on the objects-table sort headers and
page-size select, breadcrumb links, the external-URI link, and the
combobox input/clear/trigger. Apply the shared focusRing helper in app
code and the kit's inline focus-visible classes (matching input.tsx)
in ui/combobox.

Make the search result count a role="status" live region so screen
readers announce updated counts while typing; the existing search test
now asserts the count through getByRole("status").

Closes #69

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 web/src/components/external-uri-link.tsx |  4 +++-
 web/src/components/ui/combobox.tsx       | 12 +++++++++---
 web/src/objects/objects-table.tsx        |  4 ++--
 web/src/search/search-panel.tsx          |  2 +-
 web/src/search/search.test.tsx           |  3 ++-
 web/src/shell/breadcrumb.tsx             |  6 +++++-
 6 files changed, 22 insertions(+), 9 deletions(-)

diff --git a/web/src/components/external-uri-link.tsx b/web/src/components/external-uri-link.tsx
index 3d9799a..276f0fd 100644
--- a/web/src/components/external-uri-link.tsx
+++ b/web/src/components/external-uri-link.tsx
@@ -1,10 +1,12 @@
+import { focusRing } from "../lib/focus-ring";
+
 export function ExternalUriLink({ uri }: { uri: string }) {
   return (
     <a
       href={uri}
       target="_blank"
       rel="noopener noreferrer"
-      className="block truncate text-xs text-muted-foreground hover:text-foreground"
+      className={`block truncate rounded-sm text-xs text-muted-foreground hover:text-foreground ${focusRing}`}
     >
       {uri}
     </a>
diff --git a/web/src/components/ui/combobox.tsx b/web/src/components/ui/combobox.tsx
index 9a72ca5..1f677ec 100644
--- a/web/src/components/ui/combobox.tsx
+++ b/web/src/components/ui/combobox.tsx
@@ -20,7 +20,10 @@ function ComboboxInput({ className, ...props }: ComboboxPrimitive.Input.Props) {
   return (
     <ComboboxPrimitive.Input
       data-slot="combobox-input"
-      className={cn("w-full rounded border px-2 py-1 pr-12 text-sm", className)}
+      className={cn(
+        "w-full rounded border px-2 py-1 pr-12 text-sm transition-colors outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50",
+        className,
+      )}
       {...props}
     />
   );
@@ -31,7 +34,7 @@ function ComboboxClear({ className, ...props }: ComboboxPrimitive.Clear.Props) {
     <ComboboxPrimitive.Clear
       data-slot="combobox-clear"
       className={cn(
-        "absolute right-6 text-muted-foreground hover:text-foreground",
+        "absolute right-6 rounded-sm text-muted-foreground outline-none hover:text-foreground focus-visible:ring-3 focus-visible:ring-ring/50",
         className,
       )}
       {...props}
@@ -43,7 +46,10 @@ function ComboboxTrigger({ className, ...props }: ComboboxPrimitive.Trigger.Prop
   return (
     <ComboboxPrimitive.Trigger
       data-slot="combobox-trigger"
-      className={cn("absolute right-1 text-muted-foreground", className)}
+      className={cn(
+        "absolute right-1 rounded-sm text-muted-foreground outline-none focus-visible:ring-3 focus-visible:ring-ring/50",
+        className,
+      )}
       {...props}
     />
   );
diff --git a/web/src/objects/objects-table.tsx b/web/src/objects/objects-table.tsx
index 756a8bf..2b90bcb 100644
--- a/web/src/objects/objects-table.tsx
+++ b/web/src/objects/objects-table.tsx
@@ -131,7 +131,7 @@ export function ObjectsTable() {
         <button
           type="button"
           onClick={() => toggleSort(col)}
-          className="flex items-center gap-1 hover:text-foreground"
+          className={`flex items-center gap-1 rounded-sm hover:text-foreground ${focusRing}`}
         >
           {t(COLUMN_KEYS[col])}
           <Icon className="size-3.5 text-muted-foreground" aria-hidden="true" />
@@ -287,7 +287,7 @@ export function ObjectsTable() {
             value={limit}
             onChange={(event) => setLimit(Number(event.target.value))}
             aria-label={t("objects.pageSize")}
-            className="rounded-md border bg-background px-1 py-0.5"
+            className={`rounded-md border bg-background px-1 py-0.5 ${focusRing}`}
           >
             {PAGE_SIZES.map((size) => (
               <option key={size} value={size}>
diff --git a/web/src/search/search-panel.tsx b/web/src/search/search-panel.tsx
index b7b8ea6..6ee1ac2 100644
--- a/web/src/search/search-panel.tsx
+++ b/web/src/search/search-panel.tsx
@@ -102,7 +102,7 @@ export function SearchPanel() {
 
         {hits.length > 0 && (
           <>
-            <p className="px-3 pt-2 text-xs text-muted-foreground">
+            <p role="status" className="px-3 pt-2 text-xs text-muted-foreground">
               {t("search.resultCount", { count: total })}
             </p>
             <ul>
diff --git a/web/src/search/search.test.tsx b/web/src/search/search.test.tsx
index e78b21a..9aa963d 100644
--- a/web/src/search/search.test.tsx
+++ b/web/src/search/search.test.tsx
@@ -60,7 +60,8 @@ test("typing searches and renders highlighted rich rows", async () => {
   expect(await screen.findByText("Bronze figurine")).toBeInTheDocument();
   const mark = await screen.findByText("bronze");
   expect(mark.tagName).toBe("MARK");
-  expect(screen.getByText(/~\s*25 results/i)).toBeInTheDocument();
+  // The estimated count lives in a status region so updates are announced.
+  expect(screen.getByRole("status")).toHaveTextContent(/~\s*25 results/i);
   expect(screen.getByText(/1962-04-03/)).toBeInTheDocument();
 });
 
diff --git a/web/src/shell/breadcrumb.tsx b/web/src/shell/breadcrumb.tsx
index 95c3f1b..f388341 100644
--- a/web/src/shell/breadcrumb.tsx
+++ b/web/src/shell/breadcrumb.tsx
@@ -2,6 +2,7 @@ import { Fragment } from "react";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
 
+import { focusRing } from "../lib/focus-ring";
 import { useBreadcrumbTrail } from "./breadcrumb-context";
 
 export function Breadcrumb() {
@@ -16,7 +17,10 @@ export function Breadcrumb() {
           <Fragment key={`${item.label}-${i}`}>
             {i > 0 && <span className="text-muted-foreground">/</span>}
             {item.to && !last ? (
-              <Link to={item.to} className="truncate text-muted-foreground hover:text-foreground">
+              <Link
+                to={item.to}
+                className={`truncate rounded-sm text-muted-foreground hover:text-foreground ${focusRing}`}
+              >
                 {item.label}
               </Link>
             ) : (