Context menu keyboard navigation

[atomiks]

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 it focuses the floating element on open and arrow key nav will then work as expected.

    useLayoutEffect(() => {
      if (open) {
        refs.floating.current?.focus();
      }
    }, [open, refs.floating]);

To Reproduce Right click and use keyboard nav

[piyushjohnson]

I explored this issue and have got the following things to discuss

FloatingFocusManager should have the preventTabbing prop

Tried this, behaves as expected arrow keys work, tabbing is blocked

pressing the arrow down key, requires two presses to begin navigating to the items

Debugged this and found out activeIndex is set to null even though the menu item is selected for the first time Tapping the arrow down key once makes index 0 then subsequently to 1

Looked at focus events which first is taken by dialog element(index is null) then moved to first button(index is 0)

Found in docs that FloatingFocusManager has initialFocus prop that defaults to 0

If this initialFocus is set to -1 it then behaves as expected with both arrow keys and tabs, also no menu item is selected for the first time

Is solution of using preventTabbing or initialFocus fine, i have very less idea about a11y