Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Keep navigation block overlay open when focus in developer tools #60459

Closed
gaambo opened this issue Apr 4, 2024 · 3 comments
Closed

Keep navigation block overlay open when focus in developer tools #60459

gaambo opened this issue Apr 4, 2024 · 3 comments
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

Comments

@gaambo
Copy link
Contributor

gaambo commented Apr 4, 2024

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

nav-block-issue-focus

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

@gaambo gaambo added the [Type] Bug An existing feature does not function as intended label Apr 4, 2024
@Mamaduka
Copy link
Member

Mamaduka commented Apr 4, 2024

This is probably a duplicate of #57603.

@gaambo
Copy link
Contributor Author

gaambo commented Apr 4, 2024

Argh, really tried to search for an existing issue and looked through the navigation block and interactivity api issues, but I didn't find it. Sorry.

@gaambo gaambo closed this as completed Apr 4, 2024
@Mamaduka
Copy link
Member

Mamaduka commented Apr 4, 2024

No worries. The issue seemed familiar because I replied to a few similar ones :)

@Mamaduka Mamaduka added [Status] Duplicate Used to indicate that a current issue matches an existing one and can be closed [Block] Navigation Affects the Navigation Block labels Apr 4, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
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
Projects
None yet
Development

No branches or pull requests

2 participants