conflicting-focus-management-methods

In composite components either the managing container should be included in the focus sequence or one of its actionable descendants, but not both.

Description

Composite components that contain multiple actionable elements require implementing one of the keyboard navigation conventions, "Roving tabindex" which requires one of the actionable items in the group to be included in the focus sequence (i.e keyboard users can reach it with the Tab key), or "aria-activedescendant" which requires only the container be included in the focus sequence. Having both the container and its descendants in the focus sequence, breaks both navigation conventions, making keyboard operation less intuitive and precise.

Quick Fixes

Determining which element is redundant on the focus sequence depends on the implemented keyboard navigation convention. Suppose the container has an "aria-activedescendant" attribute. In that case, only the container element should be included in the focus sequence, and the aria-activedescendant's value should point to the active element's "id". However, if the container element doesn't have an "aria-activedescendant" attribute, it means that one of its actionable descendants should be included in the focus sequence (typically by adding tabindex="0"), while the other actionable elements are excluded from the focus sequence (typically by adding tabindex="-1"). In this case, when the user navigates in the component with the arrow keys, the new active element's "tabindex" value changes to "0" and receives the page focus. The "tabindex" value of the previous active element should change to "-1". For more information see "Keyboard Navigation Inside Components"

The code snippet below demonstrates a “tablist” with conflicting focus management methods. Bothe the “tablist” and “tab” elements are both included in the focus sequence.

1✗
2
3<div
4    role="tablist"
5    aria-activedescendant="tab_1"
6    tabindex="0">
7    <div
8        role="tab"
9        tabindex="0"
10        id="tab_1"
11        class="tab active"
12        aria-controls="tabpanel_1"
13        aria-selected="true">
14        Tab 1
15    </div>
16    <div
17        role="tab"
18        tabindex="-1"
19        id="tab_2"
20        class="tab"
21        aria-controls="tabpanel_2"
22        aria-selected="false">
23        Tab 2
24    </div>
25    <div
26        role="tab"
27        tabindex="-1"
28        id="tab_3"
29        class="tab"
30        aria-controls="tabpanel_3"
31        aria-selected="false">
32        Tab 3
33    </div>
34</div>
35

The next code snippet shows how to set up the same “tablist” for implementation of the "aria-activedescendant" keyboard navigation convention. Note that only the container element is included in the focus sequence.

1<div
2    role="tablist"
3    aria-activedescendant="tab_1"
4    tabindex="0">
5    <div
6        role="tab"
7        id="tab_1"
8        class="tab active"
9        aria-controls="tabpanel_1"
10        aria-selected="true">
11        Tab 1
12    </div>
13    <div
14        role="tab"
15        id="tab_2"
16        class="tab"
17        aria-controls="tabpanel_2"
18        aria-selected="false">
19        Tab 2
20    </div>
21    <div
22        role="tab"
23        id="tab_3"
24        class="tab"
25        aria-controls="tabpanel_3"
26        aria-selected="false">
27        Tab 3
28    </div>
29</div>

The last code snippet shows how to set the “tablist” for implementation of the "Roving tabindex" keyboard navigation convention. Note in this case the container is not included in the focus sequence and it also doesn’t need the "aria-activedescendant" attribute.

1<div role="tablist">
2    <div
3        role="tab"
4        tabindex="0"
5        class="tab active"
6        aria-controls="tabpanel_1"
7        aria-selected="true">
8        Tab 1
9    </div>
10    <div
11        role="tab"
12        tabindex="-1"
13        class="tab"
14        aria-controls="tabpanel_2"
15        aria-selected="false">
16        Tab 2
17    </div>
18    <div
19        role="tab"
20        tabindex="-1"
21        class="tab"
22        aria-controls="tabpanel_3"
23        aria-selected="false">
24        Tab 3
25    </div>
26</div>

How Users Are Affected

Assistive technologies users might not be able to use the component intuitively and may have difficulties operating it.

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.3 Focus Order (A)

Recommended Reading

WAI-ARIA, Developing a Keyboard Interface