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 ( {uri} 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 ( ); @@ -31,7 +34,7 @@ function ComboboxClear({ className, ...props }: ComboboxPrimitive.Clear.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() { 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])} @@ -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) => ( 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 && ( <> - + {t("search.resultCount", { count: total })} 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() { {i > 0 && /} {item.to && !last ? ( - + {item.label} ) : (
+
{t("search.resultCount", { count: total })}