Navigation sub menus not totally accessible via the keyboard

[alexstine]

While viewing a site such as https://make.wordpress.org, the main navigation contains sub menus. An example of such sub menu is Support. It has Documentation and Forums links contained within.

Here are the issues that need to be fixed to make the sub menus accessible.

1. Sub menus should not open on focus. This can become some super confusing UX to hear you have been thrown in to a new list of links.
2. If Support has a sub menu, there should be a button directly after the Support link that says Open Support Sub Menu.
3. The above button should receive aria-expanded="false" as the default and toggle to true when the sub menu is visible.
4. If inside a sub menu, pressing Escape should close the sub menu and move focus to the trigger that opened it.

Thanks to @courtneyr-dev for letting me know about the sub menus. I otherwise would have missed this unless I somehow found it by mistake.

[dd32]

Unfortunately, it looks like the menu markup is coming from Gutenberg. We do dynamically generate the block content, but that's just creating a series of wp:navigation-link blocks nested within a wp:navigation block. I've not looked at the source Gutenberg generates, but I suspect this is an upstream issue more than a WordPress.org-specific one.

Here's the list of the Navigation block issues tagged accessibility, I don't see anything about Submenu's there - which doesn't help me figure it out :)

https://github.com/WordPress/gutenberg/issues?q=is%3Aopen+is%3Aissue+label%3A%22Accessibility+%28a11y%29%22+label%3A%22%5BBlock%5D+Navigation%22

[ryelle]

I think if we switch to using the navigation-submenu block instead of navigation-link for these top-level items, we'll get the menu & toggle button functionality.

[alexstine]

Confirmed. This is not a Gutenberg issue in default usage.