Start with the interaction model
Tabs represent layered sections where one associated panel is visible at a time. Decide whether moving focus activates a tab automatically or whether activation requires Space or Enter.
- Expose a tablist, tabs, and associated tabpanels with truthful labels.
- Put initial focus on the active tab when focus enters the tab list.
- Support Left and Right Arrow movement for horizontal tabs.
- Keep the active visual state, selected state, and visible panel synchronized.
Test beyond the default state
Verify long labels, narrow widths, disabled or unavailable sections, focus visibility, and panel content that begins with its own interactive control.