search

microsoft / fluentui

Fluent UI web represents a collection of utilities, React components, and web components for building web applications.
https://react.fluentui.dev
Other
18.53k stars 2.73k forks source link

Required ARIA child role not present for Multiselect dropdown while Fastpass Accessibility is testing. #18877

Closed Renuka8796 closed 3 years ago

Renuka8796 commented 3 years ago

Environment Information: Package version(s): "@fluentui/react": "^8.22.3", Browser and OS versions: chrome and Windows 10 Describe the issue: Required ARIA child role not present for Multiselect dropdown while Fastpass Accessibility is testing.

Please provide a reproduction of the issue in a codepen: https://developer.microsoft.com/en-us/fluentui#/controls/web/dropdown

Actual behavior: Required ARIA child role not present for Multiselect dropdown while Fastpass Accessibility is testing. image

Expected: Certain ARIA roles must contain particular children.

ling1726 commented 3 years ago

This seems to violate WCAG 1.3.1. The current dropdown HTML output is a listbox wrapped around groups, which seems to be causing an issue with axe. I've tested with NVDA and Narrator, and the positions (1 of 7 etc...) are narrated correctly but in virtual cursor mode that's where you end up getting the group role and the headers.

@smhigley do you think this will cause a legitimate narration issue ?

<div role="listbox>
  <div role="group">
    <div class="header" />
    <button role="option" />
    <button role="option" />
  </div>
</div>
smhigley commented 3 years ago

This is a false positive from Accessibility Insights and axe-core. Groups are allowed children of listboxes, and really the only way to correctly mark up a listbox with, well, multiple groups of options 😉.

I did some testing, and role="listbox" + role="group" performs as well or better than the native <select> + <optgroup>, and practical SR issues are minor. I definitely wouldn't suggest changing our current semantic structure (though we should probably add role="presentation" to the header).

The external issue against axe-core is here: https://github.com/dequelabs/axe-core/issues/2523