Comment 3 for bug 1615714

Revision history for this message
Stephanie Leary (stephanieleary) wrote :

This branch addresses every Material icon in the Angular interfaces except the grid flair icons
(bug 1818086) and the grid actions toolbar (bug 1833726), both of which have branches on their respective bugs.

https://git.evergreen-ils.org/?p=working/Evergreen.git;a=shortlog;h=refs/heads/user/sleary/lp1615714-accessible-icon-buttons

Since icons often appear in buttons, this branch also serves as a general cleanup of accessibility issues related to link-based click actions that have not been addressed in other bugs on keyboard compatibility. These links have been converted to buttons with the .btn-link class applied, which should preserve their original appearance. Please let me know if you find an unsightly button as a result of these changes, and I will adjust the styles.

I have given icon buttons have both title and ARIA label attributes, even though the text is the same. They serve two different purposes: the ARIA label is for screen readers, while the title provides a tooltip for sighted users. The latter is especially important for dictation software users, who need to know what the button's accessible name is so they can speak it. Both are provided even for buttons whose icon keyword is clear, like "close," because the label and title will be translated, and the icon keyword must not be.

While the aria-hidden attribute is redundant in buttons that have aria-label, I wanted to be consistent about using this with Material icons.