WordPress.org

Make WordPress Core

#50372 closed defect (bug) (fixed)

Low contrast for the update notice on new About pages

Reported by: SergeyBiryukov Owned by: SergeyBiryukov
Milestone: 5.5 Priority: normal
Severity: normal Version:
Component: Help/About Keywords: needs-patch has-screenshots good-first-bug
Focuses: ui, css Cc:

Description

Background: #47708, #49295.

As noted by @desrosj during the 5.4.2 release, the contrast for the update notice on the About page in WordPress 5.3.x is very poor because the background is also white. It appears to also apply to 5.4.x, as the background is the same.

Props to @desrosj for the screenshots :)

Attachments (5)

Screen Shot 2020-06-10 at 10.39.33.png (145.9 KB) - added by SergeyBiryukov 12 months ago.
Screen Shot 2020-06-10 at 10.40.46.png (171.3 KB) - added by SergeyBiryukov 12 months ago.
Screen Shot 2020-06-12 at 09.40.20.png (220.7 KB) - added by desrosj 12 months ago.
50372-missing-border-update-nag.png (71.9 KB) - added by nikhilbhansi 12 months ago.
Border property was missing for the 'update-nag' class.
50372.diff (394 bytes) - added by nikhilbhansi 12 months ago.

Download all attachments as: .zip

Change History (13)

#1 @desrosj
12 months ago

  • Keywords good-first-bug added

#2 @afercia
12 months ago

As long as the update notice text and links do have sufficient contrast, I wouldn't say this is a big accessibility issues. The fact the notice container "shape" isn't that visible is more a design thing as notices on white backgrounds are expected to use the notice-alt CSS class.

Not sure how the "upgrade nag" can differentiate the CSS classes depending on the screen, though.

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


12 months ago

#4 @afercia
12 months ago

  • Summary changed from Low constrast for the update notice on new About pages to Low contrast for the update notice on new About pages

#5 @SergeyBiryukov
12 months ago

Would it be an option to add a more visible border to the update notices on this screen?

#6 @desrosj
12 months ago

Screen Shot 2020-06-12 at 09.40.20.png is achieved by adding the .notice .notice-alt classes to .update-nag. As an able user, it feels weird to have a yellow line with text next to it. It looks broken in my opinion. Something like the screenshot I just uploaded at least makes it clear that notice belongs.

#7 @afercia
12 months ago

  • Focuses accessibility removed

This ticket was discussed during today's accessibility bug-scrub: the team agreed this issue isn't strictly related to accessibility. Removing the accessibility focus.

@nikhilbhansi
12 months ago

Border property was missing for the 'update-nag' class.

@nikhilbhansi
12 months ago

#8 @SergeyBiryukov
12 months ago

  • Owner set to SergeyBiryukov
  • Resolution set to fixed
  • Status changed from new to closed

In 48316:

Administration: Bring the update nag in line with other admin notices.

In addition to more consistent display, this gives it a visible border on the About page.

Props desrosj, nikhilbhansi, afercia, SergeyBiryukov.
Fixes #50372.

Note: See TracTickets for help on using tickets.