redundant-focusable-children
Only one item should be included in the page's focus sequence within a group of actionable items of composite components.
Description
Composite components often dictate that their internal navigation is carried out using the arrow keys while pressing the tab key, shifting the focus to the next actionable component. When there is more than one actionable item in the context of the component in the focus sequence, the keyboard navigation convention breaks, and the keyboard interface may become unpredictable (in the context of the component).
Quick Fixes
Ensure that only one actionable item within the component has tabindex="0". If the actionable items in the component are included in the focus sequence by default (e.g., <button>, <a>, <input type="[any type]"/>), all of them but the active item should be excluded from the focus sequence by adding them tabindex="-1".
However, if items are not included in the focus sequence by default, e.g., <div role=" button">Click me</div>, it is still recommended, and considered to be best practice also to add tabindex="-1" to signify that they should get the focus at some point and for easier maintenance.
Note that whenever this pattern is implemented, the navigation between the actionable items in the component is done with the arrow keys.
How Users Are Affected
Screen readers and keyboard users rely on keyboard navigation conventions to use and operate UI elements; however, having more than one actionable item in the focus sequence breaks the standard conventions and might make the interaction with the component confusing and not predictable for assistive technology users.
WCAG Success criteria
This issue might cause elements to fail one or more of the following Success criteria:
1.3.1 Info and relationships (A) | 2.4.1 Bypass Blocks (A)