Implement focus management in main menu

[thibaudcolas]

Issue Summary

Tabbing through Wagtail’s main menu, it should be possible to move between all visible menu items one by one, opening submenus as required. Instead, users have to tab through submenus that are closed:

The correct behavior would be:

• When submenus aren't open, users shouldn't have to tab through their menu items.
• Submenus can be opened by clicking, pressing Enter while focused; and closed with the Esc key or clicking outside
• Opening a submenu, the focus now moves to the submenu and is trapped there until closed
• Submenu triggers should use button tags instead of a, so screen readers announce the correct behavior (button instead of link), and browsers do not display a link target of "#" (see Add a "Dashboard" label for logo link in the main nav for screen reader users #5349).

Steps to Reproduce

1. Go to the Wagtail admin
2. Navigate with a keyboard through the menu items

Related: #5336

[thibaudcolas]

Added a note that we should also change submenu triggers to be button elements instead of a, both so they announce correctly to screen reader users (these are not links), and so browsers do not show the link targets for no reason (#5349).

[thibaudcolas]

Note: would be better to get #5254 in before starting work on this.

[thibaudcolas]

Additional task from #5274:

Clarify that the user is focused on the side navigation by improving the voice-over command to say ‘Navigation’, for example: ‘link, Settings list navigation, 9 items

As part of this issue, I think it makes sense to implement correct labels for each of the submenus, as well as ARIA markup so they are announced as menus (aria-haspopup="dialog", etc).

[marteki]

I'm working on this during Wagtail Sprint US 2019.

[marteki]

@thibaudcolas I'm going to take the route of using aria-expanded="false" or aria-expanded="true" to show the submenus, since the standard ARIA menu markup is meant for application menus (and not so much for navigation lists on web pages).

[fabienheureux]

@marteki is there an open PR for this issue ?
I wanted to work on it, following your approach, but if part of the work has already been done here it could be helpful 😉