Changeset 46423

Timestamp:

10/07/2019 06:45:45 PM (5 years ago)

Author:

afercia

Message:

Accessibility: Improve and modernize user interface controls: Improve the buttons active CSS class.

• improves the buttons .active CSS class for buttons that need to be styled as "pressed"
• update the alternate color schemes .active CSS class accordingly
• improves a few icons colors in the alternate color schemes

See #34904.

Location:

trunk/src

Files:

• wp-admin/css/colors/_admin.scss (modified) (2 diffs)
• wp-admin/css/colors/_mixins.scss (modified) (1 diff)
• wp-includes/css/buttons.css (modified) (4 diffs)

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

@@ -29 +29 @@
 #post-body .misc-pub-revisions:before,
 span.wp-media-buttons-icon:before {
-    color: $link-focus;
+    color: currentColor;
 }
 
@@ -100 +100 @@
     }
 
+    .button:active {
+        background: darken( $button-color, 5% );
+        border-color: darken( $button-color, 5% );
+    }
+
+    .button.active,
+    .button.active:focus,
+    .button.active:hover {
+        border-color: darken( $button-color, 5% );
+        color: darken( $button-color, 5% );
+        box-shadow: inset 0 2px 5px -3px darken( $button-color, 5% );
+    }
+
     .button-primary {
         @include button( $button-color );

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

@@ -21 +21 @@
     }
 
-    &:active,
+    &:active {
+        background: darken( $button-color, 5% );
+        border-color: darken( $button-color, 5% );
+        color: $text-color;
+    }
+
     &.active,
     &.active:focus,
     &.active:hover {
-        background: darken( $button-color, 5% );
-        border-color: darken( $button-color, 5% );
+        background: $button-color;
+        color: $text-color;
+        border-color: darken( $button-color, 15% );
+        box-shadow: inset 0 2px 5px -3px darken( $button-color, 50% );
     }
 

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

@@ -147 +147 @@
 }
 
-.wp-core-ui .button.active,
-.wp-core-ui .button.active:hover,
+/* :active state */
 .wp-core-ui .button:active,
 .wp-core-ui .button-secondary:active {
@@ -156 +155 @@
 }
 
+/* pressed state e.g. a selected setting */
+.wp-core-ui .button.active,
+.wp-core-ui .button.active:hover {
+    background-color: #e2e4e7;
+    color: #00669b;
+    border-color: #016087;
+    box-shadow: inset 0 2px 5px -3px #016087;
+}
+
 .wp-core-ui .button.active:focus {
-    border-color: #7e8993;
-    box-shadow: 0 0 0 1px #7e8993;
+    border-color: #007cba;
+    box-shadow:
+        inset 0 2px 5px -3px #016087,
+        0 0 0 1px #007cba;
 }
 
@@ -259 +269 @@
     border-color: #00669b;
     box-shadow: none;
+    color: #fff;
 }
 
@@ -308 +319 @@
 }
 
+/* pressed state e.g. a selected setting */
 .wp-core-ui .button-group > .button.active {
     background-color: #e2e4e7;
-    box-shadow: inset 0 1px 0 0 #999;
+    color: #00669b;
     border-color: #016087;
+    box-shadow: inset 0 2px 5px -3px #016087;
+}
+
+.wp-core-ui .button-group > .button.active:focus {
+    border-color: #007cba;
+    box-shadow:
+        inset 0 2px 5px -3px #016087,
+        0 0 0 1px #007cba;
 }