composite-not-in-focus-sequence
Composite components that include actionable items must be included in the page’s focus sequence.
Description
Composite components that contain multiple actionable elements should implement one of two keyboard navigation conventions, "Roving tabindex" or "aria-activedescendant". Both conventions require that one element of those that make up the component is in the focus sequence (i.e., keyboard users can reach it with the Tab key). In the "aria-activedescendant" convention, it should be the actionable item's container, and in the "Roving tabindex" it should be one of the actionable items. When it receives the focus, the component becomes "active" and allows users to navigate within the component with the arrow keys.
Quick Fixes
Including an element in the page's focus sequence only requires adding tabindex="0" to the element we want to receive focus; however, you'll also need to handle the internal navigation within the component with the arrow keys according to the keyboard navigation conventions you chose to implement. For more information, see "Keyboard Navigation Inside Components".
The table below lists for each composite pattern which one of its elements should receive the focus in each of the potential keyboard navigation conventions.
| aria-activedescendant | Roving tabindex |
| ---------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| grid | columnheader, gridcell, rowheader |
| listbox | option |
| menu, menubar | menuitem, menuitemcheckbox, menuitemradio |
| radiogroup | radio |
| tablist | tab |
| tree | treeitem |
| treegrid | columnheader, gridcell, rowheader |
How Users Are Affected
Keyboard users won’t be able to reach and operate the component.
WCAG Success criteria
This issue might cause elements to fail one or more of the following Success criteria:
2.1.1 Keyboard (A)