Changeset 46241 for trunk/src/wp-admin/css/colors/_admin.scss

Timestamp:

09/23/2019 02:42:36 PM (5 years ago)

Author:

afercia

Message:

Accessibility: Improve and modernize user interface controls for better contrast. First part: buttons and links.

• Introduces new styles for the buttons, with better contrast for borders and better focus style.
• Introduces a new focus style for links.
• The new styles improve consistency with the ones used in the new Block Editor (Gutenberg).

Props michaelarestad, truchot, mor10, kellychoffman, adamsoucie, paaljoachim, Joen, kjellr, melchoyce, karmatosed, audrasjb, afercia.
Fixes #34904.

File:

• trunk/src/wp-admin/css/colors/_admin.scss (modified) (1 diff)

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

@@ -44 +44 @@
 }
 
+input[type="text"]:focus,
+input[type="password"]:focus,
+input[type="color"]:focus,
+input[type="date"]:focus,
+input[type="datetime"]:focus,
+input[type="datetime-local"]:focus,
+input[type="email"]:focus,
+input[type="month"]:focus,
+input[type="number"]:focus,
+input[type="search"]:focus,
+input[type="tel"]:focus,
+input[type="text"]:focus,
+input[type="time"]:focus,
+input[type="url"]:focus,
+input[type="week"]:focus,
+input[type="checkbox"]:focus,
+input[type="radio"]:focus,
+select:focus,
+textarea:focus {
+    border-color: $highlight-color;
+    box-shadow: 0 0 0 1px $highlight-color;
+}
+
 
 /* Core UI */
 
 .wp-core-ui {
+    .button.focus,
+    .button:focus,
+    .button-secondary:focus {
+        border-color: $button-color;
+        color: darken( $button-color, 5% );
+        box-shadow: 0 0 0 1px $button-color;
+    }
+
     .button-primary {
         @include button( $button-color );