Web Staff Client - accessibility and button names

Here are two more examples I found through grepping for buttons that contain no text, aria-label attribute, or title attribute.

Administration interface
* [X] buttons in Administration > Workstation Administration > Stored Preferences

Throughout the Web client
* downward caret icon that toggles the column picker dropdown

As far as solutions go, I happened to notice a text-less button that seems really nicely labeled for a screen-reader. In the MARC Editor, there are buttons that open up the authority linking interface. Each of these <button> tags has a nice aria-label attribute "Manage authority record links". I'm away from my computer with NVDA on it, but I suspect that this would be very helpful to folks using NVDA with various browsers.

Side note: some of these buttons might also benefit from a title attribute, which would provide some explanation of the button when a user hovers their mouse over it. As an example, I didn't intuitively grasp the purpose of the title picker downward caret button the first time I saw the Web client.

This was cited as an issue with "critical" level of impact when the web client was audited this year. See here: https://wiki.evergreen-ils.org/doku.php?id=accessibility:webclient_audit

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.

I've pushed an additional commit to this branch with new button, link, and icon demos for the Sandbox. There are four accessible examples and four bad examples, with some additional commentary in the HTML comments.

There are several conflicts in the same file against main branch today. I didn't want to try and resolve them for fear of getting it wrong.

Branch updated!

I've tabbed through the entire Patron Edit screen on terran-main with JAWS. Everything appears to read fine except for the Survey section at the very bottom. It reads New Address fine, then goes straight to the menus without reading "Surveys", "Do you like cheese", etc.

Thanks, Keith! Since those survey inputs are handled in the soon-to-be-replaced Circulation module, I'm going to open a separate ticket to address them.

Thanks for this patch, Stephanie! Today, we reviewed this and it looked great! The only issue we noticed was the basket icon on the catalog search page, which is marked as aria-hidden, but should actually reveal to assistive technologies that it is a basket.

We looked at this branch during today's code review session and spotted a missing text label for the catalog basket icon. I've updated and rebased the branch.

Thanks, Stephanie! I've added my signoff here: user/sandbergja/lp1615714-accessible-icon-buttons-signoff

Signed off by Garry, Terran, and Steven too! Pushed to rel_3_11 and main. Thanks, Stephanie!

This did not backport cleanly onto rel_3_10, and it also uses a different version of bootstrap that does not have the .visually-hidden class, so we did not attempt to backport it that far.