fix(overlays): clean up aria-hidden when overlay is removed without dismis and clean up empty path reuse issue

Author: ShaneK

core/src/components/action-sheet/action-sheet.tsx

@@ -15,6 +15,7 @@ import {
   present,
   safeCall,
   setOverlayId,
+  cleanupRootFocusTrapAccessibility,
 } from '@utils/overlays';
 import { getClassMap } from '@utils/theme';
 
@@ -460,6 +461,15 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
       this.gesture = undefined;
     }
     this.triggerController.removeClickListener();
+
+    if (this.presented) {
+      const el = this.el;
+      setTimeout(() => {
+        if (!el.isConnected) {
+          cleanupRootFocusTrapAccessibility();
+        }
+      }, 0);
+    }
   }
 
   componentWillLoad() {

core/src/components/alert/alert.tsx

@@ -17,6 +17,7 @@ import {
   present,
   safeCall,
   setOverlayId,
+  cleanupRootFocusTrapAccessibility,
 } from '@utils/overlays';
 import { sanitizeDOMString } from '@utils/sanitization';
 import { getClassMap } from '@utils/theme';
@@ -368,6 +369,15 @@ export class Alert implements ComponentInterface, OverlayInterface {
       this.gesture.destroy();
       this.gesture = undefined;
     }
+
+    if (this.presented) {
+      const el = this.el;
+      setTimeout(() => {
+        if (!el.isConnected) {
+          cleanupRootFocusTrapAccessibility();
+        }
+      }, 0);
+    }
   }
 
   componentDidLoad() {

core/src/components/loading/loading.tsx

@@ -12,6 +12,7 @@ import {
   createDelegateController,
   createTriggerController,
   setOverlayId,
+  cleanupRootFocusTrapAccessibility,
 } from '@utils/overlays';
 import { sanitizeDOMString } from '@utils/sanitization';
 import { getClassMap } from '@utils/theme';
@@ -242,6 +243,15 @@ export class Loading implements ComponentInterface, OverlayInterface {
 
   disconnectedCallback() {
     this.triggerController.removeClickListener();
+
+    if (this.presented) {
+      const el = this.el;
+      setTimeout(() => {
+        if (!el.isConnected) {
+          cleanupRootFocusTrapAccessibility();
+        }
+      }, 0);
+    }
   }
 
   /**

core/src/components/modal/modal.tsx

@@ -17,6 +17,7 @@ import {
   createTriggerController,
   setOverlayId,
   FOCUS_TRAP_DISABLE_CLASS,
+  cleanupRootFocusTrapAccessibility,
 } from '@utils/overlays';
 import { getClassMap } from '@utils/theme';
 import { deepReady, waitForMount } from '@utils/transition';
@@ -458,6 +459,21 @@ export class Modal implements ComponentInterface, OverlayInterface {
     // Also called in dismiss() — intentional dual cleanup covers both
     // dismiss-then-remove and direct DOM removal without dismiss.
     this.cleanupSafeAreaOverrides();
+
+    // If the modal was removed from the DOM while still presented
+    // (e.g., a framework unmounted it during a route change without
+    // calling dismiss()), clean up aria-hidden on the root outlet
+    // so the app remains accessible.
+    // Deferred to a microtask so DOM moves (disconnect + reconnect in
+    // the same tick, e.g. React portals) don't prematurely clear it.
+    if (this.presented) {
+      const el = this.el;
+      setTimeout(() => {
+        if (!el.isConnected) {
+          cleanupRootFocusTrapAccessibility();
+        }
+      }, 0);
+    }
   }
 
   componentWillLoad() {

core/src/components/popover/popover.tsx

@@ -13,6 +13,7 @@ import {
   present,
   setOverlayId,
   FOCUS_TRAP_DISABLE_CLASS,
+  cleanupRootFocusTrapAccessibility,
 } from '@utils/overlays';
 import { isPlatform } from '@utils/platform';
 import { getClassMap } from '@utils/theme';
@@ -367,6 +368,15 @@ export class Popover implements ComponentInterface, PopoverInterface {
       this.headerResizeObserver.disconnect();
       this.headerResizeObserver = undefined;
     }
+
+    if (this.presented) {
+      const el = this.el;
+      setTimeout(() => {
+        if (!el.isConnected) {
+          cleanupRootFocusTrapAccessibility();
+        }
+      }, 0);
+    }
   }
 
   componentWillLoad() {

core/src/utils/overlays.ts

@@ -515,6 +515,28 @@ export const setRootAriaHidden = (hidden = false) => {
   }
 };
 
+/**
+ * Cleans up root `aria-hidden` and `backdrop-no-scroll` when
+ * an overlay is removed from the DOM without going through
+ * the `dismiss()` flow (e.g., when a framework unmounts the
+ * overlay during a route change).
+ *
+ * Should be called from an overlay's `disconnectedCallback`
+ * when the overlay was still presented at the time of removal.
+ */
+export const cleanupRootFocusTrapAccessibility = () => {
+  const remainingOverlays = getPresentedOverlays(document);
+  const hasRemainingLocking = remainingOverlays.some((o) => {
+    const el = o as OverlayWithFocusTrapProps;
+    return el.tagName !== 'ION-TOAST' && el.focusTrap !== false && isBackdropAlwaysBlocking(el);
+  });
+
+  if (!hasRemainingLocking) {
+    setRootAriaHidden(false);
+    document.body.classList.remove(BACKDROP_NO_SCROLL);
+  }
+};
+
 export const present = async <OverlayPresentOptions>(
   overlay: OverlayInterface,
   name: keyof IonicConfig,

packages/react-router/src/ReactRouter/ReactRouterViewStack.tsx

@@ -270,9 +270,16 @@ export class ReactRouterViewStack extends ViewStacks {
         return true;
       }
 
+      // Reuse empty-path routes (path="") that are not index routes.
+      // These function like index routes and should be reused to prevent
+      // duplicate views when navigating back to the default path.
+      if (existingPath === '' && routePath === '' && !existingIsIndexRoute && !newIsIndexRoute) {
+        return true;
+      }
+
       // Reuse view items with the same path
       // Special case: reuse tabs/* and other specific wildcard routes
-      // Don't reuse index routes (empty path) or generic catch-all wildcards (*)
+      // Don't reuse generic catch-all wildcards (*)
       if (existingPath === routePath && existingPath !== '' && existingPath !== '*') {
         // Parameterized routes need pathname matching to ensure /details/1 and /details/2
         // get separate view items. For wildcard routes (e.g., user/:userId/*), compare

packages/react-router/test/base/src/App.tsx

@@ -55,6 +55,8 @@ import IndexRouteReuse from './pages/index-route-reuse/IndexRouteReuse';
 import TailSliceAmbiguity from './pages/tail-slice-ambiguity/TailSliceAmbiguity';
 import WildcardNoHeuristic from './pages/wildcard-no-heuristic/WildcardNoHeuristic';
 import RouteContextShape from './pages/route-context-shape/RouteContextShape';
+import EmptyPathDeactivation from './pages/empty-path-deactivation/EmptyPathDeactivation';
+import ModalAriaHidden from './pages/modal-aria-hidden/ModalAriaHidden';
 
 setupIonicReact();
 
@@ -99,6 +101,8 @@ const App: React.FC = () => {
           <Route path="/tail-slice-ambiguity/*" element={<TailSliceAmbiguity />} />
           <Route path="/wildcard-no-heuristic/*" element={<WildcardNoHeuristic />} />
           <Route path="/route-context-shape/*" element={<RouteContextShape />} />
+          <Route path="/empty-path-deactivation/*" element={<EmptyPathDeactivation />} />
+          <Route path="/modal-aria-hidden/*" element={<ModalAriaHidden />} />
         </IonRouterOutlet>
       </IonReactRouter>
     </IonApp>

packages/react-router/test/base/src/pages/Main.tsx

@@ -110,6 +110,12 @@ const Main: React.FC = () => {
           <IonItem routerLink="/route-context-shape">
             <IonLabel>Route Context Shape</IonLabel>
           </IonItem>
+          <IonItem routerLink="/empty-path-deactivation">
+            <IonLabel>Empty Path Deactivation</IonLabel>
+          </IonItem>
+          <IonItem routerLink="/modal-aria-hidden">
+            <IonLabel>Modal Aria Hidden</IonLabel>
+          </IonItem>
         </IonList>
       </IonContent>
     </IonPage>

packages/react-router/test/base/src/pages/empty-path-deactivation/EmptyPathDeactivation.tsx

@@ -0,0 +1,100 @@
+import {
+  IonButton,
+  IonContent,
+  IonHeader,
+  IonLabel,
+  IonPage,
+  IonRouterOutlet,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/react';
+import React from 'react';
+import { Route, useLocation, useParams } from 'react-router-dom';
+
+/**
+ * Test page for empty-path route deactivation behavior.
+ *
+ * Route structure:
+ *   /empty-path-deactivation/*
+ *     └── <IonRouterOutlet>
+ *           ├── path="" → DefaultPage (matches at /empty-path-deactivation)
+ *           ├── path="details/:id" → DetailsPage
+ *           └── path="*" → CatchAllPage
+ *
+ * Bug scenario:
+ *   1. Navigate to /empty-path-deactivation → DefaultPage shows (path="" matches)
+ *   2. Navigate to /empty-path-deactivation/details/42 → DetailsPage shows
+ *   3. Navigate to /empty-path-deactivation/extra/details/99
+ *   4. derivePathnameToMatch tail-slices ["details","99"] → false match on details/:id
+ *   5. hasSpecificMatch becomes true → path="" view set to mount=false + ion-page-hidden
+ *   6. Navigate back to /empty-path-deactivation → DefaultPage may remain hidden
+ *
+ * Uses path="" (not index) to test a different code path from the
+ * tail-slice-ambiguity test which uses <Route index>.
+ */
+const EmptyPathDeactivation: React.FC = () => (
+  <IonRouterOutlet id="empty-path-outlet">
+    <Route path="" element={<DefaultPage />} />
+    <Route path="details/:id" element={<DetailsPage />} />
+    <Route path="*" element={<CatchAllPage />} />
+  </IonRouterOutlet>
+);
+
+const DefaultPage: React.FC = () => (
+  <IonPage data-pageid="empty-path-default">
+    <IonHeader>
+      <IonToolbar>
+        <IonTitle>Default</IonTitle>
+      </IonToolbar>
+    </IonHeader>
+    <IonContent>
+      <IonLabel data-testid="default-label">Default Page Content</IonLabel>
+      <IonButton routerLink="/empty-path-deactivation/details/42" id="go-to-details">
+        Details 42
+      </IonButton>
+      <IonButton routerLink="/empty-path-deactivation/extra/details/99" id="go-to-ambiguous">
+        Ambiguous Path
+      </IonButton>
+    </IonContent>
+  </IonPage>
+);
+
+const DetailsPage: React.FC = () => {
+  const { id } = useParams<{ id: string }>();
+  return (
+    <IonPage data-pageid="empty-path-details">
+      <IonHeader>
+        <IonToolbar>
+          <IonTitle>Details</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent>
+        <IonLabel data-testid="details-id">Details ID: {id}</IonLabel>
+        <IonButton routerLink="/empty-path-deactivation" id="back-to-default">
+          Back to Default
+        </IonButton>
+      </IonContent>
+    </IonPage>
+  );
+};
+
+const CatchAllPage: React.FC = () => {
+  const location = useLocation();
+  return (
+    <IonPage data-pageid="empty-path-catchall">
+      <IonHeader>
+        <IonToolbar>
+          <IonTitle>Catch All</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent>
+        <IonLabel data-testid="catchall-path">Catch-all: {location.pathname}</IonLabel>
+        <IonButton routerLink="/empty-path-deactivation" id="catchall-back-to-default">
+          Back to Default
+        </IonButton>
+      </IonContent>
+    </IonPage>
+  );
+};
+
+export default EmptyPathDeactivation;