Accessibility

For designers

• All states (active, disabled, hover) must maintain accessible contrast.
• Focus styles must remain visible and meet WCAG AA contrast requirements across all supported surfaces. Focus should be clearly distinguishable from hover.
• Colour tokens used should be semantic (e.g. foreground/neutral/default) rather than fixed values. This ensures the component adapts correctly to different themes or surfaces.

For developers

Roles & attributes

The Tabs component follows the WAI-ARIA Tabs pattern:

• The container has role="tablist"
• Each tab has role="tab" and aria-controls linking to its panel
• The active tab has aria-selected="true"
• Each panel has role="tabpanel" and aria-labelledby linking back to its tab
• Inactive panels use the hidden attribute

Keyboard interaction

Key	Action
← / →	Move focus between tabs (horizontal tablist)
Home / End	Move focus to first / last tab
Enter / Space	Activate the focused tab
Tab	Move focus into the active tab panel