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

Tabs

Controlled tabbed interface with full keyboard navigation. Composable: Tabs, TabsList, TabsTrigger, TabsContent.

ConfiguratorExamplesUsageAccessibilityApi

WCAG 2.1 AA — release blocker

Keyboard

KeyAction
Arrow RightFocus and activate next tab.
Arrow LeftFocus and activate previous tab.
HomeFocus and activate first tab.
EndFocus and activate last tab.
TabMove focus into the active tab panel content.

Screen reader

  • TabsList renders role="tablist".
  • TabsTrigger renders role="tab" with aria-selected.
  • TabsContent renders role="tabpanel" with tabIndex={0} and aria-labelledby pointing to its trigger.
  • Only the active trigger has tabIndex={0}; others have tabIndex={-1} (roving tabindex pattern).

Focus management

  • Pressing Tab from the tab list moves focus into the active panel, not the next tab trigger.
  • Arrow keys within the tab list wrap around — pressing Arrow Right on the last tab moves to the first.
  • Disabled tabs are skipped during arrow key navigation.

React Native

  • TabsTrigger uses accessibilityRole="tab" with accessibilityState={{ selected }}.
  • Disabled triggers set accessibilityState={{ disabled: true }}.

Audit checklist

  • role="tablist", role="tab", role="tabpanel" present
  • aria-selected reflects active tab
  • Arrow keys navigate between triggers
  • Tab moves focus into the active panel
  • Disabled tabs skipped in navigation
  • 4.5:1 contrast on active and inactive tab text