From 41a89f65bb68a73574b4893765ec58a25e4976b5 Mon Sep 17 00:00:00 2001 From: Mainul Hassan Date: Fri, 31 Jul 2026 05:34:25 +0600 Subject: [PATCH] Toolbar: Fix missing focus style on the home icon in mobile layouts. The home icon is drawn on `.ab-item::before` and has no nested `.ab-icon` span. In mobile layouts its resting colour is more specific than its focus colour, so focusing the link never changes the icon: resting #wpadminbar.mobile .quicklinks .ab-item:before (1,3,1) focus #wpadminbar li .ab-item:focus:before (1,2,2) Add a focus selector next to the existing `.hover` rule, at matching specificity (1,4,1). Both files are needed. `colors/_admin.scss` generates the admin colour schemes. `admin-bar.css` handles the two cases that load no colour scheme file at all: the Fresh scheme, and the toolbar on the front end of the site. See https://core.trac.wordpress.org/ticket/65765 --- src/wp-admin/css/colors/_admin.scss | 3 ++- src/wp-includes/css/admin-bar.css | 3 ++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/src/wp-admin/css/colors/_admin.scss b/src/wp-admin/css/colors/_admin.scss index 2d10323c2749d..2e5b8e73133c4 100644 --- a/src/wp-admin/css/colors/_admin.scss +++ b/src/wp-admin/css/colors/_admin.scss @@ -477,7 +477,8 @@ ul#adminmenu > li.current > a.current:after { #wpadminbar .quicklinks .ab-sub-wrapper .menupop.hover > a .blavatar, #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; } diff --git a/src/wp-includes/css/admin-bar.css b/src/wp-includes/css/admin-bar.css index 77e196525657a..75258eb614b31 100644 --- a/src/wp-includes/css/admin-bar.css +++ b/src/wp-includes/css/admin-bar.css @@ -304,7 +304,8 @@ html:lang(he-il) .rtl #wpadminbar * { } #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: #72aee6; }