Admin Bar Search issues in IE

[SergeyBiryukov]

In IE 8, search throws a JS error:

Message: 'event.target.value' - is null or not an object
Line: 445
Char: 1
Code: 0

In IE 9, "Search" label is not visible.

The JS is removed in #19159. But I think we need something similar again because it still links to # which ends in scrolling to top.

Yes, we need an onclick attrib on the link.

Patch attached. Not tested in IE.

In [19160]:

Admin-bar.css refresh, add back IE compat. "return false" so clicking on the search box doesn't scropp the page to the top, props ocean90, fixes #19153, fixes #19151

In IE 9, "Search" label is still invisible (see the screenshot).

IE 7: ​http://cl.ly/BZxI
IE 8: ​http://cl.ly/BZpO
IE 9: ​http://cl.ly/BZe4

The placeholder attribute is supported in all major browsers, except Internet Explorer.

It's the same as in Twenty Eleven. We could make the background color for IE 9 white too.

The main problem here is the usage of the 'placeholder' attribute: It ​should not be used as a replacement for the 'label' element. Nobody will type 'Search' into the box. :)

Screenreader users with IE don’t have access to the 'placeholder' attribute, no matter how it is styled.

IE placeholder fix for twentyeleven theme

The missing search label is a problem for twentyeleven, too. ​screenshot. 19151.2.patch​ is an extremely simple fix for twentyeleven that doesn't rely on jQuery.

If a javascript fix for IE is okay, I can write a patch for the admin side, too. Just wanted to get feedback on this first.

kurtpayne, please open a new ticket for Twenty Eleven.

But -1 for such a big file for a simple placeholder attribute.

Related: #19230

@ocean90, #19230 created per your request. Yes, patch file is large because jQuery isn't available in twentyeleven. Patch is also readable and commented. Minified, it's ~825 bytes. I looked at other approaches for solving the placeholder problem in IE, and this was the simplest approach. Is there a better way to solve this?

IE placeholder fix for admin bar

This placeholder stuff is pretty complicated. Why not just wrap it in a <label> for screen readers, and convert it to a simple icon, no text? (The icon will need to be lighter to contrast better.) WP.com's admin bar implements this and it works well (though obviously our search button will not be flush right).

Even better, the search box should probably appear below the admin bar, rather than grow within the admin bar. (Think how Shortlink works -- same deal.) This prevents buttons from being temporarily pushed off. This is likely for 3.4 unless something else comes up that requires a bigger re-work.

See also #19149

Currently the search box is displayed in IE directly, no "Search" text overlay/placeholder. Thinking that's good enough for now. It degrades well.

The problem isn't the missing placeholder. Unlike the one in Twenty Eleven, the search icon in Admin Bar is barely visible in IE 9: 19151.no-search-label.png​.

Replying to SergeyBiryukov:

It is barely visible in all browsers, perhaps we need a lighter version of it that will be visible both on the dark background and on white.

Replying to azaozz:

It is barely visible in all browsers

In IE 8 it's better (see the screenshot). Could we add a browser-specific class for IE 9 (along the lines of [19368]) to make it white there too?

With 19151.3.patch

Accessibility problems without images.

If there is no placeholder and images are disabled it will be really hard just to find the search field.

In [19407]:

Admin bar: add class for IE9 and fix background color in search, props SergeyBiryukov, see #19151

Magic

In [19413]:

Admin bar: lighter search icon, props chexee, fixes #19151