Axon 911 Frontend DocsAxon 911 Frontend Docs
Axon 911 Frontend Docs
    Loading navigation…
U
User
Switch to light mode
  1. Components
  2. Tab Menu
  3. Accessibility

Tab menu

Accessibility

Tabs from @prepared911/ui/tabs is a Radix Tabs list used for in-page selection (filters, local view modes). The primitive handles the tabs pattern; your job is to label the group, connect the list to the panel that updates, and make counter values meaningful.
What the component handles
  • Tabs semantics. Root → role="tablist"; tabs → role="tab" with aria-selected.
  • Roving focus. Only the active tab participates in the tab sequence; arrow keys move the visible focus.
  • Automatic activation. Tabs activate on arrow-key focus in the default mode.
What you must provide
  • Accessible name for the group. Pass aria-label or aria-labelledby on the container so rotor users know what the tabs filter.
  • Panel association. When Tabs drives a visible content region, wire aria-controls on each tab and aria-labelledby on the panel; the panel's role="tabpanel" and tabIndex={0} let keyboard users reach the content.
  • Meaningful counter values. counter badges must supplement the tab label ("Unread · 12"), never replace it. Ensure counters announce naturally alongside the tab name.
Keyboard behavior
  • Tab moves focus into the tablist (lands on the selected tab).
  • Arrow Left / Right / Up / Down move between tabs.
  • Home / End move to the first / last tab.
  • Enter / Space activate when manual activation is enabled.
Semantics and roles
  • role="tablist" with aria-orientation.
  • role="tab" with aria-selected and aria-controls.
  • Disabled tabs expose aria-disabled.
Known caveats
  • Navigation routes. If selecting a tab changes the URL or page identity, use Tabs instead—tablist semantics don't fit true navigation.
  • Icon-only tabs. Every tab must have an accessible name. An icon alone requires an aria-label or a visually hidden label.
Previous
Tab Menu / API and Development
Next
Tab Nav / Usage
On this page
What the component handles
What you must provide
Keyboard behavior
Semantics and roles
Known caveats