diff --git a/src/components/common/ProfileTabPill.tsx b/src/components/common/ProfileTabPill.tsx index 4953bba..3c492c7 100644 --- a/src/components/common/ProfileTabPill.tsx +++ b/src/components/common/ProfileTabPill.tsx @@ -3,7 +3,7 @@ import { cva, type VariantProps } from 'class-variance-authority'; import { cn } from '@/lib/utils'; const profileTabPillVariants = cva( - 'inline-flex items-center gap-1.5 rounded-full border px-3.5 py-1.5 text-xs font-semibold font-jakarta tracking-wide transition-all duration-200 outline-none focus-visible:ring-2 focus-visible:ring-amber-400/50 focus-visible:ring-offset-1 focus-visible:ring-offset-transparent', + 'inline-flex items-center gap-1.5 rounded-full border px-3.5 py-1.5 text-xs font-semibold font-jakarta tracking-wide transition-all duration-200 outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:ring-offset-2 focus-visible:ring-offset-background', { variants: { state: { diff --git a/src/components/common/__tests__/ProfileTabPillGroup.test.tsx b/src/components/common/__tests__/ProfileTabPillGroup.test.tsx index 54f8999..16a2adb 100644 --- a/src/components/common/__tests__/ProfileTabPillGroup.test.tsx +++ b/src/components/common/__tests__/ProfileTabPillGroup.test.tsx @@ -170,4 +170,27 @@ describe('ProfileTabPillGroup – hash routing enabled', () => { ); } }); + + it('uses the project focus-visible ring for keyboard tab focus', () => { + const onTabChange = vi.fn(); + render( + + ); + + const tab = screen.getByRole('tab', { name: 'Overview' }); + + expect(tab).toHaveClass( + 'focus-visible:border-ring', + 'focus-visible:ring-[3px]', + 'focus-visible:ring-ring/50', + 'focus-visible:ring-offset-2', + 'focus-visible:ring-offset-background' + ); + expect(tab.className).not.toContain('focus:ring-'); + }); });