Make WordPress Core

Opened 2 years ago

Last modified 2 years ago

#55768 new defect (bug)

Checkboxes not displayed when images are turned off in browser

Reported by: martiniwebb's profile martiniwebb Owned by:
Milestone: Future Release Priority: normal
Severity: normal Version: 5.3
Component: Administration Keywords: needs-patch
Focuses: ui, css Cc:

Description

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

Attachments (2)

55768.edit-post.png (344.2 KB) - added by SergeyBiryukov 2 years ago.
55768.posts.png (380.2 KB) - added by SergeyBiryukov 2 years ago.

Download all attachments as: .zip

Change History (6)

#1 @SergeyBiryukov
2 years ago

  • Component changed from General to Administration
  • Focuses ui css added
  • Keywords needs-patch added
  • Milestone changed from Awaiting Review to Future Release
  • Summary changed from Post categories uncheck when images are turned off in browser to Checkboxes not displayed when images are turned off in browser

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

I was able to reproduce the issue.

  • First, I checked 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 checked 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.

Version 0, edited 2 years ago by SergeyBiryukov (next)

#2 @martiniwebb
2 years ago

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.

#3 @SergeyBiryukov
2 years ago

  • Version set to 5.3

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.

Last edited 2 years ago by SergeyBiryukov (previous) (diff)

#4 @martiniwebb
2 years ago

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

I understand.

Note: See TracTickets for help on using tickets.