APG · Tabs
Tabs
A tab strip is one tab stop, not one per tab. The arrow keys move between tabs; Tab takes you straight into the panel.
Your display name and avatar. This panel contains a link, so it is not itself a tab stop — here is that link.
Plain text, nothing focusable. This panel does get
tabindex="0", so Tab from the tab strip reaches the content
and a screen reader can read it.
Three active sessions.
Manual activation
Arrowing moves focus but does not switch panels until Enter or Space. Use this when showing a panel is expensive — with automatic activation, arrowing across five tabs fires five requests.
Daily report — a fresh query each time.
Weekly report.
Quarterly report.
Vertical orientation
Copy src/ into your project.
Import the component and call init().
Override the custom properties in tokens.css.
| Tab | Move into the tab strip (one stop), then out to the panel. |
|---|---|
| → / ← | Horizontal strip: move to the next / previous tab, wrapping at both ends. |
| ↓ / ↑ | Vertical strip: same, on the vertical axis. |
| Home / End | Move to the first / last tab. |
| Enter or Space | Manual activation only: show the focused tab's panel. |
Notes
The arrows for the other axis are deliberately left alone. A horizontal tab strip that swallows ↓ breaks the page's normal scrolling for anyone who happens to have focus in the strip.