Header: Switch to submenu blocks for navigation items with submenus

[ryelle]

Fixes #207 - Menu items with submenus should use the navigation-submenu block, this provides the expected markup for accessibility:

• Submenus don't open on focus.
• Items with a submenu (Support & Get Involved) have buttons following that say "Support submenu"/"Get Involved submenu".
• The button has aria-expanded="false" by default, and true when open

The remaining item on the list in #207 is this:

If inside a sub menu, pressing Escape should close the sub menu and move focus to the trigger that opened it.

This menu doesn't seem to do that, but this doesn't seem to be core behavior either. I'd recommend opening an issue in gutenberg for the navigation block if this is required.

Props @alexstine.

Screenshots

In both of the videos below, I tab through the menu. In "before" you can see I tab down into the submenus with no other action. After, I need to activate the 🔽 button. There's no visual change, and no change in behavior with a mouse.

before.mp4

after.mp4

Before	After

[StevenDufresne]

When the menu is truncated, the submenu is not reachable:

menu-updates.mp4

[StevenDufresne]

I think this is a typo: $output maybe?

[ryelle]

🤦🏻

[alexstine]

Thanks @ryelle ! I opened a PR upstream in Gutenberg which should fix up Escape key functionality.

[ryelle]

When the menu is truncated, the submenu is not reachable

Ah, I bet when the menu item is cloned, the toggle looses the event listener. I've updated the style on submenus in the overflow menu so they'll always display to work around that. Also because 3rd-level flyouts are awkward :)

I also updated the ... link when the menu is truncated to be a button and use the same toggle-on-hover/click pattern. This fixes an issue where screen readers would just announce the link as "dot" (at least, VoiceOver did), now it's "More menu" with the expanded context.

[StevenDufresne]

Great, looks good.