Angular webclient navbar doesn't work with keyboard navigation

[Jane Sandberg]

In the Angular webclient navbar, the menus (e.g. Cataloging, Booking, Search) are not focusable. The entries within those menus are all <a>s with href attributes, which focus just fine. Unfortunately, keyboard users can't get to them, since they can't focus and expand the menus themselves. :-(

[Jane Sandberg (sandbergja)]

It might also be nice to be able to use the left and right arrows to move between menus.

[Lynn Floyd (lfloyd)]

The menu also does not allow you to collapse a menu to go backwards and forwards through the menu system.

Once you open them menus, there is not a way to close them to move on.

[Galen Charlton (gmc)]

Updating to ng-bootstrap 4.1.0 or later should help with this, as that adds the ngbDropdownItem directive to specify that a dropdown menu item should be keyboard navigable.

[Stephanie Leary (stephanieleary)]

Patch to enable keyboard navigation and up/down arrow movement as well as the tab key in submenus: https://git.evergreen-ils.org/?p=working/Evergreen.git;a=shortlog;h=refs/heads/user/sleary/keyboard-nav

[Stephanie Leary (stephanieleary)]

I've updated this working branch to fix keyboard navigation for the search result pagination links as well as the main menu.

[Stephanie Leary (stephanieleary)]

I'm removing the commit relating to pagination and will file a separate bug for that. This branch contains only the fix for the main navigation menu:
https://git.evergreen-ils.org/?p=working/Evergreen.git;a=shortlog;h=refs/heads/user/sleary/lp1828468-top-nav-tabindex

[Stephanie Leary (stephanieleary)]

Rebased for bug squashing.

[Jane Sandberg (sandbergja)]

Thanks for the patch, Stephanie. +1 to getting the navbar into the <nav> landmark. The a.ngbdropdowntoggle elements are definitely in the focus order now, but I can't seem to activate them with the enter key. In other words, I can tab to, say, Acquisitions, but when I press enter, it doesn't expand the Acquisitions menu.

[Stephanie Leary (stephanieleary)]

I've just updated the branch. The commit message includes testing instructions, since Bootstrap's keyboard support for dropdowns is a little sparse--closing a submenu could be better, for example. I think we could improve on it, but this provides the basics.

[Galen Charlton (gmc)]

A couple observations upon initial review of the patch:

- Overall, it's working well for me
- Because of code drift, the "Circulation (Experimental)" menu now needs the same markup changes
- Nitpick: the highlighting when the Cataloging -> Retrieve Last Bib Record menu item has focus is different from the other menu items

Also, a note for anybody else who test this: the proposed patch is _only_ for the Angular navbar; if you've got an AngularJS interface up, the navbar won't let you expand the top-level menus by keyboard action alone.

[Terran McCanna (tmccanna)]

Removing pullrequest pending changes in comment #10. I personally wouldn't have a problem if the AngularJS navbar fixes were pushed to another new bug in order to go ahead and get these Angular changes committed.

[Stephanie Leary (stephanieleary)]

Revised branch here: https://git.evergreen-ils.org/?p=working/Evergreen.git;a=shortlog;h=refs/heads/user/sleary/lp1828468-top-nav-revised

This is still Angular only, and uses the built-in Bootstrap dropdown keyboard functionality, which isn't entirely complete.

To recap what is and is not supported:

* You should be able to use the Tab key to move between the top-level menu items. The left/right arrow keys will not work here.
* Pressing Enter, Space, or the down arrow on a top-level item should open its submenu. Pressing Esc will close it. (Up arrow will not, which I find frustrating.)
* You can also shift-tab from the first submenu item back to the top level, and use Enter or Space to toggle the button again and close the submenu.
* Within the submenu, you can use either Tab and shift-Tab to move up and down, or the up/down arrow keys.
* Both buttons (e.g. Retrieve Last Bib Record) and links should be highlighted the same way.

We can add additional key events if we want, but we'll have to write them.

I had hoped to get the submenus marked up as unordered lists, which would add a little context for screen reader users, but I can't get the keyboard directives working when there are other elements in between the menu and the menu items. I'll file a bug with ng-Bootstrap about it.

[Terran McCanna (tmccanna)]

I'm getting multiple conflicts when I try to apply this to current master.

[Stephanie Leary (stephanieleary)]

Rebased. Thanks, Terran!

[Blake GH (bmagic)]

Merge conflict today (feedback fest)

[Stephanie Leary (stephanieleary)]

Rebased just now; should be up to date with the max patron conditionals added in bug 1901072.

[Michele Morgan (mmorgan)]

This looks good to me. I'm adding my signoff along with a release note pulled from Stephanie's comments. Branch is here:

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

user/mmorgan/lp1828468_angular_navbar_keyboard_navigation_signoff

[Galen Charlton (gmc)]

Pushed down to rel_3_11. Thanks, Stephanie and Michele!