feat(ui): Provide aria router for tabs, links (#83181)

Author: scttcper

static/app/routes.tsx

@@ -7,6 +7,7 @@ import {t} from 'sentry/locale';
 import HookStore from 'sentry/stores/hookStore';
 import type {HookName} from 'sentry/types/hooks';
 import errorHandler from 'sentry/utils/errorHandler';
+import {ProvideAriaRouter} from 'sentry/utils/provideAriaRouter';
 import retryableImport from 'sentry/utils/retryableImport';
 import withDomainRedirect from 'sentry/utils/withDomainRedirect';
 import withDomainRequired from 'sentry/utils/withDomainRequired';
@@ -2450,15 +2451,17 @@ function buildRoutes() {
   );
 
   const appRoutes = (
-    <Route>
-      {experimentalSpaRoutes}
-      <Route path="/" component={errorHandler(App)}>
-        {rootRoutes}
-        {organizationRoutes}
-        {legacyRedirectRoutes}
-        <Route path="*" component={errorHandler(RouteNotFound)} />
+    <ProvideAriaRouter>
+      <Route>
+        {experimentalSpaRoutes}
+        <Route path="/" component={errorHandler(App)}>
+          {rootRoutes}
+          {organizationRoutes}
+          {legacyRedirectRoutes}
+          <Route path="*" component={errorHandler(RouteNotFound)} />
+        </Route>
       </Route>
-    </Route>
+    </ProvideAriaRouter>
   );
 
   return appRoutes;

static/app/utils/provideAriaRouter.tsx

@@ -0,0 +1,17 @@
+import {useHref} from 'react-router-dom';
+import {RouterProvider as AriaRouterProvider} from '@react-aria/utils';
+
+import {useNavigate} from 'sentry/utils/useNavigate';
+/**
+ * React aira has its own context for useTabs, useMenuItem, useLink, etc.
+ * We need to provide the router instance so it knows how to navigate.
+ * @link https://react-spectrum.adobe.com/react-aria/routing.html#react-router
+ */
+export function ProvideAriaRouter({children}: {children: React.ReactNode}) {
+  const navigate = useNavigate();
+  return (
+    <AriaRouterProvider navigate={navigate} useHref={useHref}>
+      {children}
+    </AriaRouterProvider>
+  );
+}

static/app/views/insights/common/components/chart.spec.tsx

@@ -27,7 +27,9 @@ describe('Chart', function () {
     const parsingError = new Error('Could not parse chart data');
 
     render(
-      <Chart error={parsingError} data={[]} loading={false} type={ChartType.LINE} />
+      <Chart error={parsingError} data={[]} loading={false} type={ChartType.LINE} />,
+      // Mocked useRef breaks router
+      {disableRouterMocks: true}
     );
 
     expect(screen.getByTestId('chart-error-panel')).toBeInTheDocument();
@@ -55,7 +57,10 @@ describe('Chart', function () {
         }),
       },
     ];
-    render(<Chart data={mockedSeries} loading={false} type={ChartType.LINE} />);
+    render(<Chart data={mockedSeries} loading={false} type={ChartType.LINE} />, {
+      // Mocked useRef breaks router
+      disableRouterMocks: true,
+    });
     expect(jest.mocked(BaseChart).mock.calls[0]![0].series?.[0]).toHaveProperty(
       'markLine'
     );

tests/js/sentry-test/reactTestingLibrary.tsx

@@ -13,6 +13,7 @@ import GlobalModal from 'sentry/components/globalModal';
 import type {InjectedRouter} from 'sentry/types/legacyReactRouter';
 import type {Organization} from 'sentry/types/organization';
 import {DANGEROUS_SET_TEST_HISTORY} from 'sentry/utils/browserHistory';
+import {ProvideAriaRouter} from 'sentry/utils/provideAriaRouter';
 import {QueryClientProvider} from 'sentry/utils/queryClient';
 import {lightTheme} from 'sentry/utils/theme';
 import {OrganizationContext} from 'sentry/views/organizationContext';
@@ -69,7 +70,8 @@ function makeAllTheProviders(options: ProviderOptions) {
           routes: router.routes,
         }}
       >
-        {content}
+        {/* ProvideAriaRouter may not be necessary in tests but matches routes.tsx */}
+        <ProvideAriaRouter>{content}</ProvideAriaRouter>
       </TestRouteContext.Provider>
     );