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.
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.