UnderlinePanels

The UnderlinePanels are used to break related content into tabbed panels.

Page navigation navigation

Accessibility and usability expectations

The Underline panels component implements the tabs pattern and are made of the following ARIA roles:

tablist: the container wrapping the tabs
tab: each individual tab
tabpanel: the container wrapping the content associated with each tab

The tablist should have an accessible name, provided by using the aria-labelledby or aria-label attribute.

The active tab is conveyed to assistive technologies using the aria-selected attribute.

Each tab must have a clear and descriptive label. The label should be concise and descriptive of the content in the associated panel.

Tabs that include a counter must include the counter in the accessible name,so that it is conveyed to screen reader users.

Tabs can have a loading state for the counters, which is a pulsating oval that animates from gray to transparent. The animation lacks sufficient colour contrast so users with low vision will not be able to see the loading state and therefore fails the WCAG success criteria 1.4.1 Non-text contrast. The animation does not have a text alternative so the loading feedback is not available to screen readers and therefore fails 1.1.1 Non-text Content.

The tab labels must have sufficient colour contrast against the background and the selected tab must be visually obvious to users with low vision.

The tabs must have a visible focus style. A custom focus style must have a minimum contrast ratio of 3:1 against the background.

Each tab must have a minimum target size of 24 by 24 CSS pixels. This is to ensure that the control is large enough to be easily activated by users with motor impairments.

Only one tab can be selected at a time and is reached by using the Tab key. Pressing Tab again moves focus to the visible panel.

The right and left arrow keys are used to navigate between tabs. The tabs are automatically activated and their panel is displayed when they receive focus.

The tabs must remain by readable, without requiring horizontal scrolling, when zoomed or viewed at a width equivalent to 320 CSS pixels.

Icon usage

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.

UnderlinePanels' 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.

Built-in accessibility features

The component handles all roles, the selected state and all aspects of keyboard interaction.

UnderlinePanels has an aria-label and aria-labelledby prop to provide an accessible name for the tablist.

The counter text is included in the accessible name of the tab.

The tab labels and focus style meets minimum colour contrast requirements.

The selected tab is visually obvious to users with low vision. Whilst the underline of a selected tab does not meet contrast requirements, the label of the selected tab is bold and has higher contrast than the non-selected labels, which ensures users with low vision can distinguish the selected tab.

The tabs have a target size larger than the 24 by 24 CSS pixels minimum.

Implementation requirements

Provide an accessible name for the component. If there is a visible label, use aria-labelledby to associate it with the element that has role="tablist", otherwise use aria-label with an appropriate value. The accessible name describes the purpose or intent of the component and distinguishes the component from other components on the page. Don't use the aria-label text to provide a hint for how to use the component.

Provide a clear and descriptive label for each tab.

Only use decorative icons in tabs as a text description cannot be set.

Make sure the component does not cause horizontal scrolling. If there are too many tabs or the tab labels are too long, the component causes horizontal scrolling when zoomed or viewed at a width equivalent to 320 CSS pixels, which fails WCAG 1.4.10 Reflow.

Avoid using the loadingCounters until accessibility issues have been resolved.

How to test the component

Integration tests

The tablist has an appropriate and descriptive accessible name
Each tab has an appropriate and descriptive label
If an icon is present within a tab, the adjacent text inside of the tab provides all the necessary information without relying on the icon itself
The component does not cause horizontal scrolling when zoomed or viewed at a width equivalent to 320 CSS pixels

Component tests

The container wrapping the tabs has a role tablist and can accept aria-label and aria-labelledby attributes
Each individual tab has a role of tab
The container wrapping the content associated with each tab has a role of tabpanel
The active tab is conveyed to assistive technologies using the aria-selected attribute
Each tab must has a minimum target size of 24 by 24 CSS pixels
The tab labels have sufficient colour contrast against the background
The selected tab is visually obvious to users with low vision
Only one tab can be selected at a time and is reachable using the Tab key
Pressing the Tab key when a tab has focus moves focus to the visible panel
The right and left arrow keys are used to navigate between tabs
The tabs are automatically activated and their panel is displayed when they receive focus