[EuiContextMenu] Hover/active state shenanigans within EuiContextMenu items

[afgomez]

When opening a EuiContextMenu, there are some inconsistencies regarding the hover/active state.

Tested on macOS Big Sur, Firefox 91.

When hovering over the menu elements

• The first element keeps the blue background, no matter where the user hovers.
• In some cases the hovered element doesn't get an underline (see "Go to a link" in the attached video.)
• When going to a nested panel, the default active element (the one with the blue background) is the second, no the first.
• When going back, no element is marked as active element

When navigating menu elements with the arrow keys.

• When the menu first opens, it takes two presses of the down arrow key to move down.
• When the first menu element is selected, it takes two presses of the up arrow key to cycle to the last menu element.
• When the last menu element is selected, it takes two presses of the down arrow key to cycle to the first menu element.

Screen.Recording.2021-07-21.at.14.47.49.mov

[miukimiu]

Thanks @afgomez for reporting this issue.

I tested and I confirm that there are multiple inconsistencies that you described. Tested in Chrome, Safari, Edge and Firefox.

The following one only seems to happen in Firefox:

In some cases the hovered element doesn't get an underline (see "Go to a link" in the attached video.)

This is where the focus state is. So on hovering other elements it doesn't disappear unless you click somewhere or focus another element. So this is the only item that I don't see as an issue:

The first element keeps the blue background, no matter where the user hovers.

cc @myasonik

[myasonik]

The multiple presses of up/down is probably because the Popover has a tabIndex=0 but it should have a tabIndex=-1 which should resolve that specific issue

[afgomez]

This is where the focus state is. So on hovering other elements it doesn't disappear unless you click somewhere or focus another element. So this is the only item that I don't see as an issue:

The first element keeps the blue background, no matter where the user hovers.

@miukimiu I get that. I personally find it confusing since it changes how other UI elements behave (e.g. the operating system context menus) and I think it's worth giving it a second though.

[chason]

This is also affecting item tooltips, the first item's tooltip never goes away.