MiHCM
layout/@mihcm/ui·v0.21.0·stable

Accordion

Vertically stacked collapsible sections. Supports single (one open) and multiple (any number open) modes with animated height transitions.

ConfiguratorExamplesUsageAccessibilityApi

WCAG 2.1 AA — release blocker

Keyboard

KeyAction
Enter / SpaceToggle the focused trigger's content panel.
TabMove focus to the next focusable element (next trigger or content).
Shift + TabMove focus to the previous focusable element.

Screen reader

  • AccordionTrigger renders a <button> with aria-expanded reflecting the open state.
  • AccordionContent renders role="region" with aria-labelledby pointing to its trigger.
  • Collapsed content is hidden — not in the accessibility tree until expanded.

Focus management

  • Each trigger is independently focusable via Tab — no arrow-key roving.
  • Expanding a section does not move focus. The user decides when to Tab into the content.
  • Disabled triggers remain in tab order but do not activate.

React Native

  • AccordionTrigger uses accessibilityRole="button" with accessibilityState={{ expanded }}.
  • Disabled items set disabled on the trigger Pressable.

Audit checklist

  • aria-expanded reflects open/closed state on every trigger
  • role="region" on expanded content
  • Enter / Space toggles the section
  • Collapsed content hidden from assistive tech
  • 4.5:1 contrast on trigger text in light and dark
  • Focus ring visible on all triggers