Color contrast: the input placeholder

[afercia]

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

[afercia]

First pass.

[afercia]

A quick example, before and after the patch (latest Chrome):

The patch doesn't touch placeholders used in Press This, they should be reviewed too.

[afercia]

About Press This, it uses a "real" placeholder in a few places and a "fake" one in the Title field. The real ones should have a contrast ratio of at least 4.5:1 and the "fake" one a contrast ratio of at least 3.0:1 (because the font size is bigger than 24px).

[afercia]

Refreshed patch to take care of the Press This placeholders. Screenshot with the patch applied:

cc @michaelarestad

[afercia]

In 36619:

Accessibility: Improve the color contrast ratio for the input placeholders.

Also, cleans up a bit the CSS removing rules for elements that don't use
placeholders any more.

Fixes #35777.