Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
1 task
dario-piotrowicz opened this issue May 9, 2022 · 4 comments · May be fixed by #24831 or #30374
Open
1 task

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

dario-piotrowicz opened this issue May 9, 2022 · 4 comments · May be fixed by #24831 or #30374
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

Comments

@dario-piotrowicz
Copy link
Contributor

dario-piotrowicz commented May 9, 2022

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):

Screenshot at 2022-05-09 21-52-28

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:
Screenshot at 2022-05-09 21-55-13

(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
@dario-piotrowicz dario-piotrowicz added the needs triage This issue needs to be triaged by the team label May 9, 2022
@zarend zarend self-assigned this May 20, 2022
@zarend zarend added area: material/select P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent Accessibility This issue is related to accessibility (a11y) and removed needs triage This issue needs to be triaged by the team labels May 20, 2022
@GorelovNA
Copy link

any updates on this issue?

@Joeh89
Copy link

Joeh89 commented Jul 20, 2022

@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
Copy link

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
Copy link

Hey there any updates?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
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
Projects
None yet
6 participants