WordPress.org

Make WordPress Core

Opened 12 months ago

Closed 9 months ago

#48578 closed enhancement (fixed)

Change health check accordion appearance on focus

Reported by: mensmaximus Owned by: audrasjb
Milestone: 5.4 Priority: normal
Severity: normal Version:
Component: Site Health Keywords: has-patch commit
Focuses: ui, accessibility, administration Cc:

Description

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;
}

Attachments (2)

4c4972edb452a71bae7f4c254888cfd0.gif (1.2 MB) - added by audrasjb 12 months ago.
48578.diff
48578.diff (454 bytes) - added by audrasjb 12 months ago.
Test with WP 5.3 styles and a -1px outline focus

Download all attachments as: .zip

Change History (15)

#1 @mensmaximus
12 months ago

  • Summary changed from Change health check accordino appearance on focus to Change health check accordion appearance on focus
  • Version changed from 5.3 to trunk

#2 @SergeyBiryukov
12 months ago

  • Component changed from General to Site Health
  • Focuses accessibility added

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.


12 months ago

#4 @afercia
12 months ago

  • Keywords needs-design-feedback added; 2nd-opinion removed

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.

#5 @mensmaximus
12 months ago

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
12 months ago

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

#6 @audrasjb
12 months ago

  • Keywords has-patch added
  • Milestone changed from Awaiting Review to 5.4
  • Severity changed from trivial to normal
  • Version trunk deleted

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

#7 @melchoyce
11 months ago

  • Keywords needs-design-feedback removed

Design looks good to me 👍

This ticket was mentioned in Slack in #accessibility by xkon. View the logs.


9 months ago

This ticket was mentioned in Slack in #core-site-health by clorith. View the logs.


9 months ago

#10 @Clorith
9 months ago

  • Keywords commit added

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

This ticket was mentioned in Slack in #accessibility by audrasjb. View the logs.


9 months ago

#12 @audrasjb
9 months ago

  • Owner set to audrasjb
  • Status changed from new to accepted

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

#13 @SergeyBiryukov
9 months ago

  • Resolution set to fixed
  • Status changed from accepted to closed

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.

Note: See TracTickets for help on using tickets.