![(please configure the [header_logo] section in trac.ini)](/chrome/site/your_project_logo.png){kind=logo}
Opened 5 weeks ago
Last modified 2 weeks ago
#65445 new defect (bug)
Improve the focus state in the admin bar
| Reported by: | joedolson | Owned by: | |
|---|---|---|---|
| Priority: | normal | Milestone: | 7.1 |
| Component: | Toolbar | Version: | 7.0 |
| Severity: | normal | Keywords: | has-patch has-test-info |
| Cc: | Focuses: | ui, accessibility, css |
Description
The default focus state in the admin bar is very subtle. It's visually very similar to the focus state used for submenus in the side menu.
As indicated by #64859, this state makes the user experience somewhat confusing. In my opinion, this confusion is caused mostly because the focus state is different from other top level contexts, and doesn't clearly convey what is actually going on.
The focus state in the adminbar should be made stronger - either by using the same focus state used in the side menu (inverted colors in blue/white) or by using the same focus state used in the main content area (outlined).
Given the context, the inverted colors makes more sense.
Attachments (3)
Change History (11)
This ticket was mentioned in Slack in #accessibility by joedolson. View the logs.
5 weeks ago
This ticket was mentioned in PR #12179 on WordPress/wordpress-develop by @afercia.
4 weeks ago
#3
Trac ticket: https://core.trac.wordpress.org/ticket/65445
## Use of AI Tools
None
This is a Proof Of Concept to improve the focus style on the admin bar.
See attached video recording to illustrate.
Comments on the Trac ticket.
https://github.com/user-attachments/assets/7612be1a-2fbe-4bfc-a0d4-7f7190a67652
#4
@
4 weeks ago
While https://github.com/WordPress/wordpress-develop/pull/12143 introduces a new style by using an inversion of colors, https://github.com/WordPress/wordpress-develop/pull/12179 aims to reuse the same style already in use for the admin menu: a border shape (actually a box-shadow).
See the video recording on the PR.
To test:
Install a few plugins that add menus to the admin bar, for example:
- Query Monitor
- View Admin As
- Yoast SEO
Please test with more plugins, not just limited to the ones mentioned above.
Navigate the admin bar by using the keyboard.
Observe the focus style is the same one used for the admin menu:
- Horizontal box-shadow 'bar' for the top-level items.
- Vertical box-shadow 'bar' for the sub-menu items.
- The CSS uses
currentColorso that it uses any color set in the current admin color scheme.
Test also on the front end.
To me, both PRs highlight one fundamental issue: the admin bar should be taller.
On large screen, the admin bar is only 32 pixels. It's way too small on modern displays. It's 2026 and the admin bar shows its age.
On small screens (mobile) the admin bar height is 46 pixels.
If no objections from a design perspective, I'd like to propose for WordPress 7.1 to make the admin bar always have a 46 pixels height regardless of the screen size. That would:
- Improve usability, accessibility and provide a better user experience for everyone.
- It would allow to simplify the CSS as the height would always be 46 pixels.
However, although it would be a pretty trivial change, it should be extensively tested and implemented early in the release cycle to allow for a call for testing by:
- Plugins that add their own menus in the admin bar.
- Themes that use fixed headers and such and may have in place CSS that takes into account the 32 pixels height.
This ticket was mentioned in Slack in #accessibility by joedolson. View the logs.
3 weeks ago
@joedolson commented on PR #12143:
3 weeks ago
#6
Following discussion, @afercia and I are of the opinion that it would be better to go with a change that doesn't invert colors. This is mostly because inverting colors can cause problems for extenders who are assuming that the background is always dark/doesn't change. While the style is fine, we'd like to avoid that extra friction.
#7
@
3 weeks ago
Thinking that the best approach would be a mix of the two PRs. For consistency with the admin menu:
- The top level items should get the color inversion from the first PR and the border shape from the second PR.
- The sub-items should get the border shape.
#8
@
2 weeks ago
It is worth noting that the admin scheme color changes in WordPress 7.0 introduced a small regression in the edit profile menu, where the link '{username} Edit Profile' doesn't have any focus style.
In 6.9 the link text used to change to blue.
That is because the new white for the link text has been applied to the span within the link and while it provides a style for hover, it doesn't for focus:
See screenshot.
Patch testing report
Patch / PR tested
Environment
Steps
build:dev), logged into wp-admin, moved keyboard focus to a top-level admin bar item ("+ New"). Recorded the "before" state.build:dev), reloaded wp-admin..mobile/.nojqselector branches.Results
$menu-highlight-background) with white text rgb(255,255,255) and white icon glyphs. Clearly distinct and matches the side-menu inverted style requested in the ticket.$menu-highlight-background/$menu-highlight-text/$menu-highlight-icon, so the focus colour follows the active admin colour scheme rather than being hard-coded..ab-itemonly, so submenu focus styling is untouched.:not(.mobile)correctly excludes the touch (mobile-with-JS) case, while the.nojqbranch keeps a visible focus when JavaScript is unavailable. Behaviour is sound progressive enhancement.Conclusion
PR #12143 replaces the near-invisible default focus state on top-level admin bar items with a strong inverted blue/white focus (background + text + icon), matching the side-menu treatment the ticket recommends. The change is minimal and CSS-only —
_admin.scss(scheme variables) and the compiledadmin-bar.css(fresh-scheme fallback) — scoped strictly to top-level items, scheme-aware, and correctly excludes the mobile-with-JS case while preserving a visible focus in the no-JS (.nojq) path. Purely additive CSS with no markup, signature, hook, or default-behaviour changes, so no backward-compatibility concerns. Recommend commit.