@amsterdam/design-system-css
Version:
Stylesheets for all components from the Amsterdam Design System and some general utilities. Use it to apply the visual design of the City of Amsterdam to your HTML elements or non-React components.
35 lines (24 loc) • 1.53 kB
Markdown
<!-- @license CC0-1.0 -->
# Tabs
Tabs are used to bundle related content in a compact overview within a page. Each tab has a short name, and these names indicate the relationship between the information displayed in each tab.
## Guidelines
- The content of each tab is viewable independently, not in the context of one another.
- The content within each tab should have a similar structure.
- Use when there is limited visual space and content needs to be divided into sections.
- Each tab consists of a button and a panel.
A `tab` prop with a corresponding value connects them.
You can navigate tabs with your keyboard:
| key | element |
| :------------- | :--------------------------------------------- |
| Enter or Space | Open or close the tab that has the focus |
| Tab | Go to the next element that can have focus |
| Shift + Tab | Go to the next element that can have focus |
| Left arrow | If the tabs have focus: go to the previous tab |
| Right arrow | If the tabs have focus: go to the next tab |
| Home | If the tabs have focus: go to the first tab |
| End | If the tabs have focus, go to the last tab |
### Caution
Do not use tabs if the content in each tab functions just as well on separate pages.
## References
- [W3C - Tabs Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/)
- [MDN - Tab Aria Roles](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tab_role)