merge: focus-visible rings + live search count (#69)

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>

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}
     />
   );

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}>

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>

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();
 });
 

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>
             ) : (