Changeset 46241 for trunk/src/wp-includes/css/buttons.css

Timestamp:

09/23/2019 02:42:36 PM (7 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-includes/css/buttons.css (modified) (13 diffs)

trunk/src/wp-includes/css/buttons.css

@@ -125 +125 @@
 .wp-core-ui .button-secondary {
     color: #555;
-    border-color: #cccccc;
-    background: #f7f7f7;
-    box-shadow: 0 1px 0 #cccccc;
+    border-color: #7e8993;
+    background: #f1f1f1;
     vertical-align: top;
 }
@@ -141 +140 @@
 .wp-core-ui .button:focus,
 .wp-core-ui .button-secondary:focus {
-    background: #fafafa;
-    border-color: #999;
-    color: #23282d;
+    background: #f3f5f6;
+    border-color: #7e8993;
+    color: #007cba;
 }
 
@@ -149 +148 @@
 .wp-core-ui .button:focus,
 .wp-core-ui .button-secondary:focus {
-    border-color: #5b9dd9;
-    box-shadow: 0 0 3px rgba(0, 115, 170, 0.8);
+    background: #f3f5f6;
+    border-color: #007cba;
+    color: #016087;
+    box-shadow: 0 0 0 1px #007cba;
 }
 
@@ -159 +160 @@
     background: #eee;
     border-color: #999;
-    box-shadow: inset 0 2px 5px -3px rgba(0, 0, 0, 0.5);
     transform: translateY(1px);
+    box-shadow: none;
 }
 
 .wp-core-ui .button.active:focus {
-    border-color: #5b9dd9;
-    box-shadow:
-        inset 0 2px 5px -3px rgba(0, 0, 0, 0.5),
-        0 0 3px rgba(0, 115, 170, 0.8);
+    border-color: #999;
+    box-shadow: 0 0 0 1px #999;
 }
 
@@ -211 +210 @@
 .wp-core-ui .button-link:focus {
     color: #124964;
-    box-shadow:
-        0 0 0 1px #5b9dd9,
-        0 0 2px 1px rgba(30, 140, 190, 0.8);
-    /* Only visible in Windows High Contrast mode */
-    outline: 1px solid transparent;
+    outline: 1px dotted #555d66;
 }
 
@@ -242 +237 @@
 
 .wp-core-ui .button-primary {
-    background: #0085ba;
-    border-color: #0073aa #006799 #006799;
-    box-shadow: 0 1px 0 #006799;
+    background: #007cba;
+    border-color: #007cba;
     color: #fff;
     text-decoration: none;
-    text-shadow: 0 -1px 1px #006799,
-        1px 0 1px #006799,
-        0 1px 1px #006799,
-        -1px 0 1px #006799;
+    text-shadow: none;
 }
 
@@ -257 +248 @@
 .wp-core-ui .button-primary.focus,
 .wp-core-ui .button-primary:focus {
-    background: #008ec2;
-    border-color: #006799;
+    background: #0071a1;
+    border-color: #0071a1;
     color: #fff;
 }
@@ -264 +255 @@
 .wp-core-ui .button-primary.focus,
 .wp-core-ui .button-primary:focus {
-    box-shadow: 0 1px 0 #0073aa,
-        0 0 2px 1px #33b3db;
+    box-shadow:
+        0 0 0 1px #fff,
+        0 0 0 3px #007cba;
 }
 
@@ -272 +264 @@
 .wp-core-ui .button-primary.active:focus,
 .wp-core-ui .button-primary:active {
-    background: #0073aa;
-    border-color: #006799;
-    box-shadow: inset 0 2px 0 #006799;
+    background: #00669b;
+    border-color: #00669b;
+    transform: translateY(1px);
+    box-shadow: none;
 }
 
@@ -283 +276 @@
     color: #66c6e4 !important;
     background: #008ec2 !important;
-    border-color: #007cb2 !important;
+    border-color: #008ec2 !important;
     box-shadow: none !important;
-    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.1) !important;
+    text-shadow: none !important;
     cursor: default;
-}
-
-.wp-core-ui .button.button-primary.button-hero {
-    box-shadow: 0 2px 0 #006799;
-}
-
-.wp-core-ui .button.button-primary.button-hero:focus {
-    box-shadow:
-        0 2px 0 #006799,
-        0 1px 0 #0073aa,
-        0 0 2px 1px #33b3db;
-}
-
-.wp-core-ui .button.button-primary.button-hero.active,
-.wp-core-ui .button.button-primary.button-hero.active:hover,
-.wp-core-ui .button.button-primary.button-hero.active:focus,
-.wp-core-ui .button.button-primary.button-hero:active {
-    box-shadow: inset 0 3px 0 #006799;
 }
 
@@ -325 +300 @@
 }
 
-.wp-core-ui .button-group > .button-primary {
-    z-index: 100;
-}
-
-.wp-core-ui .button-group > .button:hover {
-    z-index: 20;
-}
-
 .wp-core-ui .button-group > .button:first-child {
     border-radius: 3px 0 0 3px;
@@ -339 +306 @@
 .wp-core-ui .button-group > .button:last-child {
     border-radius: 0 3px 3px 0;
+}
+
+.wp-core-ui .button-group > .button-primary + .button {
+    border-left: 0;
 }
 
@@ -344 +315 @@
     position: relative;
     z-index: 1;
+}
+
+.wp-core-ui .button-group > .button.active {
+    background-color: #e2e4e7;
+    box-shadow: inset 0 1px 0 0 #999;
+}
+
+.wp-core-ui .button-group > .button:active,
+.wp-core-ui .button-group > .button.active {
+    transform: translateY(0);
 }