Make WordPress Core

Opened 9 years ago

Closed 3 years ago

Last modified 3 years ago

#32579 closed defect (bug) (fixed)

Admin menu: color schemes fly-out menu background when focused

Reported by: afercia's profile afercia Owned by: ryelle's profile ryelle
Milestone: 5.8 Priority: normal
Severity: normal Version: 4.2
Component: Administration Keywords: has-patch has-testing-info
Focuses: ui, css Cc:


Small visual glitch about Sass color schemes, please refer to the screenshot below.
To reproduce:

  • set a color scheme (here it's "Ocean" which doesn't use dark backgrounds and makes this clear)
  • collapse the admin menu
  • tab with your keyboard and focus the current top menu item

On the left when focused, on the right when hovered. Also, notice a (minor) inconsistency about the displaying of the small arrow.

Attachments (6)

32579.diff (1.1 KB) - added by ryelle 9 years ago.
32579.2.diff (2.4 KB) - added by afercia 9 years ago.
dropdown-focus-before.png (257.5 KB) - added by ryelle 3 years ago.
dropdown-focus.diff (2.6 KB) - added by ryelle 3 years ago.
dropdown-focus-after.png (254.3 KB) - added by ryelle 3 years ago.
32579.3.diff (3.0 KB) - added by ryelle 3 years ago.

Download all attachments as: .zip

Change History (17)

9 years ago

#1 @ryelle
9 years ago

32579.diff adds the :focus'd submenu selector to the color schemes, so they get the correct colors per-scheme. It also removes the small arrow when the item is focused or the menu is open.

#2 @Bueltge
9 years ago

  • Keywords has-patch added; needs-patch removed

The patch works fine, tested in this scenario with mouse and keyboard, focus and hover.

But is it also a difference on the box-shadow. The box-shadow is missed on focus, hover for a active item of the menu. This difference was clear for me. But I don't know what is the goal, with or without box-shadow. Currently is not always the same. Maybe a topic for new ticket? This topic here was solved, but leave a open new topic.

The source is in wp-admin/css/admin-menu.css.

#adminmenu .wp-submenu,
.folded #adminmenu a.wp-has-current-submenu:focus + .wp-submenu,
.folded #adminmenu .wp-has-current-submenu .wp-submenu {
	padding: 7px 0 8px;
	z-index: 9999;
	background-color: #32373c;
	-webkit-box-shadow: 0 3px 5px rgba(0,0,0,0.2);
	box-shadow: 0 3px 5px rgba(0,0,0,0.2);


#adminmenu .wp-has-current-submenu .wp-submenu,
.no-js li.wp-has-current-submenu:hover .wp-submenu,
#adminmenu a.wp-has-current-submenu:focus + .wp-submenu,
#adminmenu .wp-has-current-submenu .wp-submenu.sub-open,
#adminmenu .wp-has-current-submenu.opensub .wp-submenu {
	position: relative;
	z-index: 3;
	top: auto;
	left: auto;
	right: auto;
	bottom: auto;
	border: 0 none;
	margin-top: 0;
	-webkit-box-shadow: none;
	box-shadow: none;
	background-color: #32373c;

You see this shadow topic also on the screenshots from the reporter.

Last edited 9 years ago by Bueltge (previous) (diff)

9 years ago

#3 @afercia
9 years ago

Refreshed patch. Would love the admin menu to be simpler but there's nothing simple here :) I'ts extremely difficult to keep track of all the possible menu states but I've tried to do my best. What I'm trying to do in this patch:

  • separate and simplify the rules for the box-shadow so it's applied and reset just in two places
  • remove the small arrow on the current item also when the menu is in auto-fold state

Would definitely need some testing. @ryelle @Bueltge would greatly appreciate your help when you get a chance :)

To recap there are at least 4 states to test:

  • expanded (default on large screens)
  • folded (user intentionally collapsed the menu)
  • auto-fold with a viewport less than 782px
  • auto-fold with a viewport greater than 782px
Version 0, edited 9 years ago by afercia (next)

#4 @ryelle
3 years ago

#47132 was marked as a duplicate.

#5 @ryelle
3 years ago

  • Focuses css added

dropdown-focus-before.png shows that this is still an issue on trunk. I've taken a stab at fixing it in dropdown-focus.diff by deleting a bunch of folded-specific CSS, which apparently wasn't necessary. I also tweaked the box-shadow rules so it applies to the current menu, it works on hover and when child-items are focused, but I just noticed it's not right in my screenshots. It's a step in the right direction though.

dropdown-focus-after.png shows the after, the menu backgrounds are all correct and the light-colored arrow is gone.

3 years ago

#6 @ryelle
3 years ago

Refreshed the patch & fixed the dropshadow issue I mentioned above.

#7 @ryelle
3 years ago

  • Owner set to ryelle
  • Resolution set to fixed
  • Status changed from new to closed

In 50549:

Administration: Make focus states consistent in admin menu when collapsed.

When collapsed or on a small screen, these styles would override the color schemes, causing a dark background to appear regardless of the color scheme's settings. This change also uses focus-within to show or hide the menu item's arrow, consistent with how the arrow behaves on hover.

Props afercia, Bueltge.
Fixes #32579.

#8 @ryelle
3 years ago

  • Milestone set to 5.8

#9 @Boniu91
3 years ago

  • Keywords has-testing-info added

This ticket was mentioned in Slack in #core-test by boniu91. View the logs.

3 years ago

#11 @justinahinon
3 years ago

Tested with Ocean and Modern color schemes on fresh WordPress 5.8-alpha-50427-src.

The styles were the admin menu icon (collapsed) has focus are consistent with those when the icon is hovered.

So, I’d say this one is good

Note: See TracTickets for help on using tickets.