WordPress.org

Make WordPress Core

Opened 4 weeks ago

Last modified 34 hours ago

#48578 new enhancement

Change health check accordion appearance on focus

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

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 3 weeks ago.
48578.diff
48578.diff (454 bytes) - added by audrasjb 3 weeks ago.
Test with WP 5.3 styles and a -1px outline focus

Download all attachments as: .zip

Change History (9)

#1 @mensmaximus
3 weeks 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
3 weeks ago

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

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


3 weeks ago

#4 @afercia
3 weeks 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
3 weeks 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
3 weeks ago

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

#6 @audrasjb
3 weeks 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
34 hours ago

  • Keywords needs-design-feedback removed

Design looks good to me 👍

Note: See TracTickets for help on using tickets.