Change health check accordion appearance on focus

[mensmaximus]

The accordion items on the health check page get an outline on focus. This looks annoying given the new admin css. I would rather suggest a background color on focus.

status quo:

.health-check-accordion-trigger:focus {
color: #191e23;
border: none;
box-shadow: none;
outline-offset: -2px;
outline: 1px dotted #555d66;
}

suggestion:

.health-check-accordion-trigger:focus {
color: #191e23;
border: none;
box-shadow: none;
background-color: #eee;
}

[afercia]

Focus indication can't be done with color alone, as it wouldn't be perceived by some users e.g. users with color perception impairments or low vision. That's the reason why the browsers native focus style uses a shape. In the same way, a custom style needs to use a shape.

Improvements are always welcome. If the design team feels like exploring a new focus style, the accessibility team has no objections as long as it uses also a shape.

[mensmaximus]

Thank you for this insight on accessibility. I understand the concerns, so why not simply adapting styles from other elements like wp-core-ui buttons.

Suggestion:

.health-check-accordion-trigger:focus {
	color: #191e23;
	border: none;
	box-shadow: none;
	outline-offset: -2px;
	outline: 2px solid #0071a1;
	background-color: #f8f9f9;
}

[audrasjb]

48578.diff

[audrasjb]

Test with WP 5.3 styles and a -1px outline focus

[audrasjb]

Hi,

First, Let's add this ticket to milestone 5.4 :-)

In 48678.diff, I tested the following CSS rule:

.health-check-accordion-trigger:focus {
	color: #191e23;
	border: none;
	box-shadow: none;
	outline-offset: -1px;
	outline: 2px solid #0071a1;
	background-color: #f8f9f9;
}

The outline-offset: -1px looks better to me than -2px.
See the above animated screenshot for reference.

Cheers,
Jb

[melchoyce]

Design looks good to me 👍

[Clorith]

I like this, and with design sign-off I'm happy to mark this for commit.

[audrasjb]

Hi,
The patch still applies cleanly, I can confirm it's ready to be committed as it :-)

[SergeyBiryukov]

In 47188:

Site Health: Improve focus style for accordion items on Site Health screens.

The new style is more consistent with other elements like .wp-core-ui buttons.

Props audrasjb, mensmaximus, afercia, melchoyce, Clorith.
Fixes #48578.