Changeset 62875

Timestamp:

07/28/2026 05:52:21 PM (2 months ago)

Author:

joedolson

Message:

Administration: Fix focus/hover styles on collapse menu button.

The new :focus and :hover styles for the admin menu were only applied to links, and not extended to the collapse menu trigger, which is a button. Additionally, the entire hover/focus state change was missing in some alternate admin color schemes.

Add shape-based focus and hover states to collapse menu button to match the rest of the admin menu and add expected color changes across all admin schemes.

Developed in ​https://github.com/WordPress/wordpress-develop/pull/12722

Props afercia, iamchitti, dhruvang21, fushar, habiburdev, joedolson.
Fixes #65726.

Location:

trunk/src/wp-admin/css

Files:

• admin-menu.css (modified) (1 diff)
• colors/_admin.scss (modified) (1 diff)

trunk/src/wp-admin/css/admin-menu.css

@@ -471 +471 @@
 }
 
-#collapse-button:hover {
-        color: #72aee6;
-}
-
+#collapse-button:hover,
 #collapse-button:focus {
         color: #72aee6;
+        box-shadow: inset 4px 0 0 0 currentColor;
+        transition: box-shadow .1s linear;
+}
+
+#collapse-button:focus {
         /* Only visible in Windows High Contrast mode */
         outline: 1px solid transparent;

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

@@ -376 +376 @@
 
 #collapse-button {
-    color: variables.$menu-collapse-text;
+        color: variables.$menu-collapse-text;
 }
 
 #collapse-button:hover,
 #collapse-button:focus {
-    color: variables.$menu-submenu-focus-text;
+        color: variables.$menu-highlight-text;
+        background: variables.$menu-highlight-background;
 }