Changeset 62106

Timestamp:

03/24/2026 05:32:27 PM (6 months 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);
 }