Tab nav

Accessibility

Tabs from @prepared911/ui/tabs renders a route-backed tab strip built on Radix Tabs. Each item is a real <a>, not a tab in the WAI-ARIA sense. The primitive hands off browser-native link behavior; your job is to label the navigation region and signal the current page.

What the component handles

Link semantics. Items render as anchors, preserving middle-click, right-click, and modifier-key behaviors.
Active state. Radix marks the current link with a selected visual and aria-current="page" when routed correctly.
Focus ring. Visible focus rings follow the browser's default link behavior.

What you must provide

Accessible name for the nav. Wrap Tabs in a landmark (or aria-label the root) so screen readers announce "Navigation: Incident subviews".
Router integration. Ensure the asChild pattern wires the active state to the router's current pathname so aria-current reflects reality.
Link text. Avoid "Tab 1"; use meaningful labels that also make sense as bookmarkable URLs.

Keyboard behavior

Tab / Shift+Tab move between links.
Enter activates the focused link.
Modifier + click and Middle-click open in a new tab; respect these as you would any other link.

Semantics and roles

Each item renders as <a> with aria-current="page" on the active link.
The component is not a tablist; it does not expose role="tab" or manage roving focus.

Known caveats

Nested landmarks. When Tabs sits inside another named navigation such as Navbar, set landmark={false} so the inner Radix root is not a second navigation landmark. NavbarTabs does this automatically.
In-page filters. If selecting a tab does not change the URL or page identity, use Tabs instead.
Disabled destinations. Locking a route behind a feature flag requires an alternative affordance (tooltip or callout) that explains the locked state; don't render a disabled anchor silently.

Tab Nav / API and Development

Table / Usage

On this page

What the component handles

What you must provide

Keyboard behavior

Semantics and roles

Known caveats

Tab nav

Accessibility

What the component handles

Link semantics. Items render as anchors, preserving middle-click, right-click, and modifier-key behaviors.
Active state. Radix marks the current link with a selected visual and aria-current="page" when routed correctly.
Focus ring. Visible focus rings follow the browser's default link behavior.

What you must provide

Accessible name for the nav. Wrap Tabs in a landmark (or aria-label the root) so screen readers announce "Navigation: Incident subviews".
Router integration. Ensure the asChild pattern wires the active state to the router's current pathname so aria-current reflects reality.
Link text. Avoid "Tab 1"; use meaningful labels that also make sense as bookmarkable URLs.

Keyboard behavior

Tab / Shift+Tab move between links.
Enter activates the focused link.
Modifier + click and Middle-click open in a new tab; respect these as you would any other link.

Semantics and roles

Each item renders as <a> with aria-current="page" on the active link.
The component is not a tablist; it does not expose role="tab" or manage roving focus.

Known caveats

Nested landmarks. When Tabs sits inside another named navigation such as Navbar, set landmark={false} so the inner Radix root is not a second navigation landmark. NavbarTabs does this automatically.
In-page filters. If selecting a tab does not change the URL or page identity, use Tabs instead.
Disabled destinations. Locking a route behind a feature flag requires an alternative affordance (tooltip or callout) that explains the locked state; don't render a disabled anchor silently.

Tab Nav / API and Development

Table / Usage

On this page

What the component handles

What you must provide

Keyboard behavior

Semantics and roles

Known caveats