Navigation Menu Button Example needs visual/functional review

[carmacleod]

Navigation Menu Button needs a careful needs visual and functional review. Possibly also a review with screen readers.

See #353 (comment) for an idea of some of the issues in context.

The last example is very difficult for me to use. Even though I "know the rules", if I use spacebar to toggle, I forget focus is forced elsewhere and hit spacebar to close it but instead the page scrolls and now I can't see the button anymore and I can't scroll the page back up either because now I'm in the menu and my Arrows are taken. I couldn't see when I was focussed on it, so was Tabbing back and forth several times before I figured out where I was and when I was on the widget (but that's just this example missing CSS focus, not intrinsic to the pattern).

I keep expecting to be able to shift-tab back to the triggering button instead of back to the previous Tab stop on the page-- these are all because I'm guessing button behaviour is more ingrained in my fingers than aria menu stuff. That doesn't mean it's a wrong pattern, but as someone who resorts to the mouse when I can't see focus or it takes 1000 Tabs to get somewhere, my fingers and brain had the most issue with #3. It would be nice to have broad sighted-keyboard user testing on each of these patterns. The aria-menu version (#1) was easier for me to grok with my fingers than the navigation button (#3). This might also be because instead of the navigation button version, on websites I find more regular-button (with aria-expanded but usually no haspopup) + listbox.

[JAWS-test]

The alternative would be to leave the focus on the button when opening the menu. However, I don't think this is optimal. I think that after activating the button, the focus should be set to the newly displayed area (here the menu) so that further operation (especially with screen reader and for keyboard users) is possible in an efficient way.

Another problem would be that as long as the focus remains on the button, the screen reader is not in forms mode and navigation through the menu items with the arrow keys is not possible.

As a possible improvement I would see that the menu items can also be activated with spacebar. This would avoid scrolling and would also correspond to the known behavior of application menus

[jongund]

@carmacleod
There is a pull request for issue #1399 updating this example that I think is more important to review