[a11y]: MultiSelect - The descendent <div> element with "option" role has no focusable child element

[Laureen-Ginier]

Package

carbon-components-react

Browser

Chrome, Firefox

Operating System

MacOS

Package version

v7.52.x (~7.52.0)

React version

v17.x.x (^17.0.2)

Automated testing tool and ruleset

IBM Equal Access Accessibility Checker - Latest Deployment

Assistive technology

No response

Description

1. Go to the MultiSelect default storybook
2. Open the MultiSelect (use inspect element on one of the entry to open DevTools without closing the menu)
3. Scan with IBM Equal Access Accessibility Checker (while the MultiSelect is opened)
4. You get the following accessibility violation:
   • 2.1.1 Keyboard: The descendent <div> element with "option" role has no focusable child element

The error comes from the fact that the div that encompasses the different values has tabindex="-1" and the children elements don't define tabindex so they are considered not focusable by the accessibility checker.

Note: I'm still able to navigate through the elements using keyboard.

WCAG 2.1 Violation

Criterion 2.1.1: Keyboard

CodeSandbox example

https://react.carbondesignsystem.com/?path=/story/components-multiselect--default

Steps to reproduce

I'm not able to reproduce from the CodeSandbox, I don't understand why... but the storybook does have the same error we have.

1. Go to the MultiSelect default storybook
2. Open the MultiSelect (use inspect element on one of the entry to open DevTools without closing the menu)
3. Scan with IBM Equal Access Accessibility Checker (while the MultiSelect is opened)
4. You get the following accessibility violation:
   • 2.1.1 Keyboard: The descendent <div> element with "option" role has no focusable child element

Code of Conduct

• [X] I agree to follow this project's Code of Conduct
• [X] I checked the current issues for duplicate problems

[tay1orjones]

@tombrunet We are seeing the error on this, but is this a bug with the checker? The items are still navigable, though it is of note the activedescendant attribute isn't placed on the children until they're hovered/focused. Maybe this is why the checker is failing this state?

[Laureen-Ginier]

Hello @tay1orjones and @tombrunet, have you any idea whether this issue is a false positive? We lowered the severity of the bug on our side as the items are still navigable using keyboard. But it is monitored and cannot be closed as is. Thanks

[tombrunet]

I think the issue is that the listbox is in the accessibility tree with no content when the dropdown is closed. When closed, that listbox element should be visibility:hidden.

[dakahn]

@tombrunet even with the listbox in the accessibility tree--if its not accessible via keyboard or screen reader isn't it as good as hidden? Under what circumstance could the user possibly see it?