[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:  audrasjb
     Type:  task (blessed)                       |      Status:  reopened
 Priority:  normal                               |   Milestone:  5.3
Component:  Administration                       |     Version:
 Severity:  normal                               |  Resolution:
 Keywords:  wpcampus-report form-controls        |     Focuses:  ui,
  color-contrast 5-3-admin-css-changes needs-    |  accessibility
  patch                                          |
-------------------------------------------------+-------------------------
Changes (by afercia):

 * keywords:
     has-patch wpcampus-report form-controls color-contrast 5-3-admin-css-
     changes
     =>
     wpcampus-report form-controls color-contrast 5-3-admin-css-changes
     needs-patch


Comment:

 Regarding the radio buttons blue dot not perfectly centered, looks like
 the CSS math is correct but it assumes screen pixels can be split :)


 {{{
 input[type="radio"]:checked::before {
         content: "";
         border-radius: 50%;
         width: 50%;
         height: 50%;
         margin: 25%;
         line-height: 0.76190476;
         background-color: #1e8cbe;
 }
 }}}

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


 The computed width / height of the blue dot is 7 pixels. Its margin
 computed value is `3.5` pixels. Browsers will round this value in
 different ways.

 One option is to make the blue dot 1 pixel bigger and reduce the margin by
 1 pixel. However, with percentage values this may still produce rounded
 values when zooming in / out.

 Since the base size (the radio button) is expressed in `rem`, I'd try to
 use `rem` also for the blue dot.

 {{{
 width: 0.5rem; /* 8 pixels */
 height: 0.5rem /* 8 pixels */;
 margin: 0.1875rem;  /* 3 pixels */
 }}}

 A quick patch and some testing would be nice :)

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