search

angular / components

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

bug(MatAutoComplete): mat-autocomplete doesn't always announce when the results have changed while using a screenreader #21684

Open stevenswan opened 3 years ago

stevenswan commented 3 years ago

Reproduction

Use the first example from https://material.angular.io/components/autocomplete/examples Using NVDA or JAWS as the screen reader

Steps to reproduce:

  1. Using the first example click the input (screen reader announces 1 of 3)
  2. type in 't' (screen reader announces 1 of 2)
  3. type in 'th' (scren reader announces 1 of 1)
  4. type in 'tw' (screen reader announces nothing)
  5. type in 'o' (screen reader announces nothing)

Expected Behavior

I would expect the screen reader to announce for step 4 that "two 1 of 1" is the only option available and similar behaviour with step 5 where one should be the only option.

Actual Behavior

For steps 4 and 5 nothing is announced by the screen reader.

Environment

crisbeto commented 3 years ago

I think the problem is that when you go from t to tw the active option doesn't change, which means that the aria-activedescendant won't change, which in turn won't be announced by the screen reader. I'm not sure that we can do much about it, aside from some hacky solutions like temporarily clearing and re-adding the aria-activedescendant.

stevenswan commented 3 years ago

I worked around this by using the LiveAnnouncer in the CDK. I hooked it up to announce the items available when the value changes on the autocomplete.

DJesseTaylor commented 2 years ago

I believe also related to this issue, if the options are filter down to a single option the screen reader can't read the option with the arrow key because the selected option doesn't change.

zarend commented 6 months ago

Hello folks,

Thank you for reporting this Screen Reader behavior. This may be just how JAWS and NVDA work. There may be nothing we can do, but action item is to investigate.

Actions items here