![(please configure the [header_logo] section in trac.ini)](/chrome/site/your_project_logo.png){kind=logo}
Opened 2 months ago
Last modified 39 hours ago
#65280 accepted defect (bug)
Mobile devices bug Report – Multiple Admin Menus Showing as Active
| Reported by: | sumitsingh | Owned by: | joedolson |
|---|---|---|---|
| Priority: | normal | Milestone: | 7.0.3 |
| Component: | Administration | Version: | |
| Severity: | normal | Keywords: | has-screenshots has-patch has-unit-tests |
| Cc: | Focuses: | ui, administration |
Description
In WordPress 7.0, multiple admin sidebar menus appear active/highlighted at the same time.
## Issue
When navigating to a specific admin menu item, another unrelated menu still appears active with background highlighting.
### Example
- Open the Comments menu
- The Posts menu still appears active/highlighted in the sidebar
This creates UI confusion because multiple menus look selected simultaneously.
## Expected Result
Only the currently active admin menu should:
- display active state
- show highlighted background
- appear selected
## Actual Result
Two or more menus appear active at the same time.
## Environment
- WordPress Version: 7.0
- Admin Area
- Reproducible on multiple pages
## Steps to Reproduce
- Login to WordPress admin
- Navigate to Comments menu
- Observe Posts menu still highlighted/active
- Repeat with other admin menus if applicable
## Impact
- Confusing admin navigation
- Incorrect active menu indication
- Minor UI/UX inconsistency
Attachments (3)
Change History (16)
This ticket was mentioned in Slack in #core by sumitsingh. View the logs.
2 months ago
This ticket was mentioned in PR #11902 on WordPress/wordpress-develop by @khokansardar.
2 months ago
#3
- Keywords has-patch has-unit-tests added
Use :focus-visible for admin menu focus indicators so touch taps do not leave a stale active appearance on previously selected items. Clear the responsive selected state when another top-level menu is opened or when navigating via a submenu link. Limit admin menu view transitions to the current menu item to avoid overlapping active styles during navigation.
Fixes #65280.
#4
@
2 months ago
- Component Menus → Administration
- Focuses accessibility removed
- Milestone Awaiting Review → 7.0.1
Confirmed using ios safari. Moving to 7.0.1 for consideration.
Removing the accessibility focus as this is a universal bug.
#5
@
2 months ago
@sumitsingh thanks for the details, I am also able to replicate this one on playground.
Environment
WordPress: 7.0
PHP: 8.1.23
Server: nginx/1.16.0
Database: mysqli (Server: 8.0.16 / Client: mysqlnd 8.1.23)
Browser: Chrome 126.0.0.0 (macOS)
Theme: Twenty TwentyVersion: 2.7
#6
@
6 weeks ago
- Owner set to
- Status new → accepted
This seems like a good scenario for using :focus-visible, as showing the focus state as active is quite confusing.
Also confirmed on Android/Chrome.
This ticket was mentioned in Slack in #core by cbravobernal. View the logs.
3 weeks ago
@masteradhoc commented on PR #11902:
3 weeks ago
#8
@itzmekhokan thank you very much for the PR! I wasnt able to replicate the issue on desktop but on mobile (iOS, edge browser) with wordpress playground though.
when i tested it the dashboard menu item showed up marked active. can you recheck?
@khokansardar commented on PR #11902:
3 weeks ago
#10
@itzmekhokan thank you very much for the PR! I wasnt able to replicate the issue on desktop but on mobile (iOS, edge browser) with wordpress playground though.
when i tested it the dashboard menu item showed up marked active. can you recheck?
Thanks @masteradhoc for the careful retest, and @neo2k23 for cross-checking on iPad/iPhone — the conflicting results (reproducible on iOS Edge, not on your installs) were the key clue. Pushed a fix in 792cbd4 and c62309b.
#11
@
3 weeks ago
Thanks @masteradhoc for the retest and @neo2k23 for cross-checking on iPad/iPhone — the conflicting results were the clue. Addressed in the PR (792cbd4, c62309b).
Root cause: When the responsive menu opens, focus was moved to the first menu item (Dashboard). The active highlight for a focused top-level item is applied by the color scheme via plain :focus (colors/_admin.scss), which loads after admin-menu.css and overrides its :focus-visible rules. The :not(:focus-visible) guard only suppressed that highlight on browsers that treat the scripted menu-open focus as not focus-visible (Chrome, most installs — hence not reproducible for @neo2k23). On iOS Edge/WebKit that scripted focus is treated as :focus-visible, so the guard was skipped and Dashboard appeared active.
Fix (two parts):
common.js— on menu open, move focus to the current menu item (fallback: first link) instead of always the first. This resolves the issue independently of the:focus-visibleheuristic.colors/_admin.scss— switch the color-scheme menu highlight from:focusto:focus-visibleto matchadmin-menu.css, and drop the now-redundant:not(:focus-visible)overrides.
Validated under keyboard modality (where :focus-visible matches — the worst case, mirroring iOS): focus lands on the current item, Dashboard stays transparent, only the current item is highlighted. The original "two top-level menus active at once" case is also still cleared.
Re-test on iOS Edge / Playground welcome.
You can see screenshot