Changeset 63009 for trunk/src/wp-admin/css/colors/_admin.scss

Timestamp:

08/04/2026 05:28:48 PM (8 weeks ago)

Author:

afercia

Message:

Toolbar: Improve the focus style indication.

• Updates the toolbar items styling by adding a more prominent focus indicator.
• Adjusts label and icon coloring selectors (including mobile-specific focus states).
• Refines the 'Howdy menu' dropdown layout and focus styles.
• Tweaks the responsive menu toggle item sizing.

Props afercia, joedolson, sabernhardt, khokansardar, jns141191, iamraju, sukhendu2002, shamimmoeen, ugyensupport.
Fixes #65445.
Fixes #65765.

File:

• trunk/src/wp-admin/css/colors/_admin.scss (modified) (5 diffs)

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

@@ -417 +417 @@
 }
 
-#wpadminbar:not(.mobile) > #wp-toolbar li:hover span.ab-label,
-#wpadminbar:not(.mobile) > #wp-toolbar li.hover span.ab-label,
-#wpadminbar:not(.mobile) > #wp-toolbar a:focus span.ab-label {
+#wpadminbar > #wp-toolbar li:hover span.ab-label,
+#wpadminbar > #wp-toolbar li.hover span.ab-label,
+/* The adminbar menu may output either links or focusable div elements. */
+/* As such, we target the focus state without specifying the element type. */
+#wpadminbar > #wp-toolbar :focus span.ab-label {
         color: variables.$menu-submenu-focus-text;
 }
@@ -450 +452 @@
 
 #wpadminbar .quicklinks li .blavatar,
-#wpadminbar .menupop .menupop > .ab-item:before {
+#wpadminbar .menupop .menupop > .ab-item:before,
+#wpadminbar.mobile .quicklinks .ab-icon:before,
+#wpadminbar.mobile .quicklinks .ab-item:before {
         color: variables.$menu-icon;
 }
@@ -475 +479 @@
 }
 
+// Note that the icon of the site-name item is not wrapped within a span with class ab-icon like other items.
 #wpadminbar .quicklinks li a:hover .blavatar,
 #wpadminbar .quicklinks li a:focus .blavatar,
@@ -480 +485 @@
 #wpadminbar .menupop .menupop > .ab-item:hover:before,
 #wpadminbar.mobile .quicklinks .hover .ab-icon:before,
-#wpadminbar.mobile .quicklinks .hover .ab-item:before {
+#wpadminbar.mobile .quicklinks .hover .ab-item:before,
+#wpadminbar.mobile .quicklinks .ab-item:focus:before {
         color: variables.$menu-submenu-focus-text;
 }
-
-#wpadminbar.mobile .quicklinks .ab-icon:before,
-#wpadminbar.mobile .quicklinks .ab-item:before {
-        color: variables.$menu-icon;
-}
-
 
 /* Admin Bar: search */
@@ -532 +532 @@
 }
 
-#wpadminbar #wp-admin-bar-user-info a:hover .display-name {
-        color: variables.$menu-submenu-focus-text;
-}
-
 #wpadminbar #wp-admin-bar-user-info .username {
         color: variables.$menu-submenu-text;
 }
 
+#wpadminbar #wp-admin-bar-user-info a:hover .display-name,
+#wpadminbar #wp-admin-bar-user-info a:focus .display-name,
+#wpadminbar #wp-admin-bar-user-info a:hover .username,
+#wpadminbar #wp-admin-bar-user-info a:focus .username {
+        color: variables.$menu-submenu-focus-text;
+}
 
 /* Pointers */