search

angular / components

Component infrastructure and Material Design components for Angular
https://material.angular.io
MIT License
24.32k stars 6.73k forks source link

[Autocomplete] VoiceOver doesn't read index for options when using optgroup #19798

Closed bq007 closed 1 year ago

bq007 commented 4 years ago

Bug

**Demo URL (required)***:
Angular Material demos for mat autocomplete. https://material.angular.io/components/autocomplete/examples

Detailed Reproduction Steps

  1. Enable VoiceOver screen reader.
  2. Open the angular demo for mat-autocomplete in angular material in chrome. https://material.angular.io/components/autocomplete/examples
  3. Pick one of the examples and trigger the autocomplete option drop-list.
  4. Use the keyboard to move between different options and listen to screen reader.

Explain the expected behavior

The VoiceOver screen reader should announce the index of each option.

Explain the current behavior

The VoiceOver screen reader only announces the option label + "clickable" without index.

Discuss the use-case or motivation for changing the existing behavior

This feature to impacts user accessibility experience.

List the affected versions of AngularJS, Material, OS, and browsers

Add anything else we should know

Adding roles described in https://www.w3.org/TR/wai-aria-practices/examples/combobox/aria1.0pattern/combobox-autocomplete-both.html does not fix the issue.

Splaktar commented 4 years ago

Please submit Angular Material and CDK questions here and issues here. This repo is for AngularJS Material.

I have transferred this issue to the correct repository for you.

crisbeto commented 4 years ago

VoiceOver reads out "

bq007 commented 4 years ago

VoiceOver reads out " (X of 4)" for me so it seems to be working. Are you seeing it on a specific example or on all of them?

Hi crisbeto, Did you test on examples in https://material.angular.io/components/autocomplete/examples ? None the examples is voicing the index of options by VoiceOver for me. Do you have any advice? Thanks.

crisbeto commented 4 years ago

When I was testing this I was still on an older version of MacOS. I recently updated to Catalina and it doesn't seem to be announcing it anymore.

jelbourn commented 3 years ago

I just tested this with the latest version of everything and the index is always read except when using optgroup. I can see the index appearing the VoiceOver's text pop-up for a fraction of a second, then it disappears.

zarend commented 1 year ago

I just tested this with the latest version of everything and the index is always read except when using optgroup. I can see the index appearing the VoiceOver's text pop-up for a fraction of a second, then it disappears.

Hello folks,

I'm getting the same behavior as reported by Jeremy in Nov 2020. I turned on captions for my screenreader so we can read what it's narrating. At first it flashes saying three things: the name of the option, position in set, and that it's selected. Then it quickly changes to saying only the name option. It happens really fast, but here is a video recording of the reproduction.

https://user-images.githubusercontent.com/7720245/215910763-0f3b195c-2c9d-4424-b4ca-ec55421db33e.mov

Environment

There is a node in the a11y that is child of each option. My best guess of what's happening is that something is confusing voiceover and causing it to move focus from the option node in the a11y to the StaticText node. A possible cause is because the option node has an aria-labelledby that points to the StaticText node inside of it. That relation might be confusing VoiceOver.

image

-Zach

angular-automatic-lock-bot[bot] commented 1 year ago

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.