Make menus keyboard operable

[RoyEJohnson]

For: https://github.com/openstax/openstax.org/issues/2385

[Dantemss]

@TomWoodward the menu doesn't really follow the spec. Probably up to you or Erika to decide how closely we need to follow it?

On desktop:

• Menu auto-opens on hover/focus instead of waiting for space/enter/down arrow/up arrow.
• No wraparound for arrow navigation when you reach the first/last item. Up arrow also goes back to the main nav from the submenu.
• Home and end scroll the page instead of the menu. Now I'm wondering if I need to add preventDefault() for these on my PR.
• Pressing the first letter of a label for keyboard navigation doesn't work
• Esc closes the submenu but does not focus the main menu item (that would auto-open the menu again anyway since it has that behavior)
• On a submenu, Space scrolls the page a bit, does not select the menu item.

On mobile:

• Mostly the same as the desktop but menu doesn't auto-open on hover/focus.
• Both space and enter open the submenu. However, the first item of the submenu is not focused. Only enter actually selects a submenu item.
• Up and down arrow do nothing.
• Esc closes the entire hamburger menu but not the main menu item.

[Dantemss]

One interesting thing on mobile though is that the menu is no longer horizontal, it's all vertical, so I'm not sure the left/right arrows make as much sense.

[RoyEJohnson]

Note the comment where I point out that I removed the menubar roles and went with the (simpler) Disclosure pattern instead. The link there says most sites don't need the full features of the menubar. Intended navigation is tab, but I added arrows to allow moving between main menu items. I should make the arrow behavior sensible in all contexts.

[Dantemss]

OK I think most of what I said still applies, except the arrows are supposed to do different things from what I said in the disclosure pattern. I'll re-test the tabbing though since that wasn't in the other one.

[Dantemss]

Tabbing seems to work as expected in both Desktop and mobile. And the disclosure pattern doesn't need to do anything when you type a letter (no search by the first letter of the labels).

[RoyEJohnson]

I have made some adjustments so behavior is more coherent: Mobile menu is tab-navigated only. Arrows and Home/End keys are intercepted and tossed. As I understand it, arrows are optional in the Disclosure pattern.

[Dantemss]

Also the desktop version is not quite disclosure pattern because of the auto-open on hover/focus but that is acceptable I think?

[Dantemss]

Maybe that's not a thing? How do screen readers work on mobile anyway?

[Dantemss]

I suppose it would be helpful if you somehow had a tiny screen reader screen.

[RoyEJohnson]

I think the assumption is that you can hook up an external keyboard to a mobile device.

[TomWoodward]

or you might just have a tiny screen like a netbook or have it really zoomed in or something