Prepared Docs

Tabs from @prepared911/ui-core 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

Key	Action
Tab	Moves focus into the active trigger, then into the panel.
Arrow Left / Right	Moves between triggers in horizontal layouts.
Arrow Up / Down	Moves between triggers in vertical layouts.
Enter / Space	Activates the focused trigger.
Home / End	Jumps to the first / last trigger.

Semantics and roles

Element	Role	Key attributes
`TabsList`	`tablist`	`aria-orientation`
`TabsTrigger`	`tab`	`aria-selected`, `aria-controls`
`TabsContent`	`tabpanel`	`aria-labelledby`

Provide a group label:

Typical sequence when navigating:

Focus enters the trigger list → "Account settings, tab list".
First trigger → "General, tab, selected, 1 of 2".
Arrow right → "Privacy, tab, 2 of 2".
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 Modal; never rely on a tab change to "cancel" a destructive flow.

TabMenu Accessibility: keyboard behavior for non-navigational tab strips.
TabNav Accessibility: link-based navigation tab semantics.

Tabs / API and Development

Textarea / Usage

What the component handles

What you must provide

Keyboard behavior

Semantics and roles

Screen reader announcements

Focus management

Known caveats

Related accessibility pages

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

Key	Action
Tab	Moves focus into the active trigger, then into the panel.
Arrow Left / Right	Moves between triggers in horizontal layouts.
Arrow Up / Down	Moves between triggers in vertical layouts.
Enter / Space	Activates the focused trigger.
Home / End	Jumps to the first / last trigger.

Semantics and roles

Element	Role	Key attributes
`TabsList`	`tablist`	`aria-orientation`
`TabsTrigger`	`tab`	`aria-selected`, `aria-controls`
`TabsContent`	`tabpanel`	`aria-labelledby`

Provide a group label:

Typical sequence when navigating:

Focus enters the trigger list → "Account settings, tab list".
First trigger → "General, tab, selected, 1 of 2".
Arrow right → "Privacy, tab, 2 of 2".
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 Modal; never rely on a tab change to "cancel" a destructive flow.

TabMenu Accessibility: keyboard behavior for non-navigational tab strips.
TabNav Accessibility: link-based navigation tab semantics.

Tabs / API and Development

Textarea / Usage

What the component handles

What you must provide

Keyboard behavior

Semantics and roles

Screen reader announcements

Focus management

Known caveats

Related accessibility pages