Skip link for staff interfaces

[Stephanie Leary]

As mentioned in bug 1615707, we should have a "skip to main content" link on the staff interfaces in addition to the landmarks.

Related: bug 1744629 for the OPAC.

[Stephanie Leary (stephanieleary)]

Branch with separate commits for Angular and AngularJS screens. Improvements welcome, especially on AngularJS, where focus lands on the main content container in a way that's invisible.

https://git.evergreen-ils.org/?p=working/Evergreen.git;a=shortlog;h=refs/heads/user/sleary/2017034-staff-skipnav

[Stephanie Leary (stephanieleary)]

To test:

1. If you don't have keyboard tabbing set up in your browser already, you'll need to do that first: https://wiki.evergreen-ils.org/doku.php?id=accessibility:testing#testing_keyboard_navigation
2. Open any AngularJS staff page
3. Focus on your address bar
4. Press the tab key until you get past the built-in browser buttons. The first thing you should see focused in the Evergreen screen itself is a "Skip to main content" link that is visible only when you're focused on it; when you press tab again, it should disappear.
5. If you press Enter while focused on the skip link, your focus should move past the navigation menu and onto the next element on the page, whatever that is.

[Terran McCanna (tmccanna)]

Getting merge conflicts today, added needsrebase tag.

[Stephanie Leary (stephanieleary)]

Rebased!

[Stephanie Leary (stephanieleary)]

Mike Rylander pointed out to me that the routing options changed in Angular 15, so I've updated accordingly. New branch: https://git.evergreen-ils.org/?p=working/Evergreen.git;a=shortlog;h=refs/heads/user/sleary/LP2017034-staff-skipnav

[Galen Charlton (gmc)]

Some feedback:

- (minor) Branch has merge conflicts again, albeit trivial ones
- (minor) The i18n attribute isn't needed AngularJS side
- For the AngularJS side, I think the additional CSS needs to be in style.css.tt2, not admin.css.tt2 (otherwise, the skip nav will work only in AngularJS admin interfaces)
- In both Chrome and Firefox on Win11, tabbing to the skip link on an Angular page, then hitting enter navigates to the splash page, not to the staff-banner fragment.

[Stephanie Leary (stephanieleary)]

I've found a much easier way to handle skip links in Angular using ViewportScroller instead of fussing with the router. It needed an offset to account for our fixed nav bar's height, but I like this much better.

New branch, same testing procedure (see comment #2): https://git.evergreen-ils.org/?p=working/Evergreen.git;a=shortlog;h=refs/heads/user/sleary/lp1615707-staff-skipnav-v2

[Terran McCanna (tmccanna)]

Stephanie, I think committing the fix to make the nav bar responsive (which has just been merged) is conflicting with this one. Can you please rebase?

[Stephanie Leary (stephanieleary)]

Rebased! I'm seeing lint errors from the previous commits on main, but this branch has been freshly linted.