Describe the bug
The accordion trigger in the new bases sets outline-none and leaves the focus style to the theme's cn-accordion-trigger utility. Four of the eight themes never define one, so keyboard focus on accordion triggers is invisible in luma, maia, mira and rhea. All three bases are affected since they share the theme CSS.
Line references are at 47c7f92.
The trigger markup, same in all three bases (base#L36, radix#L45, aria#L50):
"cn-accordion-trigger … border border-transparent transition-all outline-none …"
Whether the theme styles the trigger focus:
I checked the four affected theme files for any other rule that could style the trigger focus and found none. Meanwhile .cn-button and .cn-switch have focus rings in all eight themes, and the old new-york-v4 trigger has them too. The trigger even carries the border border-transparent placeholder the four working themes color in on focus; in the affected themes it just stays transparent. So this looks like an oversight, and it leaves keyboard users with no focus indicator at all (WCAG 2.4.7).
Affected component/components
Accordion (bases: base-ui, radix, react-aria; themes: luma, maia, mira, rhea)
How to reproduce
- Init a project with an affected style, e.g.
base-mira, then npx shadcn@latest add accordion button.
- Tab to the button: focus ring. Tab to an accordion trigger: nothing.
getComputedStyle on the focused trigger reports outline-style: none, border-color: transparent, no box-shadow.
- Same steps with
base-sera show the ring on the trigger.
Codesandbox/StackBlitz link
n/a, the two CLI commands above reproduce it. It's also visible in the registry payloads directly: compare https://ui.shadcn.com/r/styles/base-mira/accordion.json with base-sera.
Logs
n/a
System Info
shadcn-ui/ui@47c7f92 (2026-07-28), shadcn CLI 4.x, style base-mira
Before submitting
Suggested fix, taking the values from each theme's own .cn-button:
| Theme |
Add to .cn-accordion-trigger |
| luma |
focus-visible:ring-ring/30 focus-visible:border-ring focus-visible:ring-3 |
| maia |
focus-visible:ring-ring/50 focus-visible:border-ring focus-visible:ring-[3px] |
| mira |
focus-visible:ring-ring/30 focus-visible:border-ring focus-visible:ring-2 |
| rhea |
focus-visible:ring-ring/30 focus-visible:border-ring focus-visible:ring-3 |
lyra/nova/vega also use focus-visible:after:border-ring on their triggers; whether the four themes should pick that up too is your call. Happy to open a PR.
Describe the bug
The accordion trigger in the new bases sets
outline-noneand leaves the focus style to the theme'scn-accordion-triggerutility. Four of the eight themes never define one, so keyboard focus on accordion triggers is invisible in luma, maia, mira and rhea. All three bases are affected since they share the theme CSS.Line references are at
47c7f92.The trigger markup, same in all three bases (base#L36, radix#L45, aria#L50):
Whether the theme styles the trigger focus:
.cn-accordion-triggerfocus-visiblefocus-visible:border-ring+ a ring)I checked the four affected theme files for any other rule that could style the trigger focus and found none. Meanwhile
.cn-buttonand.cn-switchhave focus rings in all eight themes, and the old new-york-v4 trigger has them too. The trigger even carries theborder border-transparentplaceholder the four working themes color in on focus; in the affected themes it just stays transparent. So this looks like an oversight, and it leaves keyboard users with no focus indicator at all (WCAG 2.4.7).Affected component/components
Accordion (bases: base-ui, radix, react-aria; themes: luma, maia, mira, rhea)
How to reproduce
base-mira, thennpx shadcn@latest add accordion button.getComputedStyleon the focused trigger reportsoutline-style: none,border-color: transparent, no box-shadow.base-serashow the ring on the trigger.Codesandbox/StackBlitz link
n/a, the two CLI commands above reproduce it. It's also visible in the registry payloads directly: compare
https://ui.shadcn.com/r/styles/base-mira/accordion.jsonwithbase-sera.Logs
n/a
System Info
Before submitting
Suggested fix, taking the values from each theme's own
.cn-button:.cn-accordion-triggerfocus-visible:ring-ring/30 focus-visible:border-ring focus-visible:ring-3focus-visible:ring-ring/50 focus-visible:border-ring focus-visible:ring-[3px]focus-visible:ring-ring/30 focus-visible:border-ring focus-visible:ring-2focus-visible:ring-ring/30 focus-visible:border-ring focus-visible:ring-3lyra/nova/vega also use
focus-visible:after:border-ringon their triggers; whether the four themes should pick that up too is your call. Happy to open a PR.