Admin menu: The 'Collapse menu' item focus style only uses color

[afercia]

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.

Historically, the 'Collapse menu' only used a color change, for both the default admin color scheme and for the alternative admin color schemes.

It is also worth noting the 'Collapse menu' item focus style is the only one in the admin menu that doesn't use a shape. This needs to be fixed.

Additionally, on current 7.1 trunk, the color change is entirely missing when an alternative admin color scheme is in use.

This appears to be a regression on current trunk.

In the first screenshot:

• The first row illustrates the color change with the default admin color scheme.
• The second row illustrates there is no color change with the 'Ectoplasm' admin color scheme. Same with other admin color schemes.

In the second screenshot:

• In WordPress 7.0, the color change on focus was visible also with the 'Ectoplasm' admin color scheme.

[afercia]

The focus style on current trunk.

[afercia]

The focus style on WordPress 7.0.

[joedolson]

Most likely, this is a regression from #65382. I haven't checked the specifics, but that PR added a number of menu-specific colors, and it's easy to imagine that it overwrote some priors. As a trunk regression, milestoning for 7.1.

## 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.

@i-am-chitti I tested it in the playground, and it's working fine.

[fushar]

Additionally, on current 7.1 trunk, the color change is entirely missing when an alternative admin color scheme is in use.

This appears to be a regression on current trunk.

Note than on <= 7.0, the color schemes Blue and Sunrise also have the issue (missing color change). So it seem we need another marker / shape in any case.

Most likely, this is a regression from #65382. I haven't checked the specifics, but that PR added a number of menu-specific colors, and it's easy to imagine that it overwrote some priors.

Yes, it's because the previous text color on the admin bar background color failed the AA contrast, so I'm fixing them as well. But I was not aware of this "Collapse menu" issue. Hmm. Do you think we should just restore the colors as-is for now? Note that Blue and Sunrise will still have the issue as I noted above.

Hi @i-am-chitti,

Thanks for addressing this accessibility improvement!

I tested this PR via WordPress Playground to verify the focus state on the Collapse menu button (#collapse-menu).

### Testing Results

• [x] Focus Indicator: Navigating with the Tab key to the Collapse menu button now renders a clear, distinct visual focus outline/ring around the element instead of relying solely on a text/icon color change (conforming with WCAG 2.1 SC 1.4.1).
• [x] Behavior: The focus outline remains consistent and clearly visible in both expanded and collapsed admin menu states.
• [x] Admin Color Schemes: Verified under different user admin color schemes to ensure contrast remains readable.

Everything works as expected.

[joedolson]

In 62875:

Administration: Fix focus/hover styles on collapse menu button.

The new :focus and :hover styles for the admin menu were only applied to links, and not extended to the collapse menu trigger, which is a button. Additionally, the entire hover/focus state change was missing in some alternate admin color schemes.

Add shape-based focus and hover states to collapse menu button to match the rest of the admin menu and add expected color changes across all admin schemes.

Developed in ​https://github.com/WordPress/wordpress-develop/pull/12722

Props afercia, iamchitti, dhruvang21, fushar, habiburdev, joedolson.
Fixes #65726.