[wp-trac] [WordPress Trac] #47498: Revise checkbox/radio button css for better compatibility with text zoom

WordPress Trac noreply at wordpress.org
Thu Jun 6 19:28:00 UTC 2019


#47498: Revise checkbox/radio button css for better compatibility with text zoom
-------------------------------+-----------------------------
 Reporter:  kjellr             |      Owner:  (none)
     Type:  defect (bug)       |     Status:  new
 Priority:  normal             |  Milestone:  Awaiting Review
Component:  Administration     |    Version:
 Severity:  normal             |   Keywords:  has-patch
  Focuses:  ui, accessibility  |
-------------------------------+-----------------------------
 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:''
 [[Image(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.

 2. **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:''
 [[Image(https://cldup.com/Y9lqcVv2Cx-3000x3000.png)]]

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/47498>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform


More information about the wp-trac mailing list