Tab buttons align left and bottom border expands to full width of container.
Reduced spacing around the tab buttons create a denser visual design.
Tab buttons space evenly across the container.
Bottom border of tab header list is removed.
Tabs component maintains these keyboard interactions:
- Left arrow and Right arrow keys: Moves user between tabs
- Down arrow: Moves user into the content within the active tab section
- Up arrow: Returns user to the selected tab
This component has compliance with WCAG guidelines by:
- Using text color with a Level AA contrast ratio of 4.5:1 contrast between the text color and the background (but only when displayed on light backgrounds)
- Includes tablist role in tabs header container
- Includes tab role in tab header element
- Includes tabpanel role in tab content element