Keep navigation block overlay open when focus in developer tools #60459
Labels
[Block] Navigation
Affects the Navigation Block
[Status] Duplicate
Used to indicate that a current issue matches an existing one and can be closed
[Type] Bug
An existing feature does not function as intended
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 thewp-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
You can use WordPress Playground and the default theme and header there to test this.
Screenshots, screen recording, code snippet
Environment info
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
The text was updated successfully, but these errors were encountered: