DataViews: Keyboard navigation in filter configuration listbox is broken

[jameskoster]

kb.mp4

When the listbox is focused, keyboard arrows up/down should navigate between options. This isn't currently the case. Curiously arrows left/right navigate instead.

To reproduce

1. View DataViews component in Storybook
2. Add a filter
3. In the filter configuration popover move focus to the listbox of options
4. Observe that arrow keys up/down do not navigate between options as expected

[im3dabasia]

Thanks, @jameskoster. I was able to reproduce the issue and will be raising a PR soon for this.

[t-hamano]

Unfortunately, this issue appears to be new to WP6.7, so it might be worth fixing in a minor release.

cc @cbravobernal

[cbravobernal]

I move it to 6.7.2, as we are right now closing editor tasks for 6.7.1 RC.

[Mayank-Tripathi32]

I feel instead of adding custom logic for keyboard navigation, using the focusWrap prop seems to be a simpler way to enable up/down arrow navigation. However, I found that using the orientation prop to set the navigation to "vertical" doesn't seem to work. It might be worth looking into that.

I also found this to be working, but it doesn't feel like the best solution and might need improvement.
The following code: composite.item

onKeyDown={ ( event ) => {
    // Prevent left/right arrow keys, allow up/down for navigation
    if (
        event.key === 'ArrowLeft' ||
        event.key === 'ArrowRight'
    ) {
        event.preventDefault();
    }
} }

composite

<Composite
	virtualFocus
	focusLoop
	focusWrap
	orientation="vertical"
	aria-orientation="vertical"
       ...
/>

[t-hamano]

Before we add new events or props, we need to investigate why this issue occurs.

From what I've researched, it seems like this issue first occurred in #65821.

@WordPress/gutenberg-components Do you know anything about this issue?

[mirka]

Found the bug 😝 #67212

Thanks @t-hamano for identifying the bad commit and nudging everyone to find the root cause first.