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

[WordPress Trac]

#47498: Revise checkbox/radio button css for better compatibility with text zoom
-------------------------------------------------+-------------------------
 Reporter:  kjellr                               |       Owner:  (none)
     Type:  defect (bug)                         |      Status:  new
 Priority:  normal                               |   Milestone:  5.3
Component:  Administration                       |     Version:
 Severity:  normal                               |  Resolution:
 Keywords:  has-patch needs-design-feedback      |     Focuses:  ui,
  wpcampus-report form-controls color-contrast   |  accessibility
-------------------------------------------------+-------------------------

Comment (by afercia):

 Thanks @kjellr! Tested a bit and:
 - [attachment:"47498.diff"] misses a dot in the image URL path, it should
 be `../`
 - [attachment:"47498-alternate.diff"] works only in Safari for me:
   - I'm not sure the `<rect>` element in the SVG is necessary, unless I'm
 missing something
   - regardless, turns out the checkmark `fill` value contains the hash
 character `fill='#1e8cbe'` and changing that to, for example, `fill='red'`
 makes the icon work in all browsers (also IE11).

 Solution: [https://meyerweb.com/eric/tools/dencoder/ URL encode] the part
 that starts with `<svg ... >` and ends with `</svg>`, as also [https
 ://css-tricks.com/probably-dont-base64-svg/#article-header-id-2 suggested
 here].

 That said, both the checkbox checkmark and the radio button "circle" are
 supposed to change color when an admin alternate color scheme is set. For
 example, with the "Midnight" color scheme, they should be red:

 [[Image(http://cldup.com/KeLgQcdXYN.png)]]

 The fill color should be set dynamically in `src/wp-
 admin/css/colors/_admin.scss` but then again the color variable will
 output a hash character `#`. There's the need for
 [https://stackoverflow.com/a/25478589/9203996 some Sass to handle this
 special case].

 [attachment:"47498-url-encoded.diff"] is a proof of concept (it works), if
 anyone comes up with a better method to replace the hash character `#`
 with the URL-encoded value `%23`, that would be welcomed!

 Some testing would be nice :)

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