Make WordPress Core

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)

mobile-admin-menu-focus.png (10.1 KB ) - added by joedolson 6 weeks ago.
Mobile admin focus states on home and menu

Download all attachments as: .zip

Change History (6)

#1 @joedolson
6 weeks ago

  • Version7.0

@joedolson
6 weeks ago

Mobile admin focus states on home and menu

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]
#wpadminbar only gets the mobile class when wp_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 https://github.com/user-attachments/assets/d42e17bf-a7e8-48b1-bc0b-1c04a80df892 https://github.com/user-attachments/assets/5e87aa38-c2f0-4e12-aaef-92a024a79b64
Front end https://github.com/user-attachments/assets/856c4318-6e9b-445f-8c3c-760720d39d5e https://github.com/user-attachments/assets/88862fda-e839-40e2-9851-ecadc6cf88fc

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.

#3 @afercia
5 weeks ago

  • Milestone Awaiting Review7.1

This will be fixed in #65445.

This ticket was mentioned in Slack in #accessibility by joedolson. View the logs.


5 weeks ago

#5 @afercia
5 weeks ago

  • Owner set to afercia
  • Resolutionfixed
  • Status newclosed

In 63009:

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.

Note: See TracTickets for help on using tickets.