Update CSS for `::-moz-placeholder` color

[afercia]

See related GitHub issue for the block editor: ​https://github.com/WordPress/gutenberg/issues/69311

This applies to both Core and Bundled Themes.

Firefox changed their implementation for the native placeholder attribute color, see ​https://github.com/mozilla/gecko-dev/commit/2af3322dbe9ac09d6117faba6ce21494e53ef7a2

Instead of using opacity: 0.54; Firefox now uses a color-mix value with an equivalent opacity:

color: color-mix(in srgb, currentColor 54%, transparent);

Core and Themes used to override the Firefox opacity to opacity: 1; to make sure the placeholder text color has sufficient contrast ratio.

Given the upstream change:

• The opacity: 1; is no longer necessary. It doesn't do anything and can be safely removed.
• For themes: the opacity can be removed as well but themes that don't set a color should now set one otherwise the default Firefox color is used instead and it doesn't have a sufficient color contrast. For example. Twenty Twemty-One does use an opacity ​but it doesn't use a color.

Note:
If you're curious to check the Firefox default stylesheet for form elements, you can access the Firefox forms.css stylesheet by entering this resource URL in your Firefox address bar: resource://gre-resources/forms.css

Trac ticket: https://core.trac.wordpress.org/ticket/63030

[abcd95]

Hi again @afercia and Thanks for opening the issue for core.

themes that don't set a color should now set one otherwise the default Firefox color is used

What color do you think would be best from an accessibility point of view?

FYI, the core is using ​#646970

[sabernhardt]

The theme styles should be considered separately. Firefox just changed the opacity and color a few months ago, and it could be too soon to remove opacity: 1 on the front end. About ​18% of Firefox users have a version before the browser's style change. Also, five themes (T13 to T17) still have the older :-moz-placeholder syntax.

The priority for themes is adding a color in Twenty Twenty-One to override Firefox's color-mix(in srgb, currentColor 54%, transparent). Try to use a relative color (possibly the color-mix with a higher percentage) so it works with the theme's default and dark mode, plus any custom colors.

[afercia]

it could be too soon to remove opacity: 1 on the front end. About 18% of Firefox users have a version before the browser's style change.

Sure. The WordPress admin supports the last two versions of the major browsers. The Themes support is unclear to me. Anyways, there's no need to rush.

Re: the color, I guess it should be a color that fits with the theme's color palette so that I'm not sure all themes can use the same color. Also, some themes use a light gray background color for the inputs (for example: Twenty Sixteen). In these cases the placeholder text color should still provide a sufficient color contrast with that specific background color.

[aialvi]

I have some thoughts to share. The current approach needs to consider compatibility with legacy Firefox versions that still represent about 18% of users. I'd recommend keeping the opacity: 1 property temporarily with a clear deprecation timeline and documenting the planned removal date in code comments. For theme implementation, using

color-mix(in srgb, currentColor 75%, transparent)

provides better contrast while maintaining compatibility across themes. For the core implementation, we should retain the #646970 color for the admin area while adding progressive enhancement for newer Firefox versions, making sure we meet WCAG AA compliance for color contrast. Theme authors would benefit from guidance on implementing relative color values using color-mix, which automatically supports both light and dark modes.

[joedolson]

After discussion in the accessibility bug scrub, we don't think that it makes sense to continue to support legacy Firefox browsers. While it's true that 18% of Firefox users are still on legacy versions, that's 18% of the 2.4% of users still using Firefox, which isn't a very significant percentage.

Core only officially supports the latest two releases, so I don't see any good reason to keep this support in Core; for themes it's probably a more minor issue.

I suspect that the percentage of legacy Firefox users isn't going to change any time soon, given the nature of this - it's not slow uptake, but versions that appear to have locked to specific releases.

[sabernhardt]

This ticket is mainly about Firefox, but the stylesheets also include :-ms-input-placeholder rulesets (for IE). I think those could be removed at the same time as the opacity (in the admin styles).

Please leave the theme files unchanged in this pull request. WordPress (administration) limits its browser support to the latest versions of Firefox, but the themes could _retain_ more support for older browsers.

Also, I think the :-ms-input-placeholder rulesets can be removed from the color-picker, forms and media-views stylesheets at this time. I'll mention that in the ticket for more discussion.

Thanks for the review @sabernhardt, I have removed the :-ms-input-placeholder rulesets at this time, but I'll revert them if the discussion says otherwise.

[joedolson]

I agree with the additional changes in 8425; omitting the theme changes makes sense, as the support expectations are different.

The removal of ms-input-placeholder will only impact anybody using EdgeHTML, the predecessor to Edge, so that seems like a definite edge case.

:)

Marking for commit. There's no extra testing required, in my opinion, as these are removals of code that has no impact in any of our supported browsers.

[joedolson]

In 60636:

Administration: Remove obsolete placeholder styles.

Remove the browser-prefixed placeholder styling -ms-input-placeholder and custom opacity for -moz-placeholder. --ms-input-placeholder is no longer used by any supported browsers and Firefox now uses color-mix to set placeholder colors instead of reduced opacity.

Props afercia, abcd95, sabernhardt, aialvi, joedolson.
Fixes #63030.