Problem with the color scheme when there is only one Dropdown sl-menu-item.

[koba-ninkigumi]

Describe the bug

When there is only one Dropdown sl-menu-item, hovering will cause the background color of the sl-menu-item to be --sl-color-primary-600.
Is this the intended color scheme?
--sl-color-neutral-100
which I feel is more natural.

To Reproduce

Demo

https://codepen.io/koba1014/pen/OJdLpZo

Browser / OS

• OS: Mac
• Browser: Chrome
• Browser version: 118

Additional information

This Issue is to be reproduced in this version.
https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.10.0/cdn/shoelace.js

[claviska]

Those are the intended styles for menus. The lighter, neutral color is used to highlight the parent menu item when a submenu is open.

You can change the colors if you want, but keep in mind that neutral 100 doesn't have enough contrast to indicate a selection visually.

sl-menu-item:hover::part(base),
sl-menu-item:focus-visible::part(base) {
  background-color: var(--sl-color-neutral-100);
  color: var(--sl-color-neutral-900);
}

[koba-ninkigumi]

Thanks for the reply.

Then the Dropdown sample on the official site is not working as you intended?

↑ The sample of the official site has the background color of the main menu as --sl-color-neutral-100.

[claviska]

Whoops, let me clarify. The blue background is the intended style when the browser's heuristics determine that :focus-visible styles should be used, i.e. for keyboard users. In this case, we need more contrast.

Mouse users, however, should see the lighter gray background as a hover state. Less contrast here is OK because they're using a pointing device instead of the keyboard.

That said, I do see that the browser is assigning :focus-visible styles where I would assume they shouldn't show. Per the styles, we should only see the blue background when using the keyboard.

shoelace/src/components/menu-item/menu-item.styles.ts

Lines 96 to 107 in 296a24c

	:host(:hover:not([aria-disabled='true'], :focus-visible)) .menu-item,
	.menu-item--submenu-expanded {
	background-color: var(--sl-color-neutral-100);
	color: var(--sl-color-neutral-1000);
	}
	:host(:focus-visible) .menu-item {
	outline: none;
	background-color: var(--sl-color-primary-600);
	color: var(--sl-color-neutral-0);
	opacity: 1;
	}

I see what you're saying now, and it indeed looks like a bug. Further investigation led me to this line that causes the problem.

shoelace/src/components/menu-item/menu-item.component.ts

Line 102 in 296a24c

this.focus();

I'm moving this back to an issue since it does appear to be a bug. Sorry I missed that the first time around!

[koba-ninkigumi]

To be implemented correctly, consideration should be given to the eight case divisions.

When there is one drop-down menu item
　When the mouse cursor is on top of a drop-down menu item
　　1. When ▲ or ▼ is pressed on the keyboard
　　2. or not
　When the mouse cursor is outside the drop-down menu item
　　3. When ▲ or ▼ is pressed on the keyboard
　　4. or not
When there are multiple drop-down menu items
　When the mouse cursor is above a drop-down menu item
　　5. When ▲ or ▼ is pressed on the keyboard
　　6. or not
　When the mouse cursor is outside of a drop-down menu item
　　7. When ▲ or ▼ is pressed on the keyboard
　　8. or not

I believe that as long as consistency is satisfied, it is good enough.