microsoft / fluentui

Fluent UI web represents a collection of utilities, React components, and web components for building web applications.

Home Page:https://react.fluentui.dev

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

[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

Screenshot (7)

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.