DataViews: Keyboard navigation in filter configuration listbox is broken

[jameskoster]

https://github.com/user-attachments/assets/68eec713-1672-4c58-8ba1-79c742b399bc

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.