The icon column (status-column) in the patron bills interface needs to convey its meaning to assistive technologies too

[Jane Sandberg]

In the Web client, the patron bills tab in the patron record has a particularly stylish column called status. This column contains a glyphicon icon that represents the status of the bill (a question-sign for lost, an exclamation-sign for long overdue, a clock icon for others). Unfortunately, this meaning is not available to users who use assistive technologies, including screen readers. We should -- at the very least -- put in a title attribute that includes the status. We should probably also add an aria-label.

Alternatively, we could follow FontAwesome's guidance for icons with semantic purpose here: https://fontawesome.com/v4.7.0/accessibility/ -- this wouldn't give the nice tooltip for sighted users, though, which could be helpful for those who are getting used to what these icons mean.

[Jane Sandberg (sandbergja)]

Also, the Angular client uses the title attribute approach, which results in the nice tooltip. Probably a good idea to be consistent and use the title attribute (at minimum) in the AngularJS client.

[Stephanie Leary (stephanieleary)]

This branch includes two commits, one for Angular grid flair icons and one for the patron bills icons in AngularJS. https://git.evergreen-ils.org/?p=working/Evergreen.git;a=shortlog;h=refs/heads/user/sleary/lp1818086-flair-icon-alt-text

(Edited: deleted a request to check something I have now redone and rebased.)

[Gina Monti (gmonti90)]

Trying to test this for bug squash 08/2023. Is the billing interface not working on the Mobius test server?

[Terran McCanna (tmccanna)]

Looks good to me!

My sign off is at: https://git.evergreen-ils.org/?p=working/Evergreen.git;a=shortlog;h=refs/heads/user/mccanna/lp1818086-flair-icon-alt-text-signoff

[Jane Sandberg (sandbergja)]

Thanks, Stephanie! It's working well for me with one exception. I followed the following steps:

1. Found a patron with items checked out
2. Set one of those items to lost
3. Opened the "Bills" tab for that patron
4. Asked VoiceOver to read the grid
5. VoiceOver read "Lost materials" twice!

In the elements tab of the Devtools, it seems like the aria-hidden is missing. For what it is worth, I suspect the "sanitize" feature in the AngularJS ngBindHtml directive. When I add $sce as a dependency for the PatronBillsCtrl controller and change `return "<i class[...] </span>"` to `return $sce.trustAsHtml("<i class[...] </span>")`, the aria-hidden shows up in my Devtools and VoiceOver announces "Lost materials" only once.

Why $sanitize would think "aria-hidden" is more suspicious than "class" or "title" is beyond me hahaha.

[Stephanie Leary (stephanieleary)]

Thanks, Jane! I know that I often have to prefix ARIA attributes in Angular because it thinks they're invalid. (Maddening.) Should I update the branch with your workaround, or is there another way we can teach the sanitizer to allow aria-hidden more globally?

[Jane Sandberg (sandbergja)]

Good question! Theoretically, I thought that adding this line under the "angular.module" line would add it globally for Angularjs 1.6.10 (https://code.angularjs.org/1.6.10/docs/api/ngSanitize/provider/$sanitizeProvider):

.config(['$sanitizeProvider', function($sanitizeProvider) {
    $sanitizeProvider.addValidAttrs(['aria-hidden']);
}])

But it doesn't work?

[Jane Sandberg (sandbergja)]

So maybe the workaround is better, until/unless somebody has the capacity to troubleshoot the config and $sanitizeProvider business.

[Jane Sandberg (sandbergja)]

One other note from today's testing: since it's not clear from the semantics of the AngularJS billing page that these icons live in the status column, it would be helpful for the visually hidden text to have a "Status: " prefix.

[Stephanie Leary (stephanieleary)]

I've updated this branch to add ngSanitize for the ARIA attributes as well as the "Status:" prefix on the new text labels. I have not squashed this yet, so you can review the new commits:
https://git.evergreen-ils.org/?p=working/Evergreen.git;a=shortlog;h=refs/heads/user/sleary/lp1818086-flair-icon-alt-text

[Stephanie Leary (stephanieleary)]

I should also note that we could not initially test the Angular grid flair icons using VoiceOver due to the grid ARIA role issue in bug 2038230, but now that we've fixed that bug, the icons should work in both interfaces.

For testing this bug in the Patron Bills screen, use any of the Concerto logins who have an asterisk indicating billing issues, like Gregory Jones, 99999355250. Note that the Status column icon does not necessarily match the Last Billing Type column (on by default), which may indicate a different billing issue. The icon does correspond to the Stop Fines column text, which is off by default.

[Jane Sandberg (sandbergja)]

Works great for me on voiceover. Thanks, Stephanie! Signoff branch at user/sandbergja/lp1818086-flair-icon-alt-text-signoff

[Terran McCanna (tmccanna)]

Thanks Stephanie and Jane!

Fix committed and backported as far back as 3.9

[Andrea Neiman (aneiman)]

added 3_10 LP target; 3_9 is closed in LP