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

Collapsible

Simple expand/collapse panel powered by Radix. Single toggle — no item/group semantics like Accordion.

ConfiguratorExamplesUsageAccessibilityApi

WCAG 2.1 AA — release blocker

Collapsible must satisfy these on every render before it ships.

Web (React DOM)

  • Trigger renders aria-expanded reflecting the current state.
  • Content region has role="region" and is linked to the trigger via aria-controls.
  • When closed, content is removed from the accessibility tree (not just visually hidden).

Keyboard

KeyAction
Enter / SpaceToggle the collapsible open/closed.
TabMove focus to and from the trigger.

React Native

  • Trigger renders a Pressable with accessibilityRole="button" and accessibilityState={{ expanded }}.
  • Content visibility toggles based on state.

Reduced motion

Height animation uses CSS transitions; prefers-reduced-motion is respected by the user agent.

Audit checklist

  • Trigger announces expanded/collapsed state
  • Content not in tab order when collapsed
  • Enter/Space toggles from trigger
  • Disabled state prevents interaction and is announced