eg-grid row selection checkboxes should have aria-labels

[Jane Sandberg]

As of 3.2.0, the eg-grids in both AngularJS and Angular have checkboxes that allow users to select a row (or all the rows). Currently, the AngularJS version has a title attribute, which is not reliably read by all screen readers, but which provides a nice tooltip. The Ang6 version does not have either a title or aria-label attribute.

These checkboxes should both have aria-label elements, so that screen reader users can know what the checkboxes do. It would be great to add a title attributes to the ang6 one too, to create the tooltip.

[Jane Sandberg (sandbergja)]

Actually, it seems like this is a bit more complex than I thought at first. When the row is already selected, this checkbox should actually be labeled as "Un-select row" (or something similar) in both Angular and AngularJS. The AngularJS client currently isn't toggling that title attribute between "Select row" and "Un-select row".

[Jane Sandberg (sandbergja)]

I created a branch for this called user/sandbergja/lp1796936_label_grid_checkboxes

Here's a link: https://git.evergreen-ils.org/?p=working/Evergreen.git;a=shortlog;h=refs/heads/user/sandbergja/lp1796936_label_grid_checkboxes

I decided to keep it simple (especially since Angular doesn't allow ICU messages in attributes: https://github.com/angular/angular/issues/21615). Each row's checkbox has an aria-label like "Row 12". The header row's checkbox has an aria-label like "All rows". Saying select or unselect should be redundant, since it is a checkbox.

Let me know what you think!

[Galen Charlton (gmc)]

Works for me. Pushed to master and rel_3_3. Thanks, Jane!