Angular: Material icon buttons without aria-label get the wrong accessible name
Affects | Status | Importance | Assigned to | Milestone | |
---|---|---|---|---|---|
Evergreen |
Confirmed
|
Undecided
|
Unassigned |
Bug Description
Steps to re-create:
1. Use Chrome or Chromium to go to a screen that contains an Angular grid.
2. Right click on the Actions For Selected Rows menu button.
3. Click Inspect Element
4. The Styles tab will likely be open. Choose the Accessibility tab instead.
5. Look at the Computed Properties area. Note that the Name is set to "playlist_
(more info about checking the accessibility tree in Chrome here: https:/
Accessible names are used by various types of assistive technologies, see https:/
This can be done by adding an appropriate aria-label to the button element. This has a higher priority than the span text or the title tag do when calculating the Accessible name.
Relevant W3C standard here (I think that the title tag that we currently have is considered a "tooltip attribute", aka the very last value to be consulted when calculating an accessible name): https:/
Related aria-label vs. title attribute cage match here: https:/
Changed in evergreen: | |
status: | New → Confirmed |
tags: | added: ux-buttons |
I have updated my branch on bug 1828575 to include ARIA changes for these buttons. Since it also involved ARIA labels in the actions toolbar, I did not want to maintain two competing branches. https:/ /git.evergreen- ils.org/ ?p=working/ Evergreen. git;a=shortlog; h=refs/ heads/user/ sleary/ 1828575- eg-grid- options- keyboard