Tabs Bar

A navigation bar that organises content into labelled tabs, allowing users to switch between related views.

Keyboard interaction

Key	Action
`Tab`	Moves focus to the tabs bar. Focus lands on the active tab.
`Shift + Tab`	Moves focus to the previous focusable element before the tabs bar.
`Arrow Left / Arrow Up`	Moves focus to and activates the previous enabled tab. Wraps to the last enabled tab.
`Arrow Right / Arrow Down`	Moves focus to and activates the next enabled tab. Wraps to the first enabled tab.
`Home`	Moves focus to and activates the first enabled tab.
`End`	Moves focus to and activates the last enabled tab.
`Tab (from tab)`	Moves focus out of the tabs bar to the next focusable element, typically the controlled panel content.

Screen reader behaviour

The host exposes a role="tablist" and the component assigns role="tab",aria-selected, and managed tabindex values to each slotted tab element. The consumer remains responsible for the associated panel region and should add a nearby role="tabpanel" when building a complete tabs pattern.

Attribute / Property	Value / Behaviour
`role="tablist"`	Host element — Identifies the container as a tab list.
`aria-selected`	Each tab — "true" on the active tab, "false" on all others; set automatically.
`tabindex`	Each tab — "0" on the active tab; "-1" on all others; managed by the component.
`role="tab"`	Each tab — Applied to slotted button or link elements by the component.
`aria-disabled`	Disabled tabs — Applied automatically when a slotted tab has disabled or aria-disabled="true".

WCAG 2.2 compliance

1.4.3 Contrast MinimumPass

Tab labels and active-state styling maintain readable contrast against the tabs bar surface in both themes.

1.4.11 Non-text ContrastPass

The active tab treatment and focus ring remain visually distinct from adjacent inactive tabs.

2.1.1 KeyboardPass

Users can enter the tabs bar with Tab and move across enabled tabs with arrow keys, Home, and End.

2.4.7 Focus VisiblePass

The focused tab receives a visible outline via :focus-visible without relying on hover styling alone.

4.1.2 Name, Role, ValuePass

The component assigns tablist/tab roles and keeps aria-selected, tabindex, and aria-disabled in sync with state.

Best practices

Reduced motion — all CSS transitions inside the shadow DOM respond to prefers-reduced-motion: reduce and are suppressed automatically.
Associated panels — always add role="tabpanel" to the content panels that correspond to each tab. This completes the ARIA tabs pattern so screen readers announce the panel relationship.
Meaningful labels — keep tab button labels short and descriptive. Short, unambiguous labels help screen reader users navigate efficiently by tab heading.
Disabled tabs — if a destination is temporarily unavailable, set disabled or aria-disabled="true" on that tab so both visuals and interaction stay aligned.