Navigation: Explore clearer focus style that doesn't look like an active section, and don't show on mobile

[jasmussen]

From WordPress/wporg-main-2022#221

(Mobile) News is permanently underlined, even when other instances are active.

Here are screenshots. Homepage:

Download page:

In both cases here, "News" is underlined.

Technically this happens because the overlay menu is a modal dialog, which has to set focus on the first menu item. In other words, the underline represents the focus style. To rectify this, let's do two things:

1. Don't show this focus style on a touchscreen device, where you can't use tab to navigate anyway

We can very probably hide it using code like this:

@media (hover: none) {
	.classname:focus {
	   ...
	}
}

Let's separately explore a better focus style that can ideally be generic and the same across the entire website, and look more like a focus style. A quick mockup in the inspector:

• The above reduces the padding of top level menu items, increases on the menu container instead
• It adds a pseudo element on focus, and inside that pseudo element draws a box-shadow.
• This is so the focus style can have a 2px rounded radius.
• Specific metrics of the shadow are: box-shadow: 0 0 0 1.5px #7b90ff.
• Can use light blueberry on dark backgrounds, regular blueberry on light backgrounds.

This focus style is the same inside the block editor.

[ryelle]

Don't show this focus style on a touchscreen device, where you can't use tab to navigate anyway
We can very probably hide it using code like this:

You can still use a keyboard with a touchscreen device, so we should not hide the focus like this. Instead, we can try using :focus-visible which shows the focus only when the browser determines a keyboard is used. That should work, because the real focus indicator (the dotted line) is added using :focus-visible and it's not there until I start tabbing.

[jasmussen]

Instead, we can try using :focus-visible which shows the focus only when the browser determines a keyboard is used

Sound good!