Changeset 46248

Timestamp:

09/23/2019 04:50:17 PM (5 years ago)

Author:

afercia

Message:

Accessibility: Improve and modernize user interface controls. Sixth part: allow checkboxes and radio buttons to scale with text.

• uses a SVG icon for checkboxes
• uses CSS rem relative units

Props kjellr, afercia, audrasjb.
Fixes #47498.

Location:

trunk/src/wp-admin/css

Files:

• colors/_admin.scss (modified) (2 diffs)
• forms.css (modified) (5 diffs)

trunk/src/wp-admin/css/colors/_admin.scss

@@ -3 +3 @@
 @import 'mixins';
 
+@function url-friendly-colour( $color ) {
+    @return '%23' + str-slice( '#{ $color }', 2, -1 );
+}
 
 body {
@@ -31 +34 @@
 /* Forms */
 
-input[type=checkbox]:checked:before {
-    color: $form-checked;
-}
-
-input[type=radio]:checked:before {
+input[type=checkbox]:checked::before {
+    content: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%3Cpath%20d%3D%27M14.83%204.89l1.34.94-5.81%208.38H9.02L5.78%209.67l1.34-1.25%202.57%202.4z%27%20fill%3D%27#{url-friendly-colour($form-checked)}%27%2F%3E%3C%2Fsvg%3E");
+}
+
+input[type=radio]:checked::before {
     background: $form-checked;
 }

trunk/src/wp-admin/css/forms.css

@@ -80 +80 @@
     display: inline-block;
     line-height: 0;
-    height: 16px;
-    margin: -4px 4px 0 0;
+    height: 1rem;
+    margin: -0.25rem 0.25rem 0 0;
     outline: 0;
     padding: 0 !important;
     text-align: center;
     vertical-align: middle;
-    width: 16px;
-    min-width: 16px;
+    width: 1rem;
+    min-width: 1rem;
     -webkit-appearance: none;
     box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
@@ -118 +118 @@
 input[type="radio"] {
     border-radius: 50%;
-    margin-right: 4px;
+    margin-right: 0.25rem;
     line-height: 0.71428571;
 }
 
-input[type="checkbox"]:checked:before,
-input[type="radio"]:checked:before {
+input[type="checkbox"]:checked::before,
+input[type="radio"]:checked::before {
     float: left;
     display: inline-block;
     vertical-align: middle;
-    width: 16px;
-    font: normal 21px/1 dashicons;
+    width: 1rem;
     speak: none;
     -webkit-font-smoothing: antialiased;
@@ -134 +133 @@
 }
 
-input[type="checkbox"]:checked:before {
-    content: "\f147";
-    margin: -3px 0 0 -4px;
-    color: #1e8cbe;
-}
-
-input[type="radio"]:checked:before {
-    content: "\2022";
-    text-indent: -9999px;
-    border-radius: 50px;
-    font-size: 24px;
-    width: 6px;
-    height: 6px;
-    margin: 4px;
+input[type="checkbox"]:checked::before {
+    /* Use the "Yes" SVG Dashicon */
+    content: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%3Cpath%20d%3D%27M14.83%204.89l1.34.94-5.81%208.38H9.02L5.78%209.67l1.34-1.25%202.57%202.4z%27%20fill%3D%27%231e8cbe%27%2F%3E%3C%2Fsvg%3E");
+    margin: -0.1875rem 0 0 -0.25rem;
+    height: 1.3125rem;
+    width: 1.3125rem;
+}
+
+input[type="radio"]:checked::before {
+    content: "";
+    border-radius: 50%;
+    width: 50%;
+    height: 50%;
+    margin: 25%;
     line-height: 0.76190476;
     background-color: #1e8cbe;
@@ -1288 +1287 @@
     .widefat tfoot td input[type="checkbox"] {
         -webkit-appearance: none;
-        padding: 10px;
     }
 
@@ -1301 +1299 @@
     .widefat thead td input[type="checkbox"]:before,
     .widefat tfoot td input[type="checkbox"]:before {
-        font: normal 30px/1 dashicons;
-        margin: -3px -5px;
+        width: 1.875rem;
+        height: 1.875rem;
+        margin: -0.1875rem -0.3125rem;
     }
 
     input[type="radio"],
     input[type="checkbox"] {
-        height: 25px;
-        width: 25px;
+        height: 1.5625rem;
+        width: 1.5625rem;
     }
 
     .wp-admin p input[type="checkbox"],
     .wp-admin p input[type="radio"] {
-        margin-top: -3px;
+        margin-top: -0.1875rem;
     }
 
     input[type="radio"]:checked:before {
         vertical-align: middle;
-        width: 9px;
-        height: 9px;
-        margin: 7px;
+        width: 0.5625rem;
+        height: 0.5625rem;
+        margin: 0.4375rem;
         line-height: 0.76190476;
     }