WordPress.org

Make WordPress Core

Opened 2 months ago

Last modified 5 days 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 2 months ago.
48578.diff
48578.diff (454 bytes) - added by audrasjb 2 months ago.
Test with WP 5.3 styles and a -1px outline focus

Download all attachments as: .zip

Change History (10)

#1 @mensmaximus
2 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
2 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.


2 months ago

#4 @afercia
2 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
2 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
2 months ago

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

#6 @audrasjb
2 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
7 weeks ago

  • Keywords needs-design-feedback removed

Design looks good to me 👍

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


5 days ago

Note: See TracTickets for help on using tickets.