Make WordPress Core

Opened 5 months ago

Closed 3 months ago

#65250 closed defect (bug) (fixed)

Mouse cursor interaction inconsistency for the first submenu item when “Collapse Menu” is enabled in the WP-Admin

Reported by: mazharulrobeen Owned by: joedolson
Priority: normal Milestone: 7.1
Component: Administration Version: 5.9
Severity: normal Keywords: has-patch
Cc: Focuses: ui, accessibility, css, administration

Description

Summary:
When the “Collapse Menu” option is enabled in WP-Admin, the first submenu item under certain admin menu sections does not display a clickable cursor on hover, while the remaining submenu items behave correctly.

Description:
While testing the latest WordPress development version(7.0-RC4), I noticed an inconsistency in submenu hover interactions when the admin sidebar is collapsed using the “Collapse Menu” option.

After collapsing the admin menu:

Hover over a menu item that contains submenus (for example: Tools)
The submenu panel appears as expected
However, the first submenu item does not display the expected clickable pointer cursor behavior on hover
The remaining submenu items correctly show the interactive hover/click cursor

The submenu item itself still appears functional/clickable, but the cursor behavior creates a minor UI inconsistency and may affect perceived usability.

This issue appears to affect only the first submenu item in the expanded flyout menu.

Steps to Reproduce:

Install the latest WordPress development version (7.0-RC4)
Log in to WP-Admin
Enable “Collapse Menu” from the admin sidebar
Hover over a menu item with submenus (e.g. Tools)
Move the mouse over the first submenu item
Observe that the cursor does not behave consistently compared to the other submenu items

Video Demonstration: ​https://www.youtube.com/watch?v=eg2lBtBrKHg (YouTube Unlisted URL)

Expected Behavior:
All submenu items should display consistent hover and clickable cursor behavior.

Actual Behavior:
The first submenu item does not show the expected interactive cursor behavior, while the remaining submenu items behave correctly.

Environment:
WordPress Version: Latest development version: (7.0-RC4)
Browser: Chrome: Version 148.0.7778.168
Operating System: macOS: 15.7.3
Active Theme: Twenty Twenty-FiveVersion: 1.4
Active Plugins: N/A

Additional Notes:
The issue appears to be UI/UX related rather than functional
The submenu item remains clickable despite the cursor inconsistency
The behavior appears specifically when the admin sidebar is collapsed
Other submenu items in the same flyout menu appear unaffected

Suggested Improvement:
Review the hover/cursor interaction behavior for the first submenu item in collapsed admin sidebar flyout menus to ensure consistent UI feedback and interaction behavior across all submenu items.

Change History (8)

#1 @sumitsingh
5 months ago

  • Keywords 2nd-opinion added

I have also noticed and issue detected for menu cursor issue. Also top sub menu in more space under bottom.

#2 @sumitsingh
5 months ago

  • Keywords 2nd-opinion removed

#3 @sumitsingh
5 months ago

  • Focuses accessibility added

#4 @sabernhardt
5 months ago

  • Component General → Administration
  • Version trunk → 5.9

[51684] correctly removed the pointer cursor from any list item, but ​common.js makes the .wp-submenu-head item clickable.

This could add the cursor rule for the special case, only when JS is enabled:

.js #adminmenu .wp-submenu .wp-submenu-head {
	cursor: pointer;
}

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


4 months ago

#6 @joedolson
4 months ago

  • Milestone Awaiting Review → 7.1
  • Owner set to joedolson
  • Status new → accepted

This ticket was mentioned in ​PR #11986 on ​WordPress/wordpress-develop by ​@swapnil1010.


4 months ago
#7

  • Keywords has-patch added

Administration: Fix submenu cursor inconsistency in collapsed admin menu.

Props mazharulrobeen.
Fixes #65250.

## What?

Fixes inconsistent mouse cursor behavior for the first submenu item in collapsed WP-Admin sidebar menus.

## Problem

When the admin sidebar is collapsed, the first submenu item (.wp-submenu-head) does not display the expected pointer cursor on hover, while the remaining submenu items behave correctly.

The submenu item remains clickable, but the inconsistent cursor behavior creates a UI/UX inconsistency.

## Solution

Adds a pointer cursor rule for:

.js #adminmenu .wp-submenu .wp-submenu-head {
        cursor: pointer;
}

This ensures consistent hover interaction behavior across all submenu items.

## Testing Instructions

  1. Open WP-Admin
  2. Collapse the admin sidebar using “Collapse Menu”
  3. Hover over a menu item with submenus (example: Tools)
  4. Hover over the first submenu item
  5. Verify the pointer cursor now appears correctly

## Before

​https://github.com/user-attachments/assets/f9d2b669-354b-4f00-a366-b35d908c2dd1

## After

​https://github.com/user-attachments/assets/1b235c2d-63e8-4f27-afc8-c6d1f734df21

Trac ticket: https://core.trac.wordpress.org/ticket/65250

## Use of AI Tools

AI assistance: No

---

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.

#8 @joedolson
3 months ago

  • Resolution → fixed
  • Status accepted → closed

In 62568:

Administration: Fix cursor on first submenu list item in admin menu.

The first submenu item in the collapsed view of the admin menu accepts a click event to navigate, but does not have cursor: pointer to indicate that it's interactive. These were removed in [51684], but this specific case (JS activate, menu collapsed, first list item) should remain.

Props mazharulrobeen, sumitsingh, sabernhardt, swapnil1010, joedolson.
Fixes #65250.

Note: See TracTickets for help on using tickets.