fix(Tabs): default shouldSelectOnPressUp to true if item is a link (#9827)

* useTab: default shouldSelectOnPressUp to true if item is a link

* add story

* Revert "add story"

This reverts commit 981c1d8.

Author: reidbarber

packages/react-aria-components/test/Tabs.test.js

@@ -13,6 +13,7 @@
 import {act, fireEvent, pointerMap, render, waitFor, within} from '@react-spectrum/test-utils-internal';
 import {Button} from '../src/Button';
 import React, {useState} from 'react';
+import {RouterProvider} from 'react-aria/private/utils/openLink';
 import {Tab, TabList, TabPanel, TabPanels, Tabs} from '../src/Tabs';
 import {TabsExample} from '../stories/Tabs.stories';
 import {Tooltip, TooltipTrigger} from '../src/Tooltip';
@@ -497,6 +498,35 @@ describe('Tabs', () => {
     expect(tabs[2]).toHaveAttribute('aria-selected', 'true');
   });
 
+  it('should navigate linked tabs on click rather than mouse down', async function () {
+    let navigate = jest.fn();
+    let {getAllByRole} = render(
+      <RouterProvider navigate={navigate}>
+        <Tabs selectedKey="/a">
+          <TabList aria-label="Test">
+            <Tab id="/a" href="/a">A</Tab>
+            <Tab id="/b" href="/b">B</Tab>
+          </TabList>
+          <TabPanel id="/a">A</TabPanel>
+          <TabPanel id="/b">B</TabPanel>
+        </Tabs>
+      </RouterProvider>
+    );
+
+    let tabs = getAllByRole('tab');
+    fireEvent.mouseDown(tabs[1], {button: 0, detail: 1});
+    expect(navigate).not.toHaveBeenCalled();
+
+    fireEvent.mouseLeave(tabs[1]);
+    fireEvent.mouseEnter(tabs[1]);
+    expect(navigate).not.toHaveBeenCalled();
+
+    fireEvent.mouseUp(tabs[1], {button: 0, detail: 1});
+    fireEvent.click(tabs[1], {button: 0, detail: 1});
+    expect(navigate).toHaveBeenCalledTimes(1);
+    expect(navigate).toHaveBeenCalledWith('/b', undefined);
+  });
+
   it('should render tab with aria-label', () => {
     let {getAllByRole} = render(
       <Tabs>

packages/react-aria/src/tabs/useTab.ts

@@ -54,20 +54,23 @@ export function useTab<T>(
   let isSelected = key === selectedKey;
 
   let isDisabled = propsDisabled || state.isDisabled || state.selectionManager.isDisabled(key);
+  let item = state.collection.getItem(key);
   let {itemProps, isPressed} = useSelectableItem({
     selectionManager: manager,
     key,
     ref,
     isDisabled,
-    shouldSelectOnPressUp,
+    // Link tabs should behave like native anchors (navigate on press up)
+    // This avoids reopening beforeunload dialogs when browsers replay
+    // queued pointer enter/leave events after cancellation.
+    shouldSelectOnPressUp: shouldSelectOnPressUp ?? item?.props.href != null,
     linkBehavior: 'selection'
   });
 
   let tabId = generateId(state, key, 'tab');
   let tabPanelId = generateId(state, key, 'tabpanel');
   let {tabIndex} = itemProps;
 
-  let item = state.collection.getItem(key);
   let domProps = filterDOMProps(item?.props, {labelable: true});
   delete domProps.id;
   let linkProps = useLinkProps(item?.props);