Administration: A11y: Use a shape for the 'Collapse menu' focus style

[i-am-chitti]

Trac ticket

https://core.trac.wordpress.org/ticket/65726

Problem

A focus style that only uses a color change is not a sufficient focus indication. The focus style must use a shape that can be perceived regardless of any color perception ability. The 'Collapse menu' item was the only one in the admin menu that didn't use a shape.

Separately, on current trunk the color change on focus is entirely missing when an alternative admin color scheme is in use - a regression from WordPress 7.0.

Cause of the regression

_admin.scss styled #collapse-button:hover, #collapse-button:focus with $menu-submenu-focus-text. In 7.0 that variable defaulted to $highlight-color (Ectoplasm's bright olive #a3b745), so the change was clearly visible. The color schemes now set $menu-submenu-focus-text: #fff explicitly and use $highlight-color as a background instead, so the collapse button went from #ece6f6 to #fff on focus - effectively invisible.

Changes

• src/wp-admin/css/admin-menu.css: :focus joins :hover and both get box-shadow: inset 4px 0 0 0 currentColor, the shape #adminmenu a:focus already uses.
• src/wp-admin/css/colors/_admin.scss: hover/focus now use $menu-highlight-text and $menu-highlight-background, matching #adminmenu li > a.menu-top:focus.

Every color scheme now has at least one non-color-dependent cue. The default scheme gets the bar (its focus background matches the sidebar, exactly as the menu items do there); the alternative schemes get both the filled block and the bar.

Only source files are touched. admin-menu-rtl.css, *.min.css, and colors/*/*.css are gitignored build artifacts; rtlcss flips the box-shadow to inset -4px 0 … automatically.

Testing instructions

1. Run npm run dev and hard-reload wp-admin.
2. Tab to 'Collapse menu' in the default color scheme - a 4px bar appears on the left edge.
3. Users → Profile, select Ectoplasm (previews live), Tab to 'Collapse menu' - the item now fills with the scheme's highlight background. Before the patch there was no perceivable change. Repeat for the other schemes.
4. In DevTools → Rendering → Emulate vision deficiencies → Achromatopsia, confirm the focus state is still identifiable with all color removed.
5. Collapse the menu and Tab back to the button to check the folded state.
6. Switch to an RTL locale and confirm the bar is on the right edge.

Screenshots

Before -

After -

Use of AI Tools

AI Assistance - Yes
Claude Code Opus 5
Identify issue and file paths.

This Pull Request is for code review only. Please keep all other discussion in the Trac ticket. Do not merge this Pull Request. See GitHub Pull Requests for Code Review in the Core Handbook for more details.

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

Core Committers: Use this line as a base for the props when committing in SVN:

Props iamchitti.

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[Copilot]

Pull request overview

This PR improves the accessibility and consistency of the wp-admin “Collapse menu” control by ensuring its focus state includes a non-color-dependent shape cue (matching the broader admin menu focus pattern), and by fixing a regression where focus styling was effectively invisible under alternative admin color schemes.

Changes:

• Add the same inset “focus bar” shape (box-shadow: inset 4px 0 0 0 currentColor) to the Collapse menu button on :focus (and keep it on :hover) in admin-menu.css.
• Update the Collapse menu button’s hover/focus colors in the admin color-scheme source SCSS to use the menu highlight text/background variables, aligning with other focused admin menu items.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated no comments.

File	Description
src/wp-admin/css/colors/_admin.scss	Updates Collapse menu hover/focus to use highlight text/background variables so the state is visible across all color schemes.
src/wp-admin/css/admin-menu.css	Adds a non-color shape cue (inset bar) to the Collapse menu button focus style, matching existing admin menu focus affordances.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[github-actions]

Test using WordPress Playground

The changes in this pull request can previewed and tested using a WordPress Playground instance.

WordPress Playground is an experimental project that creates a full WordPress instance entirely within the browser.

Some things to be aware of

• All changes will be lost when closing a tab with a Playground instance.
• All changes will be lost when refreshing the page.
• A fresh instance is created each time the link below is clicked.
• Every time this pull request is updated, a new ZIP file containing all changes is created. If changes are not reflected in the Playground instance,
  it's possible that the most recent build failed, or has not completed. Check the list of workflow runs to be sure.

For more details about these limitations and more, check out the Limitations page in the WordPress Playground documentation.

Test this pull request with WordPress Playground.