The navigation block is difficult to locate and use with a screen reader

[carolinan]

Description

This issue refers to the markup of the navigation block on the front of the website.
During the testing, the navigation block setting "overlay menu" is set to mobile which is the default.

When you use a screen reader to navigate between the elements on the page, the markup of the navigation block is unexpected and confusing.
The list appears to be inside a dialog, and there is no information about if the dialog is opened or closed.
On desktop width, there is no button to perform an action (like closing the dialog) because the button is hidden.

Quoting a report by @alexstine on WordPress slack:
When navigating with arrow keys:
"It seems like you cannot enter the desktop menu because there is no button to focus the dialog or close the dialog."
"How are users supposed to enter and exit the dialog?"

When tabbing:
"In desktop mode, I can tab in to the dialog. The dialog does not have aria-hidden="true"."
"In mobile mode, I get the Open menu button and get placed inside the dialog."

Alex also reported that on the staging site for Twenty Twenty-Two, the result is different compared to his local environment and he is unable to locate the menu in the header:
"This is what I hear on the page.
Skip to content
My WordPress Site
Hello world!"

---

Using NVDA (factory default settings) and Chrome on Windows, NVDA announces the following when I reach the navigation block:
Navigation landmark
Dialog

If I press enter once I hear the first "dialog", the word dialog is repeated two more times:
navigation landmark
dialog (enter)
dialog
dialog
visited link Link text

Or in case of a page list with a submenu:
navigation landmark
dialog (enter)
dialog
dialog
button Menu item name collapsed

Step-by-step reproduction instructions

1. Add navigation blocks, try a few different settings and block types, but do not enable "overlay menu, always".
2. Test the menus with a screen reader on the front of the website.

Are you able to locate the menu, access the menu items, open and close submenus?

Screenshots, screen recording, code snippet

No response

Environment info

-WordPress trunk
-Current Gutenberg trunk
Tested with Twenty Twenty-two.

Chrome, Windows 10, NVDA.

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[ryelle]

I've also noticed an issue where VoiceOver gets trapped in the nav (WordPress/wporg-mu-plugins#29), making it seem like the nav is the only thing on the page. I can't navigate to anything else, even the rotor link list only lists out the menu items, etc. My best guess is something about the dialog role makes VoiceOver think that everything else on the page should be hidden.

I can reproduce this in TT1 Blocks and Twenty Twenty-Two, when the menu is set to "Overlay Menu: Mobile".

The PR #36617 seems to fix this issue as well.

[talldan]

I found this issue a little bit hard to follow when testing #37434. It'd be good to have some clearer sets of steps to reproduce for each problem.

Once thing I noticed is that in the editor, once the dialogue is open keyboard navigation doesn't seem intuitive. It's a vertical menu, but horizontal arrow keys seems the best way to navigate:

1. Set the block to Overlay Menu - Always.
2. Open the overlay menu
3. Try using up/down arrow keys, notice that it's possible to navigate between blocks in the menu, but hard to get back to the close button
4. Repeat the steps, but instead use left/right arrow keys. It's now possible to get back to the close button. If you press the arrow keys too many times then it becomes unclear where focus ends up, it seems to leave the dialog.