WordPress.org

Make WordPress Core

Opened 3 weeks ago

Closed 58 minutes ago

#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 3 weeks ago.
Screen Shot 2020-06-10 at 10.40.46.png (171.3 KB) - added by SergeyBiryukov 3 weeks ago.
Screen Shot 2020-06-12 at 09.40.20.png (220.7 KB) - added by desrosj 3 weeks ago.
50372-missing-border-update-nag.png (71.9 KB) - added by nikhilbhansi 2 days ago.
Border property was missing for the 'update-nag' class.
50372.diff (394 bytes) - added by nikhilbhansi 2 days ago.

Download all attachments as: .zip

Change History (13)

#1 @desrosj
3 weeks ago

  • Keywords good-first-bug added

#2 @afercia
3 weeks 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.


3 weeks ago

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

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

#6 @desrosj
3 weeks 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
3 weeks 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
2 days ago

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

@nikhilbhansi
2 days ago

#8 @SergeyBiryukov
58 minutes 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.