LP1828468 Keyboard navigation for main navbar user/sleary/lp1828468-top-nav-tabindex
authorStephanie Leary <stephanie.leary@equinoxOLI.org>
Tue, 4 Oct 2022 20:37:23 +0000 (15:37 -0500)
committerStephanie Leary <stephanie.leary@equinoxOLI.org>
Wed, 21 Dec 2022 23:53:38 +0000 (17:53 -0600)
commit4c30a524d776b15d9a08a7a35f2a34b83f32c5dd
tree1d1ce4b85384bbc9d291dff0e68ec551ec59e3a1
parent526ac8856ea723e1b905ae65dff1ac8510900d40
LP1828468 Keyboard navigation for main navbar

In the main navbar, all items except the home icon are unreachable using
only a keyboard. This includes the logout/change operator menu on the
far right.

This is caused by the lack of an href attribute on the <a> tags, which
prevents the link from having a focus state.

This patch changes items that use (click) or routerLink from <a> to
<button> tags. Submenu items are also given the ngbDropdownItem
directive, which allows up/down arrow navigation within submenus.

Per accessibility audit findings, the outer tag is changed to <nav>.

The patch now includes new focus styling for main menu items.

To test:
1. Apply patch. Make sure your browser has keyboard navigation enabled.
2. Click somewhere near the top of the screen, or the address bar.
3. Press tab to move forward, shift+tab to move backward. Focused  menu
   items should show a lighter background and bottom border.
4. On a main nav item / dropdown toggle, press Enter or Down.
5. The dropdown should open. Press up/down to move around a submenu.
6. To exit a submenu, press Escape, or shift+tab from the first
   submenu item. (In the latter case, the submenu will not close.)
7. Submenu items that have (click) actions, like Cataloging >
   Retrieve Last Bib Record, should work when activated by pressing
   Enter as well as mouse clicking.

Signed-off-by: Stephanie Leary <stephanie.leary@equinoxOLI.org>
Open-ILS/src/eg2/src/app/staff/nav.component.css
Open-ILS/src/eg2/src/app/staff/nav.component.html