[wp-trac] [WordPress Trac] #35777: Color contrast: the input placeholder

[WordPress Trac]

#35777: Color contrast: the input placeholder
-------------------------------+-----------------
 Reporter:  afercia            |      Owner:
     Type:  defect (bug)       |     Status:  new
 Priority:  normal             |  Milestone:  4.5
Component:  Administration     |    Version:
 Severity:  normal             |   Keywords:
  Focuses:  ui, accessibility  |
-------------------------------+-----------------
 In a few places in the admin screens WordPress uses placeholder attributes
 for some input fields. Sooner or later the placeholder usage should be
 reviewed from an accessibility perspective but for now, this ticket aims
 to focus on a single aspect: color contrast.

 Looking back at some history, I'd agree with Helen's comment on #22689:
 targeting internal browser CSS can be hard, especially in terms of
 maintenance. On the other hand, if WordPress is going to use placeholders,
 then I'd say we should make sure there's a sufficient color contrast ratio
 between the placeholder text and the input background.

 Worth noting the style introduced in [22986] doesn't work any more since
 Firefox 19. Firefox now uses a pseudo element selector `::-moz-
 placeholder`.

 Also, the placeholder in the "toolbar" search field (appears only when
 logged in on the front end), was removed a few years ago in [19518] see
 ticket #19370, but both `admin-bar.css` and `_admin.scss` still use over
 qualified selectors to target it.

 About the color picker placeholder: I don't see the reason why the cursor
 should be centered. Also, not all browsers support text-align on input
 fields. Removing the centered alignment would also allow to remove the
 transparent color used on focus, see [20936].

 As a best practice I'd recommend to don't try to alter native browsers
 controls. Placeholders are supposed to work in a certain way, they
 shouldn't disappear on focus. If there are concerns about user being
 potentially confused by placeholders, then maybe they shouldn't be used in
 the first place.

 Worth noting the placeholder text in the color pickers used in the
 Customizer doesn't fit the input field and gets cut off. Languages other
 than English may have longer translations too. Probably worth a separate
 ticket.

 Here's some of the places where placeholders are currently used:
 - media modal
 - themes search
 - plugins search
 - Customizer, in several places
 - `get_search_form()`
 - color picker
 - Press This
 - file system credentials form
 - the new wplink inline toolbar, see #33301

--
Ticket URL: <https://core.trac.wordpress.org/ticket/35777>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform