Navigation block: the first navigation link inside the Overlay menu is focused, creating confusion on touch devices

[briceduclos]

Description

The first navigation link is focused when the user clicks on the hamburger icon to open the overlay menu. So on touch devices, the first link is always highlighted. I've browsed multiple recent websites with great accessibility, but I don't see this behavior on any of them. It can create confusion as it can look like a current menu.

On the screenshot below, I'm currently on the blog page, but when I open the overlay menu, the Intro link is highlighted.

Is it done on purpose for accessibility reasons? Or is it possible to turn off the focus by using the disableFocus setting of the Micromodal.
https://micromodal.vercel.app/#configuration
disableFocus boolean: Disable auto focus on first focusable element. Default is false

Step-by-step reproduction instructions

1. Using a mobile or a tablet, visit a site using a block theme (e.g. https://andersnoren.se/themes/bjork/)
2. Click on the hamburger icon.
3. Observe that the first navigation link is highlighted.

Screenshots, screen recording, code snippet

Environment info

No response

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

[joedolson]

I've been unable to find any history on why or when this pattern was chosen, but I agree that this is not how the button should act. There shouldn't be any change of focus after activating a button unless the button is no longer visible after activation.

I suggest changing this in the navigation block front-end behavior so that focus does not change on activation.

[Bovelett]

I agree with what @joedolson says and support the suggested change.