Changeset 46248

Timestamp:

09/23/2019 04:50:17 PM (7 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;
         }