Tabs

Role and semantics

Tabs implement the APG tabs pattern with Base UI Tabs. TabList is a tablist, each Tab is a <button role="tab"> with aria-selected and aria-controls, and each TabPanel is a tabpanel tied to its tab with aria-labelledby. label is required on TabList and becomes its aria-label. The indicator is decorative and stays out of the accessibility tree.

Keyboard

Key	Behaviour
Tab	Focuses the selected tab; the next Tab moves into the panel.
Left and right arrow (up and down when vertical)	Moves to the previous or next tab, wrapping at the ends. Selects it with automatic.
Home, End	Moves to the first or last tab.
Enter, Space	Selects the focused tab (needed with manual).

In right-to-left languages Provider direction="rtl" reverses the arrow keys.

Focus

A tab draws a 2 px color-focus-ring ring inside its box, because an outer ring could be clipped when the list scrolls. The panel is focusable and shows a 2 px outer ring, so a panel without interactive content can be read by keyboard. Rings appear on keyboard focus only (focus-visible).

Screen reader output

Example	Read as
Selected first tab	“Overview, tab, selected, 1 of 3”
Tab with badge={3}	“Activity 3, tab, 2 of 3”
disabled tab	“Settings, tab, dimmed, 3 of 3”
Moving into the panel	“Overview, tab panel”

Contrast

Selected and unselected labels meet at least 4.5:1 against their background (color-fg-default, color-fg-subtle). Selection is not shown by colour alone: the line look has a 2 px indicator and the contained look a raised pill with a shadow. Disabled labels are exempt from the contrast minimum (WCAG 1.4.3).

WCAG 2.2

Criterion	How Tabs meets it	What the product team must do
1.3.1 Info and relationships	tablist, tab, tabpanel roles with aria-controls and aria-labelledby.	Match each panel to its tab with the same value.
1.4.1 Use of colour	Selection is also shown by the indicator or the pill.	Do not hide the indicator with className.
2.1.1 Keyboard	Arrow keys, Home, End, Enter and Space.	Do not add your own key handlers to tabs.
2.4.7 Focus visible	focus-visible ring on tabs and panels.	Do not remove the ring.
2.5.8 Target size (minimum)	The smallest tab is 32 px high.	Do not leave labels empty.
4.1.2 Name, role, value	Name from the label and count, state from aria-selected.	Give the list a meaningful label.