Overflow Menu has first option always highlighted

[tbcross]

Detailed description

I'm using the vanilla version of the Overflow Menu, and whenever I open the menu, the first item in the list is always highlighted, even when I hover over a different item (which results in both items behind highlighted).

Is this issue related to a specific component?
Yep. Overflow Menu

What did you expect to happen? What happened instead? What would you like to see changed?
I expected nothing to be highlighted initially (since my cursor was still on the kabob-circles). When I did hover over an item, getting ready to select it, I expected only that specific item to be highlighted, not that one and the top one.

What browser are you working in?
Chrome

What version of the Carbon Design System are you using?
7.23.3

What offering/product do you work on? Any pressing ship or release dates we should be aware of?

Steps to reproduce the issue

1. Open an overflow menu
2. Notice that the first item is permanently highlighted.

[asudoh]

@tbcross IIUC what this issue is about - You can change the behavior by removing data-floating-menu-primary-focus attribute from the 1st menu item. In other words, the highlight of the 1st item indicates focus and the highlight moves when you hit tab. If a designer can quickly provide a differentiated focus style from hovering over, I can put it in. CC @tw15egan

[tw15egan]

@tay-aitken @aagonzales this brings up the question of whether we should have differing focus and hover styles. Any ideas?

[aagonzales]

Oh interesting. I never realized the focus remains even if you move the cursor. Will the first item always be focused? And it only becomes un-focused if the user tabs or clicks another item? Just hovering doesn't change the focus?

Because I think have a focus and a hover at the same time will always cause a little bit of confusion to the user.

I think a quick fix would be to change the focus state to an underline.

[tbcross]

if I remove data-floating-menu-primary-focus from the first menu option, then the whole overflow menu is focused and doesn't look good at all (but it does fix that the item isn't highlighted anymore):

[aagonzales]

oh yeah that's not great which I guess is why we changed the focus to the first item.

Can we have to focus stay on the ... icon? (option 2) Or is that weird?

[tw15egan]

Accessibility wise, focus will need to go to each menu item otherwise it will negatively affect screen-readers

[aagonzales]

I wasn't suggesting removing the focus for all items but where the first focus is. Theoretically so no menu item was focused on open and focus on items only appears when the user starts tabbing.

[tw15egan]

@aagonzales I like that solution

[asudoh]

@aagonzales @tw15egan @tbcross Focus-on-first-item-on-open idea came from the limitation of overflow menu (floating menu); The location of DOM is so distinct that I see no way to tell browser that the next focus item to the trigger button is the overflow menu. The only way to get the focus stuff right is moving focus to overflow menu right when it opens.

One idea I’d have is designing the focus outline style for #436 (comment) condition. Browser’s default focus outline is not great there due to the nature of the pseudo element for triangle, but we can fix that by using custom outline style. Thoughts?

[alisonjoseph]

It looks like we have two options here, either change the focus state for the options in the overflow menu to the underline that @aagonzales has as the first option here

or update the styling of default focus state with the data-floating-menu-primary-focusremoved

Which would you prefer @aagonzales?

[marijohannessen]

@aagonzales do you have any input here?

[bsonefeld]

Need more design input before FED can move forward.

[aagonzales]

I think we we should avoid having a focus and hover on different items at the same time would be best. Option 2 would be the ideal solution. But Option 1 is acceptable if option 2 is not possible.

[carmacleod]

@aagonzales @alisonjoseph @marijohannessen
I realize that this issue was fixed (using Option 1), and closed a year ago, but just so you know, there is an "Option 3". :)

You could have focus follow hover within the popup.

Details and code example in #2259