Checkboxes not displayed when images are turned off in browser

[martiniwebb]

​W​hen images ​are ​turned off in browser, ​the ​checked post categories in the admin ​post dashboard disappear​.​

[SergeyBiryukov]

Hi there, welcome to WordPress Trac! Thanks for the ticket.

I was able to reproduce the issue.

• First, I tested the Edit Post screen, and the checked post categories are displayed as expected there, see 55768.edit-post.png​. They use an <svg> tag.
• Then I tested Quick Edit on the Posts screen, and the checked post categories are indeed not displayed there, see 55768.posts.png​. They use a data:image/svg+xml URL in CSS, which is apparently not displayed if images are turned off in the browser.

So it looks like the issue is not limited to post categories and would apply to any data:image/svg+xml URLs in core.

[martiniwebb]

Hi @sergeybiryukov,

Many thanks for reproducing the case and explaining with screenshots.

I note that you detected the "data:image/svg+xml" as the cause.

By your courtesy, I wanted to find out if an alt tag could be applied to the checkbox element so if the browser image is turned off, the form element input [ the checked state] is represented by text?

Many thanks.

[SergeyBiryukov]

Looks like this CSS rule from wp-admin/css/forms.css doesn't work as expected with images turned off:

input[type="checkbox"]:checked::before {
	/* Use the "Yes" SVG Dashicon */
	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%233582c4%27%2F%3E%3C%2Fsvg%3E");
	margin: -0.1875rem 0 0 -0.25rem;
	height: 1.3125rem;
	width: 1.3125rem;
}

Introduced in [46248] / #47498, reverting that changeset seems to fix the issue in my testing. Setting the version accordingly.

Since it's not an <img> HTML tag, an alt attribute would probably not be applicable here. I think some other way to implement what [46248] aimed to achieve could be explored.

[martiniwebb]

I have viewed your response and explanation with the sample code.

I understand.