Closed Cuuki closed 1 month 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
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
@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 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.
Provide a general summary of the issue here
We are using the
useTabList
hook to build a tab component that only uses thehorizontal
orientation. By the definition of W3 regarding keyboard navigation for tabs, thehorizontal
orientation should only be navigated by usingLeft Arrow
&Right Arrow
keys while usingDown Arrow
&Up Arrow
should scroll the page.We have currently implemented a workaround by overriding the
onKeyDown
with a custom callback that is blocking theDown Arrow
&Up Arrow
key navigation.π€ Expected Behavior?
When using
orientation="horizontal"
foruseTabList
from'@react-aria/tabs'
users should only be able to switch the tabs withLeft Arrow
&Right Arrow
keys.Down Arrow
&Up Arrow
keys should scroll the page.π― Current Behavior
When using
orientation="horizontal"
foruseTabList
from'@react-aria/tabs'
users will switch the tab by either usingLeft Arrow
&Right Arrow
orDown Arrow
&Up Arrow
keys.π Possible Solution
We are currently using a workaround to override the returned event handler
onKeyDown
with our own custom solution:π¦ Context
https://www.w3.org/WAI/ARIA/apg/patterns/tabs/#keyboardinteraction
π₯οΈ Steps to Reproduce
react-spectrum
tabs component)Tab
key)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