bug(mat-select): The selection is repeated twice (+) in screen readers #24899
Labels
Accessibility
This issue is related to accessibility (a11y)
area: material/select
P3
An issue that is relevant to core functions, but does not impede progress. Important, but not urgent
Is this a regression?
(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:
vlc-record-2022-05-09-22h00m00s-Screen.Recording.2022-05-09.at.21.39.38.mov-.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
Extra
The text was updated successfully, but these errors were encountered: