components icon indicating copy to clipboard operation
components copied to clipboard

Published 20 hours ago • verified publisher icon angular

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

Open stevenswan opened this issue 3 years ago • 4 comments

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

  • Angular: 11.1.0
  • CDK/Material: 11.1.0
  • Browser(s): Firefox, Chrome
  • Operating System (e.g. Windows, macOS, Ubuntu): Windows
  • Screenreader: JAWS, NVDA

stevenswan avatar Jan 25 '21 10:01 stevenswan

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.

crisbeto avatar Jan 25 '21 19:01 crisbeto

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.

stevenswan avatar Feb 02 '21 10:02 stevenswan

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.

DJesseTaylor avatar Jan 03 '22 19:01 DJesseTaylor

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

  • test with NVDA and JAWAS and latest components version
  • double check that we're correctly implementing ARIA combobox with listbox popup https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/

Best Regards,

Zach

zarend avatar Apr 22 '24 18:04 zarend