WordPress.org

Make WordPress Core

Opened 2 weeks ago

Last modified 10 days ago

#47498 new defect (bug)

Revise checkbox/radio button css for better compatibility with text zoom

Reported by: kjellr Owned by:
Milestone: 5.3 Priority: normal
Severity: normal Version:
Component: Administration Keywords: has-patch needs-design-feedback wpcampus-report form-controls color-contrast
Focuses: ui, accessibility Cc:

Description

Related to #47477. This just breaks out one smaller, manageable piece of the patch for review.


The current implementation of checkboxes in WP-Admin relies on using the Dashicons icon font to render the checkbox. When a user uses a text zoom feature in their browser, this icon is scaled up and misplaced:

200% Text Zoom:
https://cldup.com/0LPkuLI8pX-2000x2000.png

The scaling up does not happen for radio buttons because those rely on pixel sizes and CSS to render the dot at the center of the circle. The radio buttons do call for a bullet symbol from the Dashicons font, but move it out of view using a negative text indent.

To prevent the checkbox issue and clean up our checkbox/radio buttons styles in general, I suggest we take one of two actions:

  1. Switch to SVGs instead of the Dashicons webfont. These won't scale up disproportionally with text zoom, and are altogether a more modern approach. We can use a SVG of the "Yes" Dashicon for the checkmark, but there's no plain circle in Dashicons to use for the radio button. We could either create a circle SVG, or just leave the radio button dot as is, since it's already rendering a circle using CSS and doesn't actually need Dashicons at all to accomplish what it's doing.
  1. Render both the dots and checkmarks using only CSS. The dots are easy: as noted above, they're actually rendering with just CSS today. Checkmarks are a little more complicated, but still not entirely difficult. The downside here is that it won't look exactly like the Dashicon check. Here's a quick example: https://codepen.io/kjellr/pen/NVVNzE

I'm attaching a patch that follows (one variation of) the 1st approach:

  • It uses an SVG instead of the Dashicons webfont for the checkbox checkmark. Since this is used as a pseudo element, the SVG has to be called as an external file, though we could use a data URL if we want to save the browser an extra request.
  • It removes the reliance on the Dashicons webfont for radio buttons. As far as I can tell, this isn't actually used anywhere, since the circle icon is created purely via CSS.

The patch should produce no visible difference when viewed at 100%, but it'll fix the checkbox issue when text zoom is active.

200% Text Zoom:
https://cldup.com/Y9lqcVv2Cx-3000x3000.png

Attachments (1)

47498.diff (1.5 KB) - added by kjellr 2 weeks ago.

Download all attachments as: .zip

Change History (6)

@kjellr
2 weeks ago

#1 @afercia
11 days ago

  • Keywords needs-design-feedback added

#2 @afercia
11 days ago

Note about the current CSS used for the radio buttons: \2022 is not a glyph in the dashicons font, it's just the "bullet" unicode character. It appears the related CSS rule in forms.css has always been incorrect.
See https://core.trac.wordpress.org/ticket/47183#comment:2

#3 @afercia
11 days ago

  • Keywords wpcampus-report added

#4 @afercia
11 days ago

  • Keywords form-controls color-contrast added

Previously:

Redesign input fields, checkboxes and other form components for contrast and consistency
https://core.trac.wordpress.org/ticket/44749

Stop using dashicons to show checked state of checkboxes
https://core.trac.wordpress.org/ticket/38150

Color contrast: checkboxes and radio buttons
https://core.trac.wordpress.org/ticket/35596

#5 @afercia
10 days ago

  • Milestone changed from Awaiting Review to 5.3

Moving to the 5.3 milestone, as this ticket aims to address one of the issues from the WPCampus accessibility report on Gutenberg and all the other related tickets are already set to 5.3.

Note: See TracTickets for help on using tickets.