Carbon: Consider having focus follow hover within an overflow menu's popup

[carmacleod]

I searched the issues and found the reason why underline was added as a style to overflow menu items. There is, however, another possible solution: _move focus on hover_. Please do this, because underlines are typically used for links, so it can be confusing to see underlines in buttons.

Normally, moving focus on hover would be a big accessibility no-no. :)
However, within the context of a menu, it makes perfect sense.
I had to argue for 6 months to get this behavior into the "Editor" menubar example in the ARIA Practices Guide, however eventually folks agreed with me. ;)

Here's that APG "Editor" menubar example, in case it's useful (the menus are in a menubar, but the code for each individual menu is the same as for an overflow menu). The "focus follows hover" behavior is described in the point 5 of the Accessibility Features section for the example. In particular, 5 - 2. applies to the overflow menu:

1. In general, moving focus in response to mouse hover is avoided in accessible widgets; it causes unexpected context changes for keyboard users. However, like desktop menubars, there are two conditions in this example menubar where focus moves in response to hover in order to help maintain context for users who use both keyboard and mouse:
   
   
   
   1. After a parent menu item in the menubar has been activated and the user hovers over a different parent item in the menubar, focus will follow hover.
   
   
   2. When a submenu is open and the user hovers over an item in the submenu, focus follows hover.
   
   

The source code for the APG "Editor" menubar example is in the "HTML Source Code" and "Javascript and CSS Source Code" sections of the example page.

PS: Note that text-decoration: underline; is in the Carbon style twice (i.e. will need to be deleted in 2 places...):

.bx--overflow-menu-options__btn:focus {
    outline: 1px solid transparent;
    text-decoration: underline;
    background-color: rgba(85, 150, 230, 0.1);
    text-decoration: underline;
}

[stale[bot]]

We've marked this issue as stale because there hasn't been any activity for a couple of weeks. If there's no further activity on this issue in the next three days then we'll close it. Thanks for your contributions.

[carmacleod]

Not stale

[dakahn]

@carbon-design-system/design 👋

[laurenmrice]

Hey @carmacleod . Have you checked out our implementation for overflow menu in v10, I think this is what you are describing you wish would happen for our v9 overflow menu component? http://react.carbondesignsystem.com/?selectedKind=OverflowMenu&selectedStory=basic&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybook%2Factions%2Factions-panel

We agree with your reasoning to make changes to the overflow you are describing and will discuss how to implement. However this will be marked as one of our more low priority fixes but we hope to get this resolved!

[carmacleod]

Hi @laurenmrice!
I checked out the react Overflow Menu that you linked to, and I see that the underline style for focus in an overflow menu's popup has been changed to a nice box outline, which makes more sense, so this issue's title is no longer relevant - I will change it from:

Underline style for focus looks odd in overflow menus

to

Consider having focus follow hover within an overflow menu's popup

So, yes, lower priority is fine.

[stale[bot]]

We've marked this issue as stale because there hasn't been any activity for a couple of weeks. If there's no further activity on this issue in the next three days then we'll close it. You can keep the conversation going with just a short comment. Thanks for your contributions.

[carmacleod]

grr - stalebot

[stale[bot]]

We've marked this issue as stale because there hasn't been any activity for a couple of weeks. If there's no further activity on this issue in the next three days then we'll close it. You can keep the conversation going with just a short comment. Thanks for your contributions.

[carmacleod]

I retried the overflow menu (default and with links) at
http://react.carbondesignsystem.com/?selectedKind=OverflowMenu&selectedStory=basic&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybook%2Factions%2Factions-panel

and I think it's working fine now.
Closing this issue.