Menu: first menu item always appears focused though mouse over other menu items (Chrome 18.0.1025.162)

[siqi]

The issue can be reproduced in following steps:

1. Open dijit/tests/test_Menu.html in Chrome 18.
2. Click on the navigation menu or open any context menu.

Result: The first menu item if focused and displayed with orange outline.

[siqi]

ScreenShot?

[bill]

Thanks. I changed the Menu in 1.8 so that opening a menu by the mouse wouldn't automatically focus any of the menu items, but I see that still, as you said, for some reason mousing over the Menu focuses the first child regardless of where the mouse is.

[bill]

OK, this is a chrome bug. Focus is actually changing, as you can see if you open the console and enter:

setInterval(function(){ console.log(dijit._curFocus.innerText); }, 1000);

So probably this is the same as #15154.

[bill]

Unfortunately still happening in Chrome 19 and Chrome 20.

[siqi]

I have thought it only happens in Chrome 18... Does it make sense to use some workaround such as adding CSS selector: .dj_webkit .dijitMenuItem{outline: none} ?

[bill]

Yah I want to try something like that, except to try to make the focus outline show up in the right place rather than hiding it completely (this is necessary for accessibility). The other trick available is to us .dijitMenuItemFocused.

[bill]

On second thought, accessibility is already handled by the shading of the selected menu item, and in high-contrast mode there's a solid border around the menu item's label.

[bill]

In [28533]:

Hide the MenuItem focus outline since focus is already clear from the shading of the selected MenuItems, or in high contrast mode, from a solid border drawn around selected MenuItem labels.

This also works around the webkit bug displaying focus on table rows.

Fixes #15241.