Opened 6 weeks ago
Closed 5 weeks ago
#65765 closed defect (bug) (fixed)
No :focus state on the home icon (`.wp-admin-bar-site-name a`) in mobile viewports
| Reported by: | joedolson | Owned by: | afercia |
|---|---|---|---|
| Priority: | normal | Milestone: | 7.1 |
| Component: | Toolbar | Version: | 7.0 |
| Severity: | normal | Keywords: | has-patch |
| Cc: | Focuses: | accessibility |
Description
Exists at least into 7.0, but I haven't yet explored further back.
In the attached screenshot, both the menu link and the home link have assigned :focus in the browser tools, but only the menu link changes visual state.
Attachments (1)
Change History (6)
This ticket was mentioned in PR #12780 on WordPress/wordpress-develop by @shamimmoeen.
6 weeks ago
#2
- Keywords has-patch added; needs-patch removed
Trac ticket: https://core.trac.wordpress.org/ticket/65765
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)
This adds 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.
[!NOTE]
#wpadminbaronly gets themobileclass whenwp_is_mobile()returns true, so reproducing needs a device preset in DevTools or a real device — narrowing the browser window is not enough.
## Screenshots
| Before | After | |
|---|---|---|
| Admin | | |
| Front end |
The front-end pair also shows the mechanism: site-name and site-editor draw their icons on .ab-item::before and gain a focus colour with the patch, while comments uses a nested .ab-icon and was already working.
## Use of AI Tools
- AI assistance: Yes
- Tool(s): Claude Code
- Model(s): Claude Opus 5
- Used for: Investigating the CSS specificity conflict, verifying the behaviour across the admin colour schemes and the front-end toolbar, and drafting the commit message and this description. The final change was reduced, tested and confirmed by me.
![(please configure the [header_logo] section in trac.ini)](/chrome/site/your_project_logo.png)
Mobile admin focus states on home and menu