From de10731380d58f640339abf3b6ccc3f287887273 Mon Sep 17 00:00:00 2001 From: waterWang Date: Thu, 6 Aug 2026 17:40:06 +0800 Subject: [PATCH] fix: use focus-visible instead of focus for MarketFilters keyboard accessibility Changes CategoryPills button focus ring from :focus to :focus-visible so that the outline ring only appears on keyboard navigation, not on mouse click. Closes #816 --- app/components/CategoryPills.tsx | 2 +- app/components/__tests__/MarketFilters.test.tsx | 8 ++++++++ 2 files changed, 9 insertions(+), 1 deletion(-) diff --git a/app/components/CategoryPills.tsx b/app/components/CategoryPills.tsx index f339cf29..b9a834a4 100644 --- a/app/components/CategoryPills.tsx +++ b/app/components/CategoryPills.tsx @@ -87,7 +87,7 @@ export function CategoryPills({ categories, selected, onToggle, className }: Cat onKeyDown={(e) => handleKeyDown(e, index)} className={cn( "flex-shrink-0 rounded-full border px-4 py-1.5 text-sm font-medium transition-colors", - "focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", + "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", isActive ? "border-primary bg-primary text-primary-foreground" : "border-border bg-card text-muted-foreground hover:bg-accent hover:text-accent-foreground" diff --git a/app/components/__tests__/MarketFilters.test.tsx b/app/components/__tests__/MarketFilters.test.tsx index fc348365..17a76dc3 100644 --- a/app/components/__tests__/MarketFilters.test.tsx +++ b/app/components/__tests__/MarketFilters.test.tsx @@ -60,4 +60,12 @@ describe("MarketFilters", () => { const outer = container.firstChild as HTMLElement expect(outer).toHaveClass("custom-class") }) + + it("uses focus-visible ring classes on category buttons for keyboard accessibility", () => { + render() + const buttons = screen.getAllByRole("checkbox") + buttons.forEach((btn) => { + expect(btn.className).toContain("focus-visible:ring-2") + }) + }) })