search

carbon-design-system / carbon

A design system built by IBM
https://www.carbondesignsystem.com
Apache License 2.0
7.86k stars 1.82k forks source link

MultiSelect - DAP violations #3776

Closed marcyb1966 closed 5 years ago

marcyb1966 commented 5 years ago

DAP violations in MultiSelect component

Environment

Operating system Mac

Browser Chrome

Automated testing tool and ruleset N/A

Assistive technology used to verify DAP via the Chrome plugin

Detailed description

When running DAP against my UI, I get the following violations concerning the MultiSelect component:

  1. Use grouping roles or elements to identify related form controls (one per item in Multiselect)
  2. An interactive element/widget must have an accessible name

Related to #1, I also get the following potential violation Elements with a role attribute must have required child elements for the role

For item #1, it doesn't seem to like that the role of "listbox" on the "select_XXX_menu" div (which contains all the checkbox items in the MultiSelect). When I change role to "group", the violations (including #2) as well as the potential violation I mentioned go away. This is the changed div: image

For #2, I was able to make it go away by adding an aria-label

What version of the Carbon Design System are you using? "carbon-components": "10.4.1", "carbon-components-react": "7.4.1",

What did you expect to happen? No DAP violations with MultiSelect component

What happened instead? Got DAP errors as described above.

What WCAG 2.1 checkpoint does the issue violate? UIs must not have an DAP violations

Steps to reproduce the issue

  1. Render a UI that contains the MultiSelect component. Open the dropdown (must be open to see issues).
  2. Run DAP
  3. You will get violations mentioned in description.

Please create a reduced test case in CodeSandbox

https://codesandbox.io/s/codesandbox-z7bjp

Additional information

dakahn commented 5 years ago

tracking this in #4008 👍