WordPress.org

Make WordPress Core

Opened 4 months ago

Closed 7 weeks ago

Last modified 7 weeks ago

#39970 closed defect (bug) (fixed)

Improve the "dismiss notice" button color contrast

Reported by: afercia Owned by: rianrietveld
Milestone: 4.8 Priority: normal
Severity: normal Version:
Component: Administration Keywords: has-screenshots color-contrast good-first-bug has-patch
Focuses: ui, accessibility Cc:

Description

Most of the notices in the admin have a "Dismiss notice" button. Other UI components use similar buttons, for example the media views when there is an upload error (see screenshots below).

These buttons color contrast ratio is too low for accessibility. It would be great to improve it to get a contrast ratio of at least 4.5:1. On a white background, the #72777c WordPress grey would make it.

Example: the dismiss notice button when updating a post:

https://cldup.com/UpfetiZg93.png

Also, it could be a good opportunity to fix an edge case in the media modal. When adding media from the edit post screen and there's an upload error, no "dismiss errors" button gets displayed. However, the button is there and is functional. It's just completely unstyled:

https://cldup.com/JfxHZEHoPk.png

While it's not visible, it can still be focused and activated when using a keyboard or a screen reader. Not sure it this is intentional, but I'd say if this control isn't essential in this context, then it should be completely hidden from all users. Otherwise, it should be styled.

Worth noting the same button in the Media Library grid has a proper styling:

https://cldup.com/d5n2vul1pz.png

Attachments (6)

39970.diff (1.3 KB) - added by chris_dev 3 months ago.
39970_1.jpg (5.2 KB) - added by chris_dev 3 months ago.
Media screen
39970_2.jpg (3.6 KB) - added by chris_dev 3 months ago.
post/page update screen
39970_3.jpg (7.7 KB) - added by chris_dev 3 months ago.
Media sidebard screen
39970_2.diff (1.8 KB) - added by chris_dev 3 months ago.
39970.2.diff (2.2 KB) - added by afercia 7 weeks ago.

Download all attachments as: .zip

Change History (16)

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


4 months ago

#2 @afercia
4 months ago

  • Keywords good-first-bug added
  • Milestone changed from Awaiting Review to Future Release
  • Owner set to rianrietveld
  • Status changed from new to assigned

Discussed in today's a11y bug-scrub and seems an easy fix, perfect candidate for a contributor day :)

@chris_dev
3 months ago

@chris_dev
3 months ago

Media screen

@chris_dev
3 months ago

post/page update screen

@chris_dev
3 months ago

Media sidebard screen

#3 @chris_dev
3 months ago

  • Keywords has-patch added

Hi @afercia ,

I made changes. Is it what you meant?

#4 @afercia
3 months ago

  • Milestone changed from Future Release to 4.8

@chris_dev yes, thanks!

#5 follow-up: @rianrietveld
3 months ago

Hey @chris_dev, thanks for the patch.
Tested this patch at the contributor day at WordCamp London and it work good for all the cases described by @afrecia.

Just one thing: although the colour in .notice-dismiss is overruled by .notice-dismiss:before, we think that the colour #b4b9be in .notice-dismiss should also be changed into #72777c in case the class will be used in other cases without the :before.

.notice-dismiss {
	position: absolute;
	top: 0;
	right: 1px;
	border: none;
	margin: 0;
	padding: 9px;
	background: none;
	color: #b4b9be;
	cursor: pointer;
}

Maybe it's useful to investigate if there are more cases where #b4b9be is used.

#6 in reply to: ↑ 5 @chris_dev
3 months ago

Hi @rianrietveld ,

Thank you for the comments, I'll investigate all stylesheets whether that colour is used or not ant let you know.

@chris_dev
3 months ago

#7 @chris_dev
3 months ago

Hi @rianrietveld ,

I searched all files and found one more it in wp-pointer.css

I added new patch.

@afercia
7 weeks ago

#8 @afercia
7 weeks ago

Refreshed patch to apply cleanly from the root. Also adds hover/focus style for the media upload "dismiss error" button.

#9 follow-up: @afercia
7 weeks ago

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

In 40570:

Accessibility: Improve the color contrast ratio of the dismiss notice buttons.

Props chris_dev.
Fixes #39970.

#10 in reply to: ↑ 9 @chris_dev
7 weeks ago

Cheers~

Note: See TracTickets for help on using tickets.