fix(material/select): NVDA reading out table when opening select on Chrome #21492
Conversation
…hrome The `mat-select` trigger element has an `aria-owns` pointing to the overlay and `display: inline-table` in its CSS. The combination of these two causes Chrome to infer the element as a `table` which results in NVDA reading out "table" any time a select is opened. These changes resolve the issue by setting the element to `role="presentation"`. I've tested out the change against NVDA and VoiceOver and it doesn't seem to affect the accessibility of the select, apart from the "table" not being read out anymore. Fixes angular#21480.
crisbeto
added
P3
google-cla
bot
added
the
cla: yes
| --> | ||
| <div cdk-overlay-origin | ||
| [attr.aria-owns]="panelOpen ? id + '-panel' : null" | ||
| role="presentation" |
There was a problem hiding this comment.
@crisbeto It seems axe is not happy that this has both role=presentation and aria-owns
There was a problem hiding this comment.
Do we have the option of excluding it? I don't get the error when running the axe extension locally so it's either an old version or an option that people have to opt into. The alternative would be to remove the display: inline-table from the CSS, but I suspect that'll cause a bunch of screenshot diff failures instead.
There was a problem hiding this comment.
This is the rule that's triggered: https://dequeuniversity.com/rules/axe/4.1/presentation-role-conflict. It's listed as a minor thing, so I'm guessing maybe the app has stricter rules enabled than we do
|
Closing in favor of #23446. |
|
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. |
The
mat-selecttrigger element has anaria-ownspointing to the overlay anddisplay: inline-tablein its CSS. The combination of these two causes Chrome to infer the element as atablewhich results in NVDA reading out "table" any time a select is opened.These changes resolve the issue by setting the element to
role="presentation". I've tested out the change against NVDA and VoiceOver and it doesn't seem to affect the accessibility of the select, apart from the "table" not being read out anymore.Fixes #21480.
For reference, here's what Chrome's constructed a11y node looks like at the moment (note the
LayoutTable).