Overflow menu needs to be navigable using arrow keys

[carmacleod]

As a follow-on to #666:

• down and up arrows should move through the menu items
• ideally, the menu should also open on down arrow (move focus to first item) and up arrow (move focus to last item)
• since the menu items are semantically buttons (i.e. they perform an action when activated) and not links (i.e. they do not navigate to a new page when activated) they should only be traversable with down/up arrow, and not tab

[carmacleod]

@tw15egan Actually, I would label this as a bug. :)
Note that Dropdown does handle arrow keys - not sure if some of that code can be reused.

[johnharan]

@carmacleod Hi Carolyn, in #666 you mentioned "the menu should open on space and optionally down and/or up arrow (not just enter)". Looking at http://www.carbondesignsystem.com/components/overflow-menu/code the space key does not seem to have same behavior as enter key, is this behavior correct? should we expect the space key to behave same as enter key?

[carmacleod]

Hi @johnharan. Space and enter do work exactly the same for me. I'm on Windows 7.
The behavior is that they both open the overflow menu and place focus on the first item.

Are you on a Mac? I can't test on a Mac until this evening.

[johnharan]

@carmacleod I've tested some more, and it appears that the issue is only on firefox.
On firefox it seems the space key must be pressed and held to keep the menu open, and the space key also causes the page to scroll. On chrome/IE/safari the space key seems to behave the same as enter.

Edit: It seems for our team's implementation, space is causing the page to scroll in chrome as well as firefox.

[carmacleod]

To stop the page from scrolling, your key event handler needs to have event.preventDefault();
It wouldn't hurt to call event.stopPropagation(); as well.
That may help fix the weird behavior on FF as well (not sure). (Let me know :)

See also: #1398 for the Esc key.

[carbon-bot]

🎉 This issue has been resolved in version 9.68.8 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[carmacleod]

Awesome! Thanks!

[lauraalkhoury]

Fantastic! Will update our version to pick up the fix. @asudoh will this fix also be ported to carbon-components-react or should i open a separate issue there?

[emyarod]

@lauraalkhoury there is a ticket opened by @carmacleod in the React repo about this issue already https://github.com/IBM/carbon-components-react/issues/1741, and I'm looking to resolve it soon

[ChunxiAlexLuo]

@lauraalkhoury there is a ticket opened by @carmacleod in the React repo about this issue already https://github.com/IBM/carbon-components-react/issues/1741, and I'm looking to resolve it soon

Has this issue also already been resolved in carbon-components-react?