[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