VoiceOver and Navigation Block (Responsive Menu): Empty Navigation

[TeBenachi]

Description

This is an issue with Firefox. When the navigation is set as a responsive menu, VoiceOver reads it as "Empty Navigation" and doesn’t read each link. When the navigation is not responsive, VoiceOver works as expected.

Step-by-step reproduction instructions

1. On the Site Editor, add a Navigation Block and select the Start Empty option.
2. Use the Custom Link Block to add links.
3. In the sidebar settings, under the Displaying settings, enable the responsive menu.
4. Save and view the website.
5. While the VoiceOver is on, move focus to the navigation menu using the Tab key.

Screenshots, screen recording, code snippet

VoiceOver reads as "empty navigation."

The accessibility tool shows ARIA alerts with aria-hidden="true" on the menu links.

Environment info

• WordPress 5.8.1 Gutenberg v11.5.1
• Firefox 92.0.1 on macOS Big Sur

No VoiceOver issue on Chrome and Safari, however the accessibility tool shows ARIA alerts on all browsers, Firefox, Chrome and Safari on MacOS.

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

[tellthemachines]

This was likely caused by the aria-hidden on the responsive container, and if so it should have been fixed by #36292. @TeBenachi could you check with Gutenberg 11.9 if you can still reproduce it?

[TeBenachi]

Thank you so much for the updates!

I can confirm the screen reader does not announce “empty” any longer, but it now reads “dialog” instead. I'm wondering if it's possible to have the screen reader read “Main navigation” or something similar to indicate these links are navigation menu. Some screen reader users might think the link will open a modal.

I’ve tested using WP 5.8.2 + GB 11.9.1 on FireFox on Mac.

[tellthemachines]

Ah, that's another bug. It should be fixed by #36617.

[Mamaduka]

I think this was fixed via #37434.

[tellthemachines]

I'm going to close this one as fixed, because the Navigation block is no longer a dialog by default. @TeBenachi feel free to reopen or create other issues if you feel the experience isn't quite right yet!