Context
packages/loopover-ui-kit/src/components/accordion.tsx's AccordionTrigger (lines 20-33) has no focus indicator at all — its className only includes hover:underline for the hover state, with nothing for :focus-visible. Every other styled interactive trigger/control in this same component library applies a focus-visible:ring-* class: button.tsx:8, tabs.tsx:30, toggle.tsx:8, switch.tsx:12, checkbox.tsx:14, slider.tsx:18. A keyboard user tabbing to an accordion header today gets zero visible indication of where focus is.
Requirements
- Add a
focus-visible:ring-* class to AccordionTrigger's className, matching the exact ring styling (color, width, offset) already used by the sibling components listed above.
- Do not change
AccordionTrigger's hover/open-state styling or its ChevronDown rotation behavior — this issue is scoped to adding the missing focus-visible indicator only.
Deliverables
Test Coverage Requirements
packages/loopover-ui-kit — check coverage.include for this package; if covered, 99%+ Codecov patch coverage plus a before/after screenshot of the focus state per this repo's UI-PR convention.
Expected Outcome
Keyboard users tabbing through an accordion get the same visible focus indication every other interactive control in the kit already provides.
Links & Resources
packages/loopover-ui-kit/src/components/button.tsx:8, tabs.tsx:30, toggle.tsx:8, switch.tsx:12, checkbox.tsx:14, slider.tsx:18 — the existing focus-visible:ring-* convention to match. packages/loopover-ui-kit/src/components/accordion.tsx:20-33 — the component to fix.
Context
packages/loopover-ui-kit/src/components/accordion.tsx'sAccordionTrigger(lines 20-33) has no focus indicator at all — its className only includeshover:underlinefor the hover state, with nothing for:focus-visible. Every other styled interactive trigger/control in this same component library applies afocus-visible:ring-*class:button.tsx:8,tabs.tsx:30,toggle.tsx:8,switch.tsx:12,checkbox.tsx:14,slider.tsx:18. A keyboard user tabbing to an accordion header today gets zero visible indication of where focus is.Requirements
focus-visible:ring-*class toAccordionTrigger's className, matching the exact ring styling (color, width, offset) already used by the sibling components listed above.AccordionTrigger's hover/open-state styling or itsChevronDownrotation behavior — this issue is scoped to adding the missing focus-visible indicator only.Deliverables
AccordionTriggerhas a visiblefocus-visible:ring-*state matching the kit's existing conventionTest Coverage Requirements
packages/loopover-ui-kit— checkcoverage.includefor this package; if covered, 99%+ Codecov patch coverage plus a before/after screenshot of the focus state per this repo's UI-PR convention.Expected Outcome
Keyboard users tabbing through an accordion get the same visible focus indication every other interactive control in the kit already provides.
Links & Resources
packages/loopover-ui-kit/src/components/button.tsx:8,tabs.tsx:30,toggle.tsx:8,switch.tsx:12,checkbox.tsx:14,slider.tsx:18— the existingfocus-visible:ring-*convention to match.packages/loopover-ui-kit/src/components/accordion.tsx:20-33— the component to fix.