bug(mat-select): The selection is repeated twice (+) in screen readers

[dario-piotrowicz]

trafficstars

Is this a regression?

• [ ] Yes, this behavior used to work in the previous version

(I have honestly no idea)

Description

The selection of a basic mat-select gets read multiple time by screen readers, for example this is how it is presented by the chrome accessibility tree (note the two "Pizza"s there):

In voiceOver the value is actually read once as the select value and twice as the label, so it actually gets read three times as you can see here:

https://user-images.githubusercontent.com/61631103/167498553-c13866bb-ae13-4fa4-96dc-2b52e23c99b9.mp4

I believe that the issue is caused by assigning to the labelledby both the label and the first selected value, as you can see here:

(note from the video that this does not happen when using native selects)

Reproduction

Any basic mat-select seems to present this, for example the ones presented in the material docs: https://material.angular.io/components/select/overview

Expected Behavior

I would expect it to work precisely as the native select elements as that should in theory be the cleanest behavior, if not at the least I would expect the selections not to be read multiple times

Actual Behavior

the selection gets read multiple times, 2 or 3 times depending on the screen reader

Environment

• Angular: 13.3.6
• CDK/Material: 13.3.6
• Browser(s): Chrome
• Operating System (e.g. Windows, macOS, Ubuntu): Ubuntu and macOS

Extra

• I tried looking for an issue describing the same bug, but I could not find any, sorry if there is one and I missed it
• I am pretty sure this is not how it should work, sorry if I'm wrong

[GorelovNA]

any updates on this issue?

[Joeh89]

@zarend , for the fix I can suggest:

1. Replacing label tag with div tag and removing the 'for' attribute from it. 'Label' only works for native html (select and input tags), it doesn't work for mat-select even if it has a role="combobox". The 'for' attribute is creating an unnecessary link to the field since aria-labelledby already refers to the inner text of the label (hopefully changing to div) element.

2. Remove the second id in the aria-labelledby as the screen reader already is capturing the value of the dropdown through javascript.

[potremblay]

Seam like nothing, but it is pretty hard to use a form with many mat-select with VoiceOver (surcharge of information). Do we have any updates or timeline on this ?

[RobinBomkamp]

Hey there any updates?