add_circle_outline and remove_circle_outline on catalog search results screen need aria-labels

[Jane Sandberg]

Expected behavior:
The "plus" and "minus" buttons provide a meaningful accessible name to screen readers.

Actual behavior:
When I tab to these buttons on VoiceOver, it reads the material icons ligatures, "add_circle_outline" and "remove_circle_outline"

Steps to reproduce (without a screen reader):
* In Firefox, do a search in the staff catalog
* Right-click on the plus button near your search query
* Note that in the name column, the pushbutton's name is "add_circle_outline"

To fix this, the material-icons <span>s need aria-labels that override the ligature with something more useful to users.

[Stephanie Leary (stephanieleary)]

Branch: https://git.evergreen-ils.org/?p=working/Evergreen.git;a=shortlog;h=refs/heads/user/sleary/lp2002363-aria-label-search-row-buttons

I've used the same phrases from the title attributes on the parent buttons, to allow dictation users to use those tooltips to identify the phrases they should speak to select these buttons.

To test, use the accessibility tab on your browser inspector and look for the accessible name property on the <span>s containing the icons.

[Chrystal Messam (badger85)]

Screen narrator says "add underscore circle underscore outline button"

[Stephanie Leary (stephanieleary)]

Thanks, Chrystal! I realized that I put the aria-label on the span (where it's not supported) instead of the button (where it belongs). I've fixed it and updated the branch.

[Chrystal Messam (badger85)]

I have tested this code and consent to signing off on it with my name, Chrystal Messam and my email address, <email address hidden>.

[Galen Charlton (gmc)]

Pushed down to rel_3_9. Thanks, Stephanie and Chrystal!