Global header: Update navigation menu items

[ryelle]

Fixes #316, fixes #360, fixes #440, fixes #417. This updates the menu structure to match the layout in this comment: #360 (comment)

Additionally, this changes the menu behavior to "open on click", rather than hover, which avoids the duplicate menu items. Changing this required some more CSS and JS changes than expected, so it would be good to get another 👀 on that just in case.

There should be no major visual changes, the main visible difference is that now the focus goes around both the title and dropdown icon.

	Screenshot
Showcase, no menus open
Showcase, small screens
Blue header, with a menu open

To test

• Try on a sandbox or with one of the redesign projects
• The menu items should match the issue comment
• Items with submenus should have chevron icons
• Hovering over items will highlight them but not open submenus
• Clicking an item with a submenu should open the menu, not change page navigation
• Non-submenu items should behave as expected too

Try on Rosetta sites if you can sandbox.

Warning

This should not be merged until Showcase is ready to be moved to the top-level, once the new theme launches.

[adamwoodnz]

👍 Working nicely for me on Developer.

I noticed that when tabbing with my keyboard at mobile size I can focus the submenu items, eg. Extend, but can't act upon them, maybe an accessibility concern. I know it's not usual user behaviour but maybe mobile assistive technologies will focus things in a similar manner.

[ndiego]

From the screenshots, this is looking great! I will need to figure out how to set up a testing environment 😅

[ndiego]

I noticed that when tabbing with my keyboard at mobile size I can focus the submenu items, eg. Extend, but can't act upon them, maybe an accessibility concern. I know it's not usual user behaviour but maybe mobile assistive technologies will focus things in a similar manner.

In testing with the Navigation block, if you don't have a URL set for nav links with a submenu, tabbing does not focus on the nav links (in this case Extend, etc.). So I think if you remove the # and set no URL at all (here for example), the tabbing should work as expected.

[renintw]

This looks like a great enhancement! 👍

A few notes:

1. Tickets that were mentioned have been tested and appear to have no issues.
2. The comment in Navigation: Rephrase a few items, reconsider sorting #360 doesn't seem to have reached a conclusion yet. The ticket might need to remain open or the discussion could be moved to a new ticket after this PR gets merged.
3. For this commit, I've noticed the ellipsis on es.wp.org, and it works as expected.
4. Regarding Nick's comment, whether I set the URL to an empty string or delete the entire line, both tabbing and screen readers still focus on the item. Maybe I've mistaken the context or suggestion. It also doesn't seem to work by removing the URL here in the header.php directly.

[ndiego]

Regarding Nick's #458 (comment), whether I set the URL to an empty string or delete the entire line, both tabbing and screen readers still focus on the item. Maybe I've mistaken the context or suggestion. It also doesn't seem to work by removing the URL here in the header.php directly.

Looks like I was wrong. Sorry for the confusion.

[ryelle]

I noticed that when tabbing with my keyboard at mobile size I can focus the submenu items, eg. Extend, but can't act upon them, maybe an accessibility concern.

Yeah, it looks like this is a gutenbug— the mobile menu is intentionally expanded, but the semantics on the submenu toggle buttons make it seem like it's still possible to expand/collapse them. aria-expanded is initially false, and toggled on click, despite the menu always being expanded.

The comment in #360 doesn't seem to have reached a conclusion yet. The ticket might need to remain open or the discussion could be moved to a new ticket after this PR gets merged.

I think the resolution there was that Hosting should be a top-level menu item, so the discussion of a local menu on Download is not necessary.

[ndiego]

I think the resolution there was that Hosting should be a top-level menu item, so the discussion of a local menu on Download is not necessary.

Yeah, adding Hosting back as a top-level menu item makes that comment mute.