Description

When using the nav block on any mobile screen size, we always underline the first item under the hamburger menu rather than the active screen. When the menu is first opened, the first item has :focus, and there's a css rule that underlines the menu item with focus.

I suspect this is intentional to improve accessibility. It allows a visitor to tap return on the hamburger menu, open the menu, and then immediately start tabbing downward through menu items.

However, it also seems confusing that we always highlight the first item rather than the active page. As a user, I may well expect to see the current page highlighted or underlined.

I'm not sure what the best solution is here (if we deem this to be worth solving at all), but possible solutions might be:

• We could detecting the current menu page and menu item, and setting the focus to that. We'd still need a separate solution for a situation where the current page is not on the menu.
• If the goal is simply accessible navigation, we could keep the focus on the hamburger icon itself, which should allow tabbing down into mobile menu without giving the kind-of-false impression that the first item is the active page.

Step-by-step reproduction instructions

1. On any vanilla WordPress install, add a second page (lest's call it Sample Page Two) so there is more than one page in the nav menu.
2. Navigate to that page.
3. Reduce your screen size so the mobile menu with hamburger icon shows.
4. Click to open that nav menu, and you'll see that Sample Page is underline (not Sample Page Two).

Screenshots, screen recording, code snippet

Looks like this. In the following screenshot, I'm on Second sample page when I open the menu.

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