ChromeOS ChromeVox does not voice selected status of mat-option in multiple selection mat-select

[Zorrow2008]

🐞 bug report

Is this a regression?

Not that we're aware of.

Description

ChromeVox screenreader on ChromeOS does not voice the selected status of a mat-option in a multiple selection mat-select when you tab over a selected item.

🔬 Minimal Reproduction

0. Enable ChromeVox on ChromeOS machine
1. Visit https://material.angular.io/components/select/overview#multiple-selection
2. Go to multiple selection example
3. Select on mat-select box
4. Using keyboard navigation, tab through items and select one
5. Tab away and tab back to selected item and notice how Chromevox does not voice that this item is currently selected.

🌍 Your Environment

ChromeOS, built-in ChromeVox screenreader

Anything else relevant?
This issue is present on ChromeOS machines.

[crisbeto]

I wasn't able to reproduce it with the Screen Reader extension for Chrome so we'll have to investigate this on a ChromeOS device.

[chrisbubernak]

+1, I'm seeing this same issue. For me it repros on jaws & chromevox but not on voice over. Additionally, the issue does not repro on the checkbox demo - only the multi select. Even more interesting is that unchecked options are announced as "un-selected" but checked options give no status.

Investigating a little bit I think the issue is that mat-checkbox has an under the hood with aria-checked where as the psuedo checkbox does not. The mat-option adds an aria-selected attribute in multiselect mode and I think the different SRs handle this differently. VO seems to announce aria-selected value all the time and the others seem to only announce aria-selected value if the option is not selected.

I think a possible fix for this would be to additionally add aria-checked to options for multiselects as this property seems to be supported for the option role [1]. WDYT? I'm happy to put together a PR for this.

[1] https://www.digitala11y.com/option-role/

[zarend]

Hello @Zorrow2008 ,

Thank you for reporting this issue. I cannot reproduce, and this issue may have been fixed. On ChromeOS, ChromeVox screen reader reads unselected options as "Not Selected". The screen reader chooses not to announces the selected options as "Selected". It's still discernable to the user which items are selected because they don't read "not selected". This seems to be how ChomreVox chooses to implement it. The select component correctly communicated the selected state using aria-selected="true" and aria-selected="false".

I will go ahead and close this as it is working as intended now.

-Zach

[angular-automatic-lock-bot]

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.}