Angular staff navbar needs ARIA attribute to indicate the current page

[Stephanie Leary]

In the Angular staff main navigation menu, there is nothing to indicate which page is current. We need to add the aria-current attribute for accessibility compliance, and we can style the link differently as well if we want. We can use the RouterLinkActive directive: https://angular.io/api/router/RouterLinkActive#description

For the ARIA attribute, we will add this to each menu item link that uses routerLink:

routerLinkActive="active" ariaCurrentWhenActive="page"

This will not work on non-Angular pages, so there is no need to add these to links that use href.

[Stephanie Leary (stephanieleary)]

Here's a branch: https://git.evergreen-ils.org/?p=working/Evergreen.git;a=shortlog;h=refs/heads/user/sleary/LP2046820-angular-nav-aria-current

To test:

1. Open up an Angular screen that is listed somewhere in the main navigation, like staff/catalog/search.
2. Inspect the menu link that corresponds to your current page.
3. See if the <a> tag includes the aria-current="page" attribute, and is highlighted in pale green.

Note that this is only for Angular screens.

[Galen Charlton (gmc)]

Question about this TODO added by the patch:

+/* TODO:
+ - Eliminate the Search menu item, then add this selector to the rule above:
+ #staff-navbar .navbar-nav:has(.dropdown-item.active) .nav-link
+*/

Does this mean that you think that the top-level Search menu should be removed from the navbar? If so, why?

[Shula Link (slink-g)]

I just checked this on Butternut and the aria-current attribute is only showing up when on the staff homepage.

[Stephanie Leary (stephanieleary)]

I should note that the top-level menu item will not be highlighted, only the submenu item of the current page. (See screenshot attached.) This is, IIRC, a limitation of our routing strategy.

Galen, thanks for catching that TODO. I've updated and rebased the branch to remove it. I would like to revise the navbar to use an inline search form (https://getbootstrap.com/docs/5.2/components/navbar/#forms) with a split button to change between search types (https://getbootstrap.com/docs/5.2/components/dropdowns/#split-button), but I will file a wishlist for that separately.

[Shula Link (slink-g)]

Tested again; the highlighting and aria-current attribute are showing on Angularized links. I do have a question about the remaining non-Angular links: Are they presently following accessibility guidelines?

[Stephanie Leary (stephanieleary)]

They do not have the aria-current attribute (among other things), and we would need to use a completely different strategy for AngularJS links, since they don't use the Angular routing component.

[Shula Link (slink-g)]

Got it! Okay, it works as described. Signed off by Shula Link <email address hidden>.

https://git.evergreen-ils.org/?p=working/Evergreen.git;a=shortlog;h=refs/heads/user/slink/lp2046820_angular_nav_aria_current_signoff

[Jane Sandberg (sandbergja)]

Very nice! Confirmed that VoiceOver reads "current page" before the navbar's link to the page I am on, as long as I am on a page in the Angular client. Thanks, Stephanie and Shula. Pushed to rel_3_12 and main.