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

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;
}

[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.

[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.