Posted 19 December 2024, 6:11 am EST
- Updated 19 December 2024, 6:16 am EST
Hi Jacob,
As per the dev’s investigation, this is considered by design. Here is an explanation for that:
Regarding “Interactive controls must not be nested”, as per my understanding, what axe-devTools is reporting is that even if tabIndex for the checkbox is set to “-1”, the assistive technologies will still focus on the checkbox. Since listBoxItem elements have the role attribute set to “option”, they are interactable for assistive technologies. However, the listBoxItem element also contains a checkbox, which is itself is an interactable element. Hence, the issue “Interactive controls must not be nested” is reported.
As per the description of the issue under “Why it matters?”, it is mentioned that “Focusable elements with an interactive control ancestor (any element that accepts user input such as button or anchor elements) are not announced by screen readers and create an empty tab stop. That is, you could tab to the element but the screen reader will not announce its name, role, or state”. However, as the focus for FlexGridFilter is programmatically handled by Wijmo, the focus cannot be shifted to the checkbox present in a listBoxItem. If a user wants to interact with the checkbox using the keyboard, then the “Space” key should be used. Since the focus will not be shifted to the checkbox, the assistive technologies will also not be able to focus on the checkbox placed within the listBoxItem element. Therefore, it can be considered “by design.
Regarding “All page content should be contained by one landmark”, it is not related to the FlexGridFilter. In this case, the customer can set the role attribute to “main” on the container of FlexGrid’s hostElement.

Regards,