UnderlinePanels

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

Page navigation navigation

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

Accessibility and usability expectations

Presentation

Cognition

Each UnderlinePanels.Tab must have a clear and descriptive label that concisely conveys the content of the associated panel

Vision

UnderlinePanels.Tabs must have sufficient color contrast against the background, including the selected tab which must be visually obvious to users with low vision
UnderlinePanels.Tabs must have a visible focus style with a minimum contrast ratio of 3:1 against the background
The loading state (a pulsating oval) must have a minimum contrast ratio of 3:1. Currently, it lacks sufficient color contrast and does not meet WCAG 1.4.1 Non-text Contrast

Mobility

Each UnderlinePanels.Tab must have a minimum target size of 24 by 24 CSS pixels to support users with motor impairments

Adaptability

UnderlinePanels.Tab's must remain readable and not require horizontal scrolling, at a viewport size of 320 by 256 CSS pixels
Text resizing and spacing adjustments must be supported without loss of readability or function

Interaction

Only one UnderlinePanels.Tab can be selected at a time
Pressing the UnderlinePanels.Tab key moves focus to the selected UnderlinePanels.Tab, and pressing it again moves focus into the visible panel
The left and right arrow keys move focus between UnderlinePanels.Tab's, automatically activating and displaying their associated panels

Keyboard

UnderlinePanels.Tab's must be operable with the UnderlinePanels.Tab key for focus, and with the left and right arrow keys for navigation
Activation of UnderlinePanels.Tab's happens automatically on focus, not requiring an extra keystroke
Only one UnderlinePanels.Tab can be selected at a time and is reachable using the UnderlinePanels.Tab key
Pressing the UnderlinePanels.Tab key when a UnderlinePanels.Tab has focus moves focus to the visible panel
The right and left arrow keys are used to navigate between UnderlinePanels.Tab's
The UnderlinePanels.Tab's are automatically activated and their panel is displayed when they receive focus

Engineering for AT Compatibility

The component uses ARIA roles: tablist (container), UnderlinePanels.Tab (individual tab), and tabpanel
The tablist must have an accessible name via aria-labelledby or aria-label
The active UnderlinePanels.Tab must use aria-selected to indicate its state
Icons in UnderlinePanels.Tab's are hidden from screen readers when decorative. If icons convey information, the adjacent text must be sufficient to convey the meaning
The loading state must have a text alternative. It currently does not have a text alternative, so screen reader users receive no feedback and this fails WCAG 1.1.1 Non-text Content
If a UnderlinePanels.Tab includes a counter, the counter must be included in the accessible name so screen reader users are aware of it

Speech recognition

Each UnderlinePanels.Tab label should be included in the accessible name so that speech recognition users can activate a UnderlinePanels.Tab by speaking its visible label
Avoid using duplicate or overly generic UnderlinePanels.Tab labels (e.g., "Tab 1", "Tab 2") to ensure accurate voice control

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 UnderlinePanels.Tab
The UnderlinePanels.Tab labels and focus style meets minimum color contrast requirements
The selected UnderlinePanels.Tab is visually obvious to users with low vision. Whilst the underline of a selected UnderlinePanels.Tab does not meet contrast requirements, the label of the selected UnderlinePanels.Tab is bold and has higher contrast than the non-selected labels, which ensures users with low vision can distinguish the selected UnderlinePanels.Tab
The UnderlinePanels.Tab's have a target size larger than the 24 by 24 CSS pixels minimum

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.

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 UnderlinePanels.Tab
Only use decorative icons in UnderlinePanels.Tabs as a text description cannot be set
Ensure the component does not cause horizontal scrolling. If there are too many UnderlinePanels.Tabs or the UnderlinePanels.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 tab's has a role tablist and can accept aria-label and aria-labelledby attributes
Each individual tab has a role of UnderlinePanels.Tab
The container wrapping the content associated with each UnderlinePanels.Tab has a role of tabpanel
The active UnderlinePanels.Tab is conveyed to assistive technologies using the aria-selected attribute
Each UnderlinePanels.Tab must have a minimum target size of 24 by 24 CSS pixels
The UnderlinePanels.Tab labels have sufficient color contrast against the background
The selected UnderlinePanels.Tab is visually obvious to users with low vision
Only one UnderlinePanels.Tab can be selected at a time and is reachable using the UnderlinePanels.Tab key
Pressing the UnderlinePanels.Tab key when a UnderlinePanels.Tab has focus moves focus to the visible panel
The right and left arrow keys are used to navigate between UnderlinePanels.Tabs
The UnderlinePanels.Tabs are automatically activated and their panel is displayed when they receive focus