Skip to content

[bug]: Accordion trigger has no visible keyboard focus in 4 of 8 themes (luma, maia, mira, rhea) #11320

Description

@okadriu

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:

Theme .cn-accordion-trigger focus-visible
lyra, nova, sera, vega yes (focus-visible:border-ring + a ring)
luma, maia, mira, rhea no

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

  1. Init a project with an affected style, e.g. base-mira, then npx shadcn@latest add accordion button.
  2. 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.
  3. 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

  • I've made research efforts and searched the documentation
  • I've searched for existing issues

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions