Changeset 62106

Timestamp:

03/24/2026 05:32:27 PM (4 days ago)

Author:

joedolson

Message:

Admin: A11y: Fix visibility of pressed button state.

Increase the style contrast between pressed and un-pressed button states by using enhanced box-shadow to differentiate.

Props wildworks, mukesh27, shailu25, maulikmakwana2008, huzaifaalmesbah, sabernhardt, khushi1501, ozgursar, noruzzaman, gaisma22, sirlouen, joedolson.
Fixes #64856.

Location:

trunk/src

Files:

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

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

@@ -175 +175 @@
     .button-group > .button.active {
         border-color: var(--wp-admin-theme-color);
-        background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
+        background: rgba(var(--wp-admin-theme-color--rgb), 0.08);
     }
 

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

@@ -191 +191 @@
 .wp-core-ui .button.active,
 .wp-core-ui .button.active:hover {
-    background-color: rgba(var(--wp-admin-theme-color--rgb), 0.04);
-    color: var(--wp-admin-theme-color);
-    border-color: var(--wp-admin-theme-color);
-    box-shadow: none;
+    background-color: rgba(var(--wp-admin-theme-color--rgb), 0.08);
+    color: var(--wp-admin-theme-color-darker-20);
+    border-color: var(--wp-admin-theme-color);
+    box-shadow: inset 0 2px 6px -2px  var(--wp-admin-theme-color-darker-20);
 }
 
 .wp-core-ui .button.active:focus {
-    border-color: var(--wp-admin-theme-color);
-    box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color);
+    background-color: rgba(var(--wp-admin-theme-color--rgb), 0.08);
+    color: var(--wp-admin-theme-color-darker-20);
+    border-color: var(--wp-admin-theme-color-darker-20);
+    box-shadow: inset 0 2px 6px -2px  var(--wp-admin-theme-color-darker-20), 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color);
 }
 
@@ -362 +364 @@
 /* pressed state e.g. a selected setting */
 .wp-core-ui .button-group > .button.active {
-    background-color: #dcdcde;
-    color: #135e96;
-    border-color: #0a4b78;
-    box-shadow: inset 0 2px 5px -3px #0a4b78;
+    border-color: var(--wp-admin-theme-color);
+    box-shadow: inset 0 2px 6px -2px  var(--wp-admin-theme-color-darker-20);
 }
 
 .wp-core-ui .button-group > .button.active:focus {
-    border-color: #3582c4;
-    box-shadow:
-        inset 0 2px 5px -3px #0a4b78,
-        0 0 0 1px #3582c4;
+    border-color: var(--wp-admin-theme-color);
+    box-shadow: inset 0 2px 6px -2px  var(--wp-admin-theme-color-darker-20), 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color);
 }