adobe / react-spectrum

A collection of libraries and tools that help you build adaptive, accessible, and robust user experiences.
https://react-spectrum.adobe.com
Apache License 2.0
12.72k stars 1.09k forks source link

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

Closed Cuuki closed 1 month ago

Cuuki commented 6 months ago

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

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 commented 6 months ago

Could either make a new KeyboardDelegate which doesn't have getKey(direction) depending on the orientation. https://github.com/adobe/react-spectrum/blob/361d47080c79e4d52ee287078b9e3c27ed312f2e/packages/%40react-aria/tabs/src/useTabList.ts#L45

Or we could add some logic to to useSelectableCollection https://github.com/adobe/react-spectrum/blob/361d47080c79e4d52ee287078b9e3c27ed312f2e/packages/%40react-aria/selection/src/useSelectableCollection.ts#L163

mdhmaiti commented 6 months ago

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 commented 6 months ago

@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?

majornista commented 3 months ago

@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?

I think the solution may be to only use ArrowLeft/ArrowRight with orientation="horizontal", which is the more common use case, and use both ArrowLeft/ArrowRight and ArrowUp/ArrowDown for orientation="vertical", where a screen reader user might not be made aware of the orientation, but a sighted keyboard user might be confused if ArrowUp/ArrowDown did not work as expected.