Axon 911 Frontend DocsAxon 911 Frontend Docs
Axon 911 Frontend Docs
    Loading navigation…
U
User
Switch to light mode
  1. Components
  3. Tabs
  5. Accessibility

Tabs

Accessibility

Tabs from @prepared911/ui/tabs implements the WAI-ARIA Tabs pattern via Radix Tabs. Trigger-to-panel association, orientation, and keyboard behavior are handled by the primitive; your job is to provide an accessible group label and to keep focus behavior inside panels sensible.
What the component handles
  • Role assignment. TabsList → tablist, TabsTrigger → tab with aria-selected and aria-controls, TabsContent → tabpanel with aria-labelledby.
  • Orientation. aria-orientation reflects horizontal or vertical layout and drives arrow-key direction.
  • Focus flow. Focus moves into the active trigger, then Tab moves into the focused panel.
  • Activation model. Default activation on Enter/Space; manual activation keeps arrow-key browsing from prematurely switching panels.
What you must provide
  • Group label. Use label (renders aria-label) or labelledBy (renders aria-labelledby) on Tabs. Without one, screen-reader users hear "tablist" with no context.
  • Descriptive trigger text. Keep triggers concrete ("General", "Privacy"), not generic ("More").
  • Panel content that doesn't trap. If a panel holds complex interactive content (forms, editors), ensure its own focus management doesn't conflict with the tab pattern.
Keyboard behavior
KeyAction
TabMoves focus into the active trigger, then into the panel.
Arrow Left / RightMoves between triggers in horizontal layouts.
Arrow Up / DownMoves between triggers in vertical layouts.
Enter / SpaceActivates the focused trigger.
Home / EndJumps to the first / last trigger.
Semantics and roles
ElementRoleKey attributes
TabsListtablistaria-orientation
TabsTriggertabaria-selected, aria-controls
TabsContenttabpanelaria-labelledby
Provide a group label:
Screen reader announcements
Typical sequence when navigating:
  1. Focus enters the trigger list → "Account settings, tab list".
  2. First trigger → "General, tab, selected, 1 of 2".
  3. Arrow right → "Privacy, tab, 2 of 2".
  4. Enter → "Privacy, tab, selected, 2 of 2"; panel content updates.
Focus management
  • Focus stays on the active trigger after activation; Tab moves into the panel.
  • When a panel contains interactive elements, Tab reaches them directly from the trigger.
  • Respect focus restoration when tabs are controlled by external state (e.g., query parameters).
Known caveats
  • Lazy panels. If panels mount lazily, ensure the panel's content is rendered before screen readers try to read it. A momentarily empty tabpanel can confuse assistive tech.
  • Destructive actions inside panels. Confirm in a Dialog; never rely on a tab change to "cancel" a destructive flow.
Related accessibility pages
  • Tabs Accessibility: keyboard behavior for non-navigational tab strips.
  • Tabs Accessibility: link-based navigation tab semantics.
Previous
Tabs / API and Development
Next
Task / Usage
On this page
What the component handles
What you must provide
Keyboard behavior
Semantics and roles
Screen reader announcements
Focus management
Known caveats
Related accessibility pages