Tabs
A full-featured tabbed interface that combines a tab bar with associated panel content.
Keyboard interaction
| Key | Action |
|---|---|
| Tab | Moves focus to the active tab button. |
| Arrow Left / Arrow Up | Moves focus to the previous tab and activates it. |
| Arrow Right / Arrow Down | Moves focus to the next tab and activates it. |
| Home | Activates and focuses the first tab. |
| End | Activates and focuses the last tab. |
| Tab (from tab bar) | Moves focus into the active panel content. |
Screen reader behaviour
| Attribute / Property | Value / Behaviour |
|---|---|
role="tablist" | Tab bar wrapper — Groups the tab buttons as a tab list. |
role="tab" | Each tab button — Identifies each button as a tab control. |
aria-selected | Each tab button — "true" on the active tab, "false" on others; managed automatically. |
aria-controls | Each tab button — Points to the ID of the associated panel. |
tabindex | Each tab button — "0" on the active tab; "-1" on others; managed automatically. |
role="tabpanel" | Each panel — Set on each diwa-tabs-item host element. |
aria-hidden | Each panel — "true" when the panel is inactive, "false" when active. |
WCAG 2.2 compliance
1.4.3 Contrast (Minimum) — AAPass
Tab label text uses --diwa-text-primary; meets the 4.5:1 minimum contrast ratio against the tab bar background in both themes.
1.4.11 Non-text Contrast — AAPass
The active tab indicator (--diwa-accent) meets ≥ 3:1 contrast against the adjacent tab bar surface.
2.1.1 Keyboard — APass
Tab moves focus to the active tab button. Arrow keys navigate between tabs and activate them simultaneously. Home and End jump to first and last tab.
2.4.7 Focus Visible — AAPass
A tokenized focus outline (var(--diwa-focus-ring-width) solid --diwa-border-focus) is shown on the active tab button via :focus-visible.
4.1.2 Name, Role, Value — APass
role="tablist", role="tab", aria-selected, aria-controls, tabindex, role="tabpanel", and aria-hidden are all managed automatically by the component.
Best practices
- Reduced motion — all CSS transitions inside the shadow DOM respond to
prefers-reduced-motion: reduceand are suppressed automatically. - Focus management — when a tab is activated, focus remains on the tab button. Users press Tab again to move focus into the active panel content. This follows the ARIA Authoring Practices Guide pattern for tabs with automatic activation.
- Meaningful tab labels — keep tab labels short and descriptive. Screen reader users navigate by tab label so unclear names like "Tab 1", "Tab 2" are not helpful.