Blue rectangle around menu on mobile

[dannymekic]

Is your feature request related to a problem? Please describe. When I open the theme on a mobile phone and expand the navigation bar, a blue rectangle is visible around the "Home" menu item, even if I'm on another page (such as the "About" page, for example).

When you then click a menu item to open it, a blue rectangle appears around the entire menu.

Both a blue rectangle around a menu item other than the page that is open, and a blue rectangle around the entire menu, do not seem desirable to me.

Describe the solution you'd like It is desirable that the blue rectangle does not appear anywhere.

[kjellr]

Hi, @dannymekic thanks for the report. What you're seeing here is your browser's default focus styles. The navigation here is powered entirely by Gutenberg's Navigation block, so there's nothing the theme is doing (or probably should do) to change this.

I'm not personally aware of the thinking and development that went into the focus behavior for the menu, but @jasmussen, in case you know: Is this the expected behavior? If not, we can move this issue upstream to the Gutenberg repository.

[jasmussen]

Hey, thanks for the report, thanks for the ping! The overlay menu is technically a modal dialog which in order to be accessible comes with a few built-in behaviors, one of which is that the first interactive element inside should receive focus, which is what happens here. I'd love to see us build additional styling options for focus that both themes and users can access.

I'm curious about the focus around the entire overlay menu, though, I can't actually reproduce that. If you can find steps to repeat that running the latest Gutenberg plugin, I would very much appreciate a ticket in the Gutenberg repository. You can CC me (@jasmussen) on the ticket, and I'll take a look.

[jasmussen]

Oh I see it on Safari only now, I'll take a look:

[dannymekic]

@kjellr @jasmussen Thanks for the quick reply!

@jasmussen I am testing the theme running at the official Wordpress repository https://2022.wordpress.net/ - so I guess that the latest Gutenberg plugin is running there.

Steps to reproduce:

1. Visit https://2022.wordpress.net/ on an iPhone with Safari or Chrome
2. Press the menu-icon in the right top corner (two flat stripes)
3. The menu opens with "Home" always selected/focused, even if a different page (About, Event, Film) is opened) thus leading to confusion: the desired end state here would either be to not have any of the menu items being 'focused' or, if that's not possible, to have the menu item being 'focused' that belongs to the page currently open
4. When I click somewhere on the white area left of the menu items OR click on one of the menu items to open it, the large light blue rectangle selection area appears:

https://user-images.githubusercontent.com/19377807/148771992-e0a6d25f-0925-4cf3-8be2-f2b6558d0bc4.MP4

[carolinan]

I believe the focus is correct. It should be on the first menu item, not the current page, because if it was on the current page, users may end up with a focus in the middle of a menu and it would seem like the menu changed, which would make it more difficult to navigate.

[jasmussen]

I created a fix in https://github.com/WordPress/gutenberg/pull/37824.

[kjellr]

This was fixed upstream in https://github.com/WordPress/gutenberg/pull/37824, so I'm going to close the issue here. Thanks, everyone!