Make WordPress Core

Opened 12 years ago

Closed 12 years ago

#23938 closed defect (bug) (fixed)

Placeholder attributes for input elements don't show in IE

Reported by: ipstenu's profile Ipstenu Owned by:
Milestone: 3.6 Priority: normal
Severity: major Version: 3.6
Component: Post Formats Keywords:
Focuses: Cc:

Description

Of note: They DO work on IE 10, but not on 7, 8 or 9.

Normal Browser sees this: http://cl.ly/image/1Q3t0Y0K1y14

IE sees this: http://test.rvoodoo.com/wp-content/uploads/2013/04/3point6fields.png

We either need to unhide the labels or apply some JS like https://gist.github.com/hagenburger/379601 to make the text visible for IE, otherwise we've crippled Post Formats.

If we do it the same way we do post titles, then we have to drop using placeholder. If we keep using placeholder, then I think this may work, but someone will want to test on IE 10 to make sure it's not goobering up the layout.

Two options patched.

Attachments (5)

23938-withplaceholder.diff (4.3 KB) - added by Ipstenu 12 years ago.
Using Placeholder, CSS jiggering for IE and non-IE
23938-withoutplaceholder.diff (4.8 KB) - added by Ipstenu 12 years ago.
Removing Placeholder (needs JS to hide on click/active)
23938-withlabel.diff (3.1 KB) - added by Ipstenu 12 years ago.
Round three, making labels visible
23938-4.patch (4.7 KB) - added by azaozz 12 years ago.
23938.diff (4.3 KB) - added by helen 12 years ago.

Download all attachments as: .zip

Change History (21)

@Ipstenu
12 years ago

Using Placeholder, CSS jiggering for IE and non-IE

@Ipstenu
12 years ago

Removing Placeholder (needs JS to hide on click/active)

#1 @SergeyBiryukov
12 years ago

  • Milestone changed from Awaiting Review to 3.6

#2 @helen
12 years ago

Would rather the labels just show. Also thought about icons inside the inputs. Placeholder only isn't great, as once something is entered in the field there are no indications what it was for.

As for 23938-withplaceholder.diff, let's not add or use IDs - the wrapper div + label element should be specific enough for CSS.

#3 @Ipstenu
12 years ago

I was adding IDs to match what we had already for the post title. If we do the showing, then we just have to remove class="screen-reader-text" from it all, or is that not what you were seeing?

http://cl.ly/image/1U160I204644

Then just leave placeholder alone for a brilliant future where we can use it?

@Ipstenu
12 years ago

Round three, making labels visible

#4 @azaozz
12 years ago

It is possible to use the ie7/ie8 css classes to show the labels only in these browsers (will need to add an ie9 class too).

Showing both labels and placeholders seems like too much repetition? Imho either one or the other :)

#5 @Ipstenu
12 years ago

The IE9 class shows for IE10 too, in my quick tests on VirtualBox.

But yeah, the labels and placeholders are a bit much. Also the labels would need some CSS styling (float:left maybe) to keep them out of the way of being silly. I thought about hiding some of them, but while this works great for the ones that don't need labels (the inline text of 'Paste a URL below...' is good enough IMO), if I add in one for wp-format-image, it breaks quotes. Probably due to my CSS sucktastic skill level.

div.field.wp-format-audio label,
div.field.wp-format-video label {
	display:none;
}

#6 @azaozz
12 years ago

Yeah, currently the .ie8 class is added on the <html> tag with conditional comments. For IE7 we load ie.css.

We probably should switch to using the same code as the toolbar for that. Even if we drop IE7 support soon, IE8 and 9 will be around for quite some time and it's nice to be able to tweak the admin css for them.

We can't hide the labels with display: none;, need to do it with the screen-reader-text class. Looking at all formats, only the Quote format fields seem to need visible labels. All the rest get a nice "helper text" above the fields and work well with or without the placeholders. Of course we will keep the screen-reader-text labels on all other fields, only make them "normal" labels for the three Quote fields.

Last edited 12 years ago by azaozz (previous) (diff)

#7 follow-up: @toscho
12 years ago

  • Cc info@… added

label and placeholder do different things. They cannot have the same text, especially because it is forbidden to use placeholder as a replacement for label. So the text should be changed too.

Last edited 12 years ago by toscho (previous) (diff)

@azaozz
12 years ago

#8 in reply to: ↑ 7 ; follow-up: @azaozz
12 years ago

In 23938-4.patch:

  • Always show the label for Quote and Image post format fields.
  • Hide the placeholder in _wp_format_url when the label is shown (needs separate selectors in CSS to work properly).

Replying to toscho:
We are not replacing labels with placeholders. There are labels on all fields.

Is there any special (weird?) way screen readers use placeholders we should be aware of?

#9 in reply to: ↑ 8 @toscho
12 years ago

Replying to azaozz:

Is there any special (weird?) way screen readers use placeholders we should be aware of?

Screen readers read both elements in supporting browsers, for example: Link URL Link URL.

Use the label text to explain what the field is for and the placeholder for an usage example: Link URL http://example.com.

Link URL would not be valid content for that field, so it should not be presented as if it were.

@helen
12 years ago

#10 @helen
12 years ago

In 23918:

Show labels and remove improperly-used placeholders for post format fields. props Ipstenu, azaozz. see #23938.

#11 @helen
12 years ago

  • Keywords has-patch removed

Leaving open in case somebody thinks more can/should be done, e.g. adding exemplars for placeholder text or styling for labels.

#12 @azaozz
12 years ago

In 23926:

Post formats: connect labels with fields, move the two css blocks dealing with formats next to each other, see #23938

#13 follow-up: @azaozz
12 years ago

In post-formats.php we have a "strange" label.screen-reader-text on an <input type="hidden"> field that even has a placeholder: http://core.trac.wordpress.org/browser/trunk/wp-admin/includes/post-formats.php#L41

Is this perhaps needed for accessibility or is it something left over and not cleaned up?

Last edited 12 years ago by azaozz (previous) (diff)

#14 in reply to: ↑ 13 @helen
12 years ago

Replying to azaozz:

In post-formats.php we have a "strange" label.screen-reader-text

Probably my fault, leftover and/or bad copy-pasta.

#15 @helen
12 years ago

In 23931:

Remove unnecessary label, placeholder, and class for a hidden input. see #23938.

#16 @helen
12 years ago

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

Closing as fixed. If somebody wants to discuss adding exemplars for placeholders, feel free to open a new ticket.

Note: See TracTickets for help on using tickets.