fix(material/core): mat-optgroup labels are read twice during screen-reader page navigation #21858
Conversation
google-cla
bot
added
the
cla: yes
axverma
changed the title
Also spent some time testing it with a screen reader and didn't notice any issues.
| @@ -1,2 +1,2 @@ | |||
| <label class="mat-optgroup-label" [id]="_labelId">{{ label }} <ng-content></ng-content></label> | |||
| <span class="mat-optgroup-label" aria-hidden="true" [id]="_labelId">{{ label }} <ng-content></ng-content></span> | |||
There was a problem hiding this comment.
The same fix will have to be applied to the MDC-based option group in src/material-experimental/mdc-core/option/optgroup.html.
There was a problem hiding this comment.
Added the changes to src/material-experimental/mdc-core/option/optgroup.html.
I described the a11y issues I saw in #21847 (with ChromeVox and with VoiceOver + Chrome). I believe removing the group labels from the a11y tree would stop the double-reading in these cases without impacting browsers that do not have this issue. I could provide some screen recordings if that would help.
…reader page navigation. Fixed by adding aria-hidden="true" to the <label> elements. While screenreaders will still announce the label text for the group they will skip over the actual label element. Additionally, changed the <label> to a <span> to make it clear that the text is visual only.
crisbeto
added
a11y
…reader page navigation. (#21858) Fixed by adding aria-hidden="true" to the <label> elements. While screenreaders will still announce the label text for the group they will skip over the actual label element. Additionally, changed the <label> to a <span> to make it clear that the text is visual only. Co-authored-by: Akshay Verma <vakshay@google.com> (cherry picked from commit ca37709)
|
This issue has been automatically locked due to inactivity. Read more about our automatic conversation locking policy. This action has been performed automatically by a bot. |
Fixed by adding aria-hidden="true" to the elements, so that while screenreaders will still announce the label text for the group (due to the aria-labelledby property on mat-optgroup), they will skip over the actual label element. Additionally, changed the label to a span to make it clear that the text is visual only and not carrying any special semantic meaning for the a11y tree.
Fixes #21857