[Bug]: Tag picker Inline suggestion accessibility issue
thisiskrishna opened this issue · comments
Library
React / v8 (@fluentui/react)
System Info
import { TagPicker, ITag } from '@fluentui/react/lib/Pickers';
Are you reporting Accessibility issue?
yes
Reproduction
https://developer.microsoft.com/en-us/fluentui#/controls/web/pickers
Bug Description
Actual Behavior
elements with an ARIA role don't have child roles contain them
Expected Behavior
Ensures elements with an ARIA role that require child roles contain them
Logs
Title: WCAG 1.3.1: Ensures elements with an ARIA role that require child roles contain them (#suggestion-list-id__313)
Tags: Accessibility, WCAG 1.3.1, aria-required-children
Issue: Ensures elements with an ARIA role that require child roles contain them (aria-required-children - https://accessibilityinsights.io/info-examples/web/aria-required-children)
Target application: Fluent UI - Controls - React - Pickers - https://developer.microsoft.com/en-us/fluentui#/controls/web/pickers
Element path: #suggestion-list-id__313
Snippet: <div class="ms-Suggestions root-414" aria-label="Suggested colors" id="suggestion-list-id__313" role="listbox">
Related paths:
div[role="status"]
How to fix:
Fix any of the following:
Element has children which are not allowed: [role=status]
Element uses aria-busy="true" while showing a loader
Environment: Microsoft Edge version 126.0.0.0
====
This accessibility issue was found using Accessibility Insights for Web 2.43.0 (axe-core 4.8.4), a tool that helps find and fix accessibility issues. Get more information & download this tool at http://aka.ms/AccessibilityInsights.
Requested priority
Normal
Products/sites affected
No response
Are you willing to submit a PR to fix?
no
Validations
- Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
- The provided reproduction is a minimal reproducible example of the bug.
We use that visually hidden element to provide screen reader announcements about updates to the list of matching suggestions, when relevant.
Since that element never receives focus or is otherwise interactable or navigable, there is no user-facing issue resulting from the role structure. If you have an open bug on this for your product, I'd suggest just closing it as by design.
As a side note, since Fluent v9 takes a different approach to live region announcements, this issue does not exist in the v9 Combobox or TagPicker :).
Because this issue is marked as by design and has not had activity for over 3 days, we're automatically closing it for house-keeping purposes.