Tabs

Selector
[role="tablist"], button[role="tab"], [role="tabpanel"]
Requires JavaScript
[data-functionality="tabs"]

Use tabs to allow the user to explore different views. The markup requires ARIA attributes on 3 separate elements. The tab list is marked as role="tablist" and contains the tabs (role="tab"). Each tab button points to its related tab panel, which is marked with role="tabpanel". This component requires JavaScript to handle the ARIA attributes and keyboard navigation, which is based on the W3C's recommendation.

The tab list acts as a single tab stop, essentially becoming a widget. Only the activated tab is focusable. The arrow keys are used to activate the others tabs in the list. To ease navigation, activated tab panels are given a tabindex="0" to provide a consistent destination after tabbing through the tab list.

Chess Openings

White begins by playing d4 and black responds with d5. The Queen's gambit occurs when white plays c4, challenging black's center.

Keyboard Navigation

The Mango UI tabs follow automatic activation, where each tab activates once it gets focus. This was done to keep the interface feeling snappy and responsive. When focused on a tab:

  • Press the Left Arrow and Right Arrow to activate the next and previous tabs respectively
  • Press Home to activate the first tab
  • Press End to activate the last tab
  • Press Tab to move to the next tab stop on the page after the tab list, which should be the tab panel.