ericclemmons / ericclemmons/click-to-component
Context menu keyboard navigation
- Dominant language
- JavaScript
- Stars
- 2.4k
- Forks
- 113
- PR merge metrics
- No merged PRs in 30d
Description
**Describe the bug**
Right now the context menu doesn't follow the correct tabbing semantics for a `menu` role.
`FloatingFocusManager` should have the `preventTabbing` prop (so only arrow key navigation controls the menu).
Further, is the first item intentionally focused upon opening the menu? When pressing the `ArrowDown` key, it requires two presses to begin navigating to the items but should only require one. The `activeIndex` may not be synced correctly.
In the [example](https://codesandbox.io/s/trusting-rui-2duieo?file=/src/ContextMenu.tsx:3053-3177) it focuses the floating element on open and arrow key nav will then work as expected.
```js
useLayoutEffect(() => {
if (open) {
refs.floating.current?.focus();
}
}, [open, refs.floating]);
```
**To Reproduce**
Right click and use keyboard nav
Contributor guide
No contributing guide indexed for this repository
Assessment
This issue has not been assessed yet.