diff --git a/src/components/labs/__tests__/lab-filter-rail.test.tsx b/src/components/labs/__tests__/lab-filter-rail.test.tsx index 2208fa256..0069a85de 100644 --- a/src/components/labs/__tests__/lab-filter-rail.test.tsx +++ b/src/components/labs/__tests__/lab-filter-rail.test.tsx @@ -121,6 +121,31 @@ describe("", () => { expect(extractCountText(renderCount("ru", 5))).toBe("5 биомаркеров"); }); + it("announces the result count as it changes while typing", () => { + const html = renderToStaticMarkup( + + + , + ); + const count = html.match(/]*)>2 biomarkers<\/span>/); + expect(count).not.toBeNull(); + expect(count![1]).toContain('role="status"'); + expect(count![1]).toContain('aria-live="polite"'); + expect(count![1]).toContain('aria-atomic="true"'); + }); + it("shows reset button when isFiltered is true", () => { const html = renderToStaticMarkup( diff --git a/src/components/ui/filter-bar.tsx b/src/components/ui/filter-bar.tsx index 3291d1c7b..3bfce3b63 100644 --- a/src/components/ui/filter-bar.tsx +++ b/src/components/ui/filter-bar.tsx @@ -120,8 +120,15 @@ export function FilterBar({ )} + {/* A polite status, so a list that filters while you type says how + many results are left, not only when none are. */} {count != null && ( - + {count} )}