Admin pointers fail contrast ratio guidelines, get lost in UI

[ericlewis]

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."

[SergeyBiryukov]

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

[SergeyBiryukov]

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

[SergeyBiryukov]

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

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

[SergeyBiryukov]

Replying to SergeyBiryukov:

Could not reproduce the original screenshot in Firefox 26.

Reproduced in Chrome 31.

[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.

[ericlewis]

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.

[miqrogroove]

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

[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.

[SergeyBiryukov]

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​.

[miqrogroove]

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.

[iammattthomas]

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

[iammattthomas]

The result of 26689-2.patch

[iammattthomas]

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.

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

[nacin]

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. :-)

[nacin]

In 26970:

Add a contrasting border to admin feature pointers.

props iammattthomas.
see #26689.

[nacin]

In 26971:

Add a contrasting border to admin feature pointers.

Merges [26970] to the 3.8 branch.

props iammattthomas.
fixes #26689.