Skip to content

Screen readers do not detect TagPicker #34644

Open
@Gchahm

Description

@Gchahm

Component

TagPicker

Package version

9.66.0

React version

9.66.0

Environment

System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  npmPackages:
    @fluentui/react-components: ^9.0.0 => 9.66.0 
    @types/react: ^17 => 17.0.87 
    @types/react-dom: ^17 => 17.0.26 
    react: ^18 => 18.3.1 
    react-dom: ^18 => 18.3.1

Current Behavior

Tag picker is always empty in screen readers. Bellow is a copy of what NVDA is announcing during the interaction of focusing the tag picker, pressing a, pressing enter. (selecting the first employee from the list)

Text in bold is the exact same, so for aria the picker is always blank.

Select Employees combo box collapsed editable opens list blank

a
Select Employees list
Amelie Dupont 6 of 8

Select Employees combo box collapsed editable opens list blank

Image

Expected Behavior

Bellow is how it used to work on fluent v8, it was still a bad experience because it announces blank but at least it had an aria-describedby property to the list inside the picker so it would allow the user to know that the current picker is not empty.

People Picker combo box expanded has auto complete editable blank

People Picker Suggestions available
a
Suggested contacts list
Annie Lindqvist Designer 1 of 21

People Picker combo box collapsed has auto complete editable Annie Lindqvist Remove blank

Image

Reproduction

https://react.fluentui.dev/?path=/docs/components-tagpicker--docs

Steps to reproduce

Go to https://react.fluentui.dev/?path=/docs/components-tagpicker--docs
Use NVDA in any of the pickers and see the results.

You can also see how it was previously working on v8 here https://developer.microsoft.com/en-us/fluentui#/controls/web/peoplepicker

Are you reporting an Accessibility issue?

yes

Suggested severity

Medium - Has workaround

Products/sites affected

No response

Are you willing to submit a PR to fix?

yes

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.

Metadata

Metadata

Assignees

No one assigned

    Type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions