Web Staff Client - Accessibility of Angular JS Shared Directives

[Mike Risher]

Several Angular JS shared directives are lacking accessibility, making them difficult to use with a screen reader. The following have been identified so far as needing to be addressed:

eg-basic-combobox
eg-date-input
eg-org-selector
Start / next page / previous page buttons on the autogrid.

[Mike Risher (mrisher)]

I pushed a branch that addressed the items listed in the description

https://git.evergreen-ils.org/?p=working/Evergreen.git;a=shortlog;h=refs/heads/user/mrisher/lp1887866-shared-directives-accessibility

[Terran McCanna (tmccanna)]

The aria label changes to t_autogrid.tt2 look good, but when I look at pages containing t_datetime.tt2 (such as checkin) and t_org_select.tt2 (such as patron search), I see the aria-labelledby tag but the value doesn't appear to be coming in correctly. I just see:

aria-labelledby=""

[Mike Risher (mrisher)]

Thanks for the comment, Terran. My intention was to make this particular bug focus on improving the shared Angular JS directives so that they can be made accessible. Not included in this was also also finding every place in Evergreen that these directives are in use and making those changes as well.

The work of finding every place in Evergreen that these directives are in use is included in the accessibility audit (Bug #1887857).

By doing it this way my hope was to modularize the work and make the changes incrementally. My thought was first we focus on improving the basic "building blocks" (directives), get those tested and merged, and then that opens the door to making future improvements easily. To me, this felt preferable to creating a single giant bug which touches many files spread over many areas of Evergreen. Other thoughts are welcome.

I probably should have made this more clear by giving testing instructions for this bug. Here's how my testing instructions would look:

1. Switch to the branch with my work for this bug (see comment #1 above)
2. Cherry pick some changes that use these shared directives, such as changes to patron pages accessibility. See Bug #1887869 see comment #3
3. Test both together, to confirm that the directives are now capable of being accessible.

What are your thoughts?

[Terran McCanna (tmccanna)]

Thanks, Mike, your explanation and testing instructions help a lot.

[Terran McCanna (tmccanna)]

I loaded this in conjunction with the patch for lp1887869 for testing and went through the fields with the Firefox accessibility inspector and all the label names came through correctly. Thanks! My signoff is at:

https://git.evergreen-ils.org/?p=working/Evergreen.git;a=shortlog;h=refs/heads/user/mccanna/lp1887866-shared-directives-accessibility-signoff

[Galen Charlton (gmc)]

Noting that once the merge window reopens after the May releases that I'll commit just the t_autogrid.tt2 part of it.

After consulting with Stephanie Leary, having a bunch of empty aria-labelledby attributes appear would be a problem: it would stop existing labels from being considered. Since the accessibility audit that Mike mentioned in 2020 doesn't appear to have gone anywhere, I think it would be better to not commit the orgAria/dateAria/comboBoxAria attributes.

Noting that nothing I say should be construed as discouraging a11y work on the AngularJS side (though, of course, AngularJS is increasingly going away), but I think any such improvements need to be completed in and of themselves, as investing in AngularJS _infrastructure_ is unlikely to pay off.

[Galen Charlton (gmc)]

Pushed the autogrid aria-label changes down to rel_3_9. Thanks, Mike and Terran (and Stephanie)!