Angular: Material icon buttons without aria-label get the wrong accessible name

Bug #1833726 reported by Jane Sandberg
10
This bug affects 2 people
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_add_check", rather than "Actions For Selected Rows".

(more info about checking the accessibility tree in Chrome here: https://developers.google.com/web/tools/chrome-devtools/accessibility/reference#pane)

Accessible names are used by various types of assistive technologies, see https://developer.paciellogroup.com/blog/2017/04/what-is-an-accessible-name/. We should have one that makes sense!

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://www.w3.org/TR/accname-1.1/#mapping_additional_nd_te
Related aria-label vs. title attribute cage match here: https://bugs.launchpad.net/evergreen/+bug/1825069

Changed in evergreen:
status: New → Confirmed
Revision history for this message
Stephanie Leary (stephanieleary) wrote :

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

tags: added: pullrequest
tags: added: ux-buttons
Revision history for this message
Terran McCanna (tmccanna) wrote :

I've confirmed this works with the patch for bug 1828575.

tags: added: signedoff
Changed in evergreen:
milestone: none → 3.11.2
Revision history for this message
Stephanie Leary (stephanieleary) wrote :

Noting that this is fixed, since the branch for bug 1828575 has been committed.

Other button/icon ARIA label issues are addressed in the branch for bug 1615714.

Revision history for this message
Andrea Neiman (aneiman) wrote :

Marking as duplicate of bug 1828575.

Changed in evergreen:
milestone: 3.11.2 → none
To post a comment you must log in.
This report contains Public information  
Everyone can see this information.

Other bug subscribers

Remote bug watches

Bug watches keep track of this bug in other bug trackers.