UnderlinePanels
The underline panels are used to break related content into tabbed panels.
On this page
On this page
The underline nav guidelines cover the design guidelines not mentioned here.
The guidelines on this page only highlight the differences between underline panels and underline nav.
Usage
Underlined panels let users switch between 2 or more related panels of content without changing the URL or leaving their current context.
If you want to use this pattern for tabs that change the URL when activated, use the underline nav component instead.
Best practices
- One of the tabs should be selected by default when the user loads the page.
- Avoid overwhelming the user with too many tabs. If you have too many tabs, try grouping your content into broader categories or exposing more of the content on the page without requiring the user to click into a tab.
- Each view should have enough information so the user can complete their tasks without switching back and forth between tabs.
- Views should be able to be navigated in any order. This is not a pattern for navigating stepped flows.
Accessibility
Underline panels are made of the following ARIA roles:
tablist: the container wrapping the tabstab: each individual tabtabpanel: the container wrapping the content associated with each tab
The active tab is conveyed to assistive technologies using the aria-selected attribute. Each tab is associated with it's corresponding panel using the aria-controls attribute.
Icons in UnderlinePanels.Tab are purely decorative and are hidden from screen readers by default. If the icon does convey any informational meaning, the adjacent text inside of the tab must provide all the necessary information without relying on the icon itself.
Keyboard navigation
Underline panels' tabs follow the automatic activation pattern. This means that when a tab receives focus, the tab is activated and the associated panel is displayed.
| Key(s) | Description |
|---|---|
| Enter or Space | Activates the focused tab. |
| Tab | When focus moves into the tab list, focus goes to the active tab. When the tab list contains focus, moves focus to the next element in the page tab sequence outside the tablist. |
| Arrow Left | Moves focus to the previous tab. If focus is on the first tab, focus moves to the last tab. The focused tab is activated. |
| Arrow Right | Moves focus to the next tab. If focus is on the last tab, focus moves to the first tab. The focused tab is activated. |
| Home | Moves focus to the first tab and activates it. |
| End | Moves focus to the last tab and activates it. |