ericclemmons / ericclemmons/click-to-component

Context menu keyboard navigation

Open
#25 1 comment 0 reactions 0 assignees View on GitHub
bug
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.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.