WordPress.org

Make WordPress Core

Opened 4 months ago

Closed 3 months ago

#26689 closed defect (bug) (fixed)

Admin pointers fail contrast ratio guidelines, get lost in UI

Reported by: ericlewis Owned by: nacin
Milestone: 3.8.1 Priority: normal
Severity: normal Version: 3.8
Component: Accessibility Keywords: needs-ui needs-patch
Focuses: ui Cc:

Description

When I first saw this pointer (see attached screenshot) I was a bit bewildered at what it was pointing to. Then I realized it was because of the color contrast between the arrow and the background, or lack of. And, after that, "this must be what being colorblind is like."

Attachments (8)

Screen Shot 2013-12-19 at 9.23.12 PM.png (29.8 KB) - added by ericlewis 4 months ago.
26689.admin-pointer-wp37.png (13.7 KB) - added by SergeyBiryukov 4 months ago.
26689.admin-pointer-wp38.png (11.0 KB) - added by SergeyBiryukov 4 months ago.
26689.patch (449 bytes) - added by SergeyBiryukov 4 months ago.
26689.after.png (10.4 KB) - added by SergeyBiryukov 4 months ago.
force-admin-pointers.php (863 bytes) - added by SergeyBiryukov 4 months ago.
26689-2.patch (2.2 KB) - added by iammattthomas 3 months ago.
Add a border to pointers for better contrast with the background.
26689-2-after.png (26.8 KB) - added by iammattthomas 3 months ago.
The result of 26689-2.patch

Download all attachments as: .zip

Change History (25)

comment:1 ericlewis4 months ago

  • Component changed from Administration to Accessibility
  • Keywords needs-ui added

comment:2 SergeyBiryukov4 months ago

  • Milestone changed from Awaiting Review to 3.8.1

Appears to be a regression. Looked like this in 3.7: 26689.admin-pointer-wp37.png.

comment:3 follow-up: SergeyBiryukov4 months ago

Could not reproduce the original screenshot in Firefox 26. The border is there, although misplaced by a few pixels: 26689.admin-pointer-wp38.png.

SergeyBiryukov4 months ago

SergeyBiryukov4 months ago

comment:4 SergeyBiryukov4 months ago

26689.patch fixes the padding for me: 26689.after.png.

The border color still looks weird though, should probably be corrected as well.

comment:5 in reply to: ↑ 3 SergeyBiryukov4 months ago

  • Keywords needs-patch added

Replying to SergeyBiryukov:

Could not reproduce the original screenshot in Firefox 26.

Reproduced in Chrome 31.

comment:6 follow-up: miqrogroove4 months ago

I can't even get that pointer to appear for locked posts. What are the steps to produce this screen?

I'm pretty sure this is one of the many issues already addressed at http://wordpress.org/plugins/fix-admin-contrast/ but I do want to help you guys test this feature.

comment:7 in reply to: ↑ 6 ericlewis4 months ago

Replying to miqrogroove:

I can't even get that pointer to appear for locked posts. What are the steps to produce this screen?

I'm pretty sure this is one of the many issues already addressed at http://wordpress.org/plugins/fix-admin-contrast/ but I do want to help you guys test this feature.

Pointers are only shown the first time you encounter a feature; once you dismiss, you never see them again. Pointers that have been dismissed are stored in user meta under the key dismissed_wp_pointers; deleting that should show you all pointers like you were a kid again.

comment:8 miqrogroove4 months ago

I'm creating new users for testing and they are not getting pointers at all.

comment:9 follow-up: miqrogroove4 months ago

With dismissed_wp_pointers = '' I get other pointers, like on the post editor, but I don't get pointers on the All Posts page.

Last edited 4 months ago by miqrogroove (previous) (diff)

comment:10 in reply to: ↑ 9 SergeyBiryukov4 months ago

Replying to miqrogroove:

I'm creating new users for testing and they are not getting pointers at all.

Related: #19360, #26692.

Replying to miqrogroove:

With dismissed_wp_pointers = '' I get other pointers, like on the post editor, but I don't get pointers on the All Posts page.

The Edit Lock pointer is only displayed if the site has more than one post author with published posts:
tags/3.8/src/wp-admin/includes/template.php#L1906.

Wrote a quick plugin to force all admin pointers to be displayed (including Edit Lock): force-admin-pointers.php.

comment:11 miqrogroove4 months ago

The easiest thing I could come up with was to adjust the background color of the pointer's content and arrow to #DDD. The contrast is better, but the clean look and feel is lost. What this really needs is a strong drop shadow on all edges. I considered working something into my plugin, but the way this feature is described above, I think these pointers almost never appear in normal use.

Last edited 4 months ago by miqrogroove (previous) (diff)

comment:12 MikeHansenMe3 months ago

  • Keywords ui-focus added

comment:13 ircbot3 months ago

This ticket was mentioned in IRC in #wordpress-dev by nacin. View the logs.

iammattthomas3 months ago

Add a border to pointers for better contrast with the background.

iammattthomas3 months ago

The result of 26689-2.patch

comment:14 iammattthomas3 months ago

I tried applying 26689.patch but I didn't see the border shown in Sergey's screenshot. I've uploaded 26689-2.patch, which adds a separate border for the entire pointer, and a :before pseudo-element on the arrow to recreate the look of a border there. I've tested in Safari, Chrome, Firefox, IE10/8/7. Doing this as a patch for now though in case there are any pointer types I've missed.

The result of 26689-2.patch

More screenshots are at: https://cloudup.com/c948BawttsA

comment:15 nacin3 months ago

I checked all of our pointers. This looks great, thanks MT!

In 3.9 we should clean out some of our pointers. We've already been doing that but I noticed a few things that apply less now. The customize_current_theme_link pointer, for example, no longer has a proper target (.theme .customize would work) and refers to the Available Themes list. The others seem OK, though we never did fix the placement of the Revisions pointer when the Publish box was in the wide left column. And the toolbar one is probably pretty dated; not many people are updating from pre-3.3 these days. It might also be nice to, on save, remove ones we've removed from core so the meta value doesn't run on forever. Feel free to open a ticket or two, anyone. :-)

comment:16 nacin3 months ago

In 26970:

Add a contrasting border to admin feature pointers.

props iammattthomas.
see #26689.

comment:17 nacin3 months ago

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

In 26971:

Add a contrasting border to admin feature pointers.

Merges [26970] to the 3.8 branch.

props iammattthomas.
fixes #26689.

Note: See TracTickets for help on using tickets.