Description

When wanting to style the responsive navigation overlay on the frontend, it's very hard to use developer tools (e.g. to see the HTML structure, see applied classes, apply styles in devtools for quick tests, ...), because as soon as the navigation loses its focus, the navigation is hidden again.
That makes styling the nav block very hard, or at least it doesn't make quick prototyping/debugging easy.

It's probably because of data-wp-on--focusout="actions.handleMenuFocusout" interactivity API attribute of the wp-block-navigation__responsive-container. And I'm not quite sure how a solution for this, that keeps the menu accessible, should look. I know a lot of alpinejs examples use click.away click.outside - but focus is probably more accessible than just click handling.

Developer tools are just an example that set focus to another thing. There may be other things like screenreader utilities etc?

Step-by-step reproduction instructions

1. Open a site with a block theme and navigation block used in header
2. Navigation block must have set "overlay menu" to mobile
3. Open the developer tools of the browser and switch to device preview mode for mobile devices
4. Open the navigation menu
5. Right click on any item inside the navigation block and click "inspect" to see the element in dev tools inspector
6. The menu is closed again

You can use WordPress Playground and the default theme and header there to test this.

Screenshots, screen recording, code snippet

Environment info

• WordPress 6.5
• Gutenberg 18.0
• Firefox 124 / Chrome 123
• Windows 11

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