Tabs as links - When navigating with your keyboard, links are triggers automatically, preventing the navigation to other tabs

[cdedreuille]

Provide a general summary of the issue here

When using tabs as links I noticed that when you are navigating with your keyboard the tab is clicked automatically, preventing you from navigating to the other tabs and choosing the one to click.

 <Tabs>
  <TabList aria-label="Tabs">
    <Tab id="/" href="/">
      Home
    </Tab>
    <Tab id="/shared" href="/shared">
      Shared
    </Tab>
    <Tab id="/deleted" href="/deleted">
      Deleted
    </Tab>
  </TabList>
</Tabs>

🤔 Expected Behavior?

1. Press the tab key to select the first tab
2. Press the right arrow multiple time to select the tab you want to navigate to
3. Press Enter to navigate to this link

😯 Current Behavior

1. Press the tab key to select the first tab
2. Press the right arrow once
3. ❌ The link is triggered straight away, preventing us to move to the other tabs.

💁 Possible Solution

Ideally the expected behaviour would be to be able to navigate with arrows left and right on your keyboard when in focus on tabs and only when you're ready to navigate to the links you chosen you'll press enter.

🔦 Context

No response

🖥️ Steps to Reproduce

You can test it here - https://codesandbox.io/p/sandbox/react-spectrum-xfmmpk
If the link doesn't work, just use this code:

 <Tabs>
  <TabList aria-label="Tabs">
    <Tab id="/" href="/">
      Home
    </Tab>
    <Tab id="/shared" href="/shared">
      Shared
    </Tab>
    <Tab id="/deleted" href="/deleted">
      Deleted
    </Tab>
  </TabList>
</Tabs>

And try to navigate with your keyboard on each tab. You should see that as soon as you navigate to the second one the link is triggered.

Version

react-aria-components@1.10.1

What browsers are you seeing the problem on?

Chrome

If other, please specify.

No response

What operating system are you using?

Mac OS - Sequoia

🧢 Your Company/Team

Spotify

🕷 Tracking Issue

No response

[snowystinger]

Can you try using this prop? https://react-spectrum.adobe.com/react-aria/Tabs.html#keyboard-activation

[cdedreuille]

Thanks a lot @snowystinger. I totally missed it. It works very well 👍