Make WordPress Core

Opened 3 months ago

Closed 2 months ago

Last modified 2 months ago

#64822 closed defect (bug) (fixed)

Fix checked checkboxes in admin color schemes

Reported by: sabernhardt's profile sabernhardt Owned by: joedolson's profile joedolson
Milestone: 7.0 Priority: normal
Severity: normal Version: 7.0
Component: Administration Keywords: has-patch admin-reskin
Focuses: css, administration Cc:

Description

[61645] set the checkboxes' check mark and radio buttons' dot to white against the theme's background color.

However, _admin.scss only used the newer syntax for CSS content (see #64350) and did not remove the SVGs that specify the variables.$form-checked color. As a result, color schemes other than Fresh override the white check mark in old browsers.

Attachments (1)

Modern-checkbox-Firefox-115.png (48.4 KB) - added by sabernhardt 3 months ago.
checkboxes in Modern scheme on the Profile page, using Firefox 115

Download all attachments as: .zip

Change History (12)

@sabernhardt
3 months ago

checkboxes in Modern scheme on the Profile page, using Firefox 115

This ticket was mentioned in PR #11194 on WordPress/wordpress-develop by @sabernhardt.


3 months ago
#1

  • Keywords has-patch added

Removes CSS for the checked states of both checkboxes and radio buttons from _admin.scss. The white color used in all schemes is already defined in forms.css:

input[type="checkbox"]:checked::before {
	content: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%3Cpath%20d%3D%27M14.83%204.89l1.34.94-5.81%208.38H9.02L5.78%209.67l1.34-1.25%202.57%202.4z%27%20fill%3D%27%23ffffff%27%2F%3E%3C%2Fsvg%3E");
	content: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%3Cpath%20d%3D%27M14.83%204.89l1.34.94-5.81%208.38H9.02L5.78%209.67l1.34-1.25%202.57%202.4z%27%20fill%3D%27%23ffffff%27%2F%3E%3C%2Fsvg%3E") / '';
}

Trac 64822

Use of AI Tools: none (by me)

#2 @joedolson
3 months ago

  • Owner set to joedolson
  • Status changed from new to accepted

#3 @sabernhardt
3 months ago

If there is any reason to expect a different rule between core's forms and colors stylesheets, _admin.scss could keep the redundant rulesets like in my fork. (I could submit that as a pull request to consider for an alternative option.)

Version 0, edited 3 months ago by sabernhardt (next)

This ticket was mentioned in PR #11198 on WordPress/wordpress-develop by @sabernhardt.


2 months ago
#4

Alternative option: fix the checkbox style in _admin.scss, setting the check mark to white again (even though it is already white in forms.css).

Trac 64822

Use of AI Tools: none (by me)

#5 @sabernhardt
2 months ago

  • Keywords admin-reskin added

#6 @joedolson
2 months ago

  • Keywords commit added

I have a strong preference for removing CSS over adding redundancy, and haven't yet been able to think of a good reason to have those colors be different in the stack.

Given that, I'm going to mark this for commit and commit the changes in PR11194. This can easily be changed during RC if we find that there are cases we didn't consider, but removing unneeded CSS is significantly preferable to me.

#7 @ozgursar
2 months ago

  • Keywords commit removed

Patch Testing Report

Patch Tested: https://github.com/WordPress/wordpress-develop/pull/11198

Environment

  • WordPress: 7.0-beta4-61919-src
  • PHP: 8.2.29
  • Server: nginx/1.29.4
  • Database: mysqli (Server: 8.4.7 / Client: mysqlnd 8.2.29)
  • Browser: Firefox 115.0
  • OS: macOS
  • Theme: Twenty Twenty-Five 1.4
  • MU Plugins: None activated
  • Plugins:
    • Test Reports 1.2.1

Steps taken

  1. Use an older browser like Firefox 115
  2. Go to Users > Profile
  3. Confirm that the white checkmark is not white
  4. Apply patch
  5. Go to Users > Profile
  6. Confirm that the checkmark is white
  7. ✅ Patch is solving the problem

Expected result

  • We expect to see the which checkmark against the background set in admin color scheme

Screenshots/Screencast with results

Before (Desktop view)
https://i.imgur.com/Of5zuAc.png

Before (Mobile view)
https://i.imgur.com/K0TX7gq.png


After (Desktop view)
https://i.imgur.com/KBQ9shH.png

After (Mobile view)
https://i.imgur.com/g5KMxSd.png

#8 @ozgursar
2 months ago

@joedolson I accidentally removed the keyword commit while submitting my patch test
Could you add back please?

#9 @joedolson
2 months ago

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

In 61940:

Admin: Fix checked input state in older browsers.

Remove duplicate CSS setting the checked state for checkbox and radio inputs from _admin.scss. The duplicate selectors overrode the white checkmark in older browsers, impacting alternate color schemes.

Props sabernhardt, joedolson.
Fixes #64822.

@sabernhardt commented on PR #11194:


2 months ago
#10

Committed in r61940

@sabernhardt commented on PR #11198:


2 months ago
#11

#11194 was committed in r61940

Note: See TracTickets for help on using tickets.