Make WordPress Core

Opened 5 weeks ago

Closed 4 weeks ago

Last modified 4 weeks ago

#64860 closed defect (bug) (fixed)

[Admin reskin] Inconsistent hover vs focus styles on submenu items

Reported by: juanfra's profile juanfra Owned by: joedolson's profile joedolson
Milestone: 7.0 Priority: normal
Severity: normal Version: trunk
Component: Administration Keywords: admin-reskin has-screenshots has-patch
Focuses: ui, css, administration Cc:

Description

Submenu items in the admin sidebar now show a 2px border radius on keyboard focus, while hover still shows the sharp left line.

Previously both hover and focus matched with sharp borders. The focus state is picking up the generic 2px border-radius from a styles in common.css. It should match the sharp hover styling like it did before the reskin.

Steps to reproduce:

To reproduce:

  1. Go to admin.
  2. Start tabbing to a submenu, confirm the focus styles have a rounded border.
  3. Hover the same submenu, confirm the styles are right (sharp left line).

Attachments (1)

submenu-focus.png (520.7 KB) - added by juanfra 5 weeks ago.
Submenu focus styles with border radius.

Download all attachments as: .zip

Change History (10)

@juanfra
5 weeks ago

Submenu focus styles with border radius.

#1 @juanfra
5 weeks ago

FWIW, it's not only happening to submenus but also first level menus.

#2 @audrasjb
5 weeks ago

  • Component changed from General to Administration
  • Keywords admin-reskin added
  • Milestone changed from Awaiting Review to 7.0
  • Version set to trunk

This ticket was mentioned in PR #11262 on WordPress/wordpress-develop by @niravsherasiya7707.


5 weeks ago
#3

  • Keywords has-patch added

Core trac: https://core.trac.wordpress.org/ticket/64860

### Test
Before :
https://github.com/user-attachments/assets/ef218578-5358-4a27-98be-de8b28071280

After :
https://github.com/user-attachments/assets/b2fd16cb-4817-491a-98ec-c0e0c848ae10

#4 @khushi1501
5 weeks ago

Tested this locally on WordPress 7.0 Beta 5.

I was able to reproduce the issue where the hover and focus styles on admin submenu items appear inconsistent. After applying the patch, the hover and focus states look consistent.

Before applying the patch:-
https://www.awesomescreenshot.com/image/59293441?key=863f5089e4d25771635c01a6a38c7e53

After applying the patch:-
https://www.awesomescreenshot.com/image/59293465?key=1ecf479533e4fca0768fb69e56b2810d

#5 @noruzzaman
5 weeks ago

Test Report

Patch tested: https://github.com/WordPress/wordpress-develop/pull/11262

Environment

  • WordPress: 7.0-beta5-20260316.045922
  • PHP: 7.4.33
  • Server: PHP.wasm
  • Database: WP_SQLite_Driver (Server: 8.0.38 / Client: 3.51.0)
  • Browser: Chrome 146.0.0.0
  • OS: Windows 10/11
  • Theme: Twenty Twenty-Five 1.4
  • MU Plugins: None activated
  • Plugins:
    • Test Reports 1.2.1

Actual Results

  1. ✅ Issue resolved with patch.
Before After
https://i.ibb.co.com/nsfY9bms/before.png https://i.ibb.co.com/tTJR6GKg/after.png

@shailu25 commented on PR #11262:


5 weeks ago
#6

First Level Menu:

BeforeAfter
https://github.com/user-attachments/assets/a9a7bacc-9edf-46f5-bf6d-30aa362e3d27https://github.com/user-attachments/assets/9b68b00f-02ff-452e-a4ee-86c0bc21b8d9

Sub Menu:

BeforeAfter
https://github.com/user-attachments/assets/4a8cd095-4840-49dd-92bb-531c6adb776chttps://github.com/user-attachments/assets/f95f5775-1ba1-4dc8-a680-c6cc77c94f6f

#7 @joedolson
4 weeks ago

  • Owner set to joedolson
  • Status changed from new to accepted

#8 @joedolson
4 weeks ago

  • Resolution set to fixed
  • Status changed from accepted to closed

In 62108:

Admin: Remove border radius on focus state in admin sidebar.

Match the :hover and :focus states in the admin sidebar, restoring the sharp-edged border used prior to the admin reskin. Remove the 2px border radius from focused admin sidebar links.

Props juanfra, audrasjb, niravsherasiya7707, khushi1501, shailu25, joedolson.
Fixes #64860.

#9 @juanfra
4 weeks ago

Thank you all!

Note: See TracTickets for help on using tickets.