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

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.

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.)

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

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

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.

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?

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?

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

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.

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

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.

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

Thanks Stephanie and Jane!

Fix committed and backported as far back as 3.9

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