"useTabList" hook keyboard navigation with arrow keys not considering orientation

[Cuuki]

Provide a general summary of the issue here

We are using the useTabList hook to build a tab component that only uses the horizontal orientation. By the definition of W3 regarding keyboard navigation for tabs, the horizontal orientation should only be navigated by using Left Arrow & Right Arrow keys while using Down Arrow & Up Arrow should scroll the page.

We have currently implemented a workaround by overriding the onKeyDown with a custom callback that is blocking the Down Arrow & Up Arrow key navigation.

🤔 Expected Behavior?

When using orientation="horizontal" for useTabList from '@react-aria/tabs' users should only be able to switch the tabs with Left Arrow & Right Arrow keys. Down Arrow & Up Arrow keys should scroll the page.

😯 Current Behavior

When using orientation="horizontal" for useTabList from '@react-aria/tabs' users will switch the tab by either using Left Arrow & Right Arrow or Down Arrow & Up Arrow keys.

💁 Possible Solution

We are currently using a workaround to override the returned event handler onKeyDown with our own custom solution:

const { tabListProps } = useTabListReactAria({}, state, tabListRef);

const handleKeyDown = (e: KeyboardEvent<FocusableElement>) => {
    if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
        return;
    }

    tabListProps.onKeyDown?.(e);
};

const boxProps = {
    tabList: {
        ...tabListProps,
        onKeyDown: handleKeyDown,
    }
}

🔦 Context

https://www.w3.org/WAI/ARIA/apg/patterns/tabs/#keyboardinteraction

🖥️ Steps to Reproduce

• Create a tab with the available hooks (or use react-spectrum tabs component)
• Open the sandbox link and navigate to the tab list via keyboard (Tab key)
• Navigate the tab list with the arrow keys

Version

"@react-aria/tabs": "^3.8.5" is currently used but the version does not matter.

What browsers are you seeing the problem on?

Other

If other, please specify.

Browser is not relevant, issue happens everywhere.

What operating system are you using?

macOS

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[snowystinger]

Could either make a new KeyboardDelegate which doesn't have getKey(direction) depending on the orientation.

react-spectrum/packages/@react-aria/tabs/src/useTabList.ts

Line 45 in 361d470

let delegate = useMemo(() => new TabsKeyboardDelegate(

Or we could add some logic to to useSelectableCollection

react-spectrum/packages/@react-aria/selection/src/useSelectableCollection.ts

Line 163 in 361d470

switch (e.key) {

[mdhmaiti]

Hello, I am medhashis and I am new here. I made a solution for this issue and it is working. I am new to open source so I am unable to clearly understand what are the checkpoints to this open source repo. I have some naive questions like how to pass the test-canary, test-16, ts build fork points checks etc and it is also my first time contributing to adobe (https://opensource.adobe.com/cla.html). In the form there is something like GitHub Login, I am confused If the github login and github username are same. Can anyone please help me ?, I liked this repo and want to be an active contributor

[LFDanLu]

@majornista just wanna check if you have an opinion here on this behavior. I think previously we had changed this behavior since we couldn't rely on the screenreader from announcing the orientation of the Tabs hence the fallback to having both pairs of arrow keys move focus through the Tabs regardless of orientation?