@ionic/core 9.0.1-dev.11787949960.1e63841c → 9.0.1-dev.11788285010.17561004

package/dist/collection/utils/overlays.js

@@ -21,15 +21,6 @@ export const activeAnimations = new WeakMap();
 const isBackdropAlwaysBlocking = (el) => {
     return el.showBackdrop !== false && !((el.backdropBreakpoint ?? 0) > 0);
 };
-/**
- * Whether the overlay takes the app root out of the accessibility tree and
- * blocks body scroll while presented. Toasts never do, modal and popover can
- * opt out with `focusTrap={false}`, and a backdrop that does not block
- * (`showBackdrop={false}`, or a `backdropBreakpoint` above 0) is excluded.
- */
-const locksAppRoot = (el) => {
-    return el.tagName !== 'ION-TOAST' && el.focusTrap !== false && isBackdropAlwaysBlocking(el);
-};
 const createController = (tagName) => {
     return {
         create(options) {
@@ -400,13 +391,6 @@ export const getPresentedOverlay = (doc, overlayTag, id) => {
     // Otherwise, return the last overlay with the given id
     return (id === undefined ? overlays : overlays.filter((o) => o.id === id)).slice(-1)[0];
 };
-/**
- * The element an app nests its views under. Overlays hide this rather than the
- * whole root, so the overlay itself (a sibling) stays reachable.
- */
-const getViewContainer = () => {
-    return getAppRoot(document).querySelector('ion-router-outlet, #ion-view-container-root');
-};
 /**
  * When an overlay is presented, the main
  * focus is the overlay not the page content.
@@ -430,7 +414,8 @@ const getViewContainer = () => {
  * for main content.
  */
 export const setRootAriaHidden = (hidden = false) => {
-    const viewContainer = getViewContainer();
+    const root = getAppRoot(document);
+    const viewContainer = root.querySelector('ion-router-outlet, #ion-view-container-root');
     if (!viewContainer) {
         return;
     }
@@ -455,42 +440,15 @@ export const cleanupRootFocusTrapAccessibility = () => {
         return;
     }
     const remainingOverlays = getPresentedOverlays(document);
-    const hasRemainingLocking = remainingOverlays.some((o) => locksAppRoot(o));
+    const hasRemainingLocking = remainingOverlays.some((o) => {
+        const el = o;
+        return el.tagName !== 'ION-TOAST' && el.focusTrap !== false && isBackdropAlwaysBlocking(el);
+    });
     if (!hasRemainingLocking) {
         setRootAriaHidden(false);
         document.body.classList.remove(BACKDROP_NO_SCROLL);
     }
 };
-/**
- * Applies the root lock itself: `aria-hidden` on the view container, and
- * `backdrop-no-scroll` on the body. Shared by `present()` and the restore
- * below, which have to stay in lockstep.
- */
-const applyRootLock = (el) => {
-    // Hiding the container the overlay now sits in would hide the overlay too.
-    if (!getViewContainer()?.contains(el)) {
-        setRootAriaHidden(true);
-    }
-    document.body.classList.add(BACKDROP_NO_SCROLL);
-};
-/**
- * Re-applies the root lock that `cleanupRootFocusTrapAccessibility()` released.
- * Call from `connectedCallback` when the overlay is still presented.
- *
- * A synchronous move keeps the overlay connected, so the lock survives. A
- * detach with a re-insert in a later task releases it, which is the shape a
- * framework produces when it takes a subtree out and puts it back.
- */
-export const restoreRootFocusTrapAccessibility = (overlayEl) => {
-    if (typeof document === 'undefined') {
-        return;
-    }
-    const el = overlayEl;
-    if (!locksAppRoot(el)) {
-        return;
-    }
-    applyRootLock(el);
-};
 export const present = async (overlay, name, iosEnterAnimation, mdEnterAnimation, opts) => {
     if (overlay.presented) {
         return;
@@ -507,7 +465,15 @@ export const present = async (overlay, name, iosEnterAnimation, mdEnterAnimation
         restoreElementFocus(overlay.el);
     }
     /**
-     * Some apps move inline overlays to a specific container
+     * Due to accessibility guidelines, toasts do not have
+     * focus traps.
+     *
+     * All other overlays should have focus traps to prevent
+     * the keyboard focus from leaving the overlay unless
+     * developers explicitly opt out (for example, sheet
+     * modals that should permit background interaction).
+     *
+     * Note: Some apps move inline overlays to a specific container
      * during the willPresent lifecycle (e.g., React portals via
      * onWillPresent). Defer applying aria-hidden/inert to the app
      * root until after willPresent so we can detect where the
@@ -516,11 +482,18 @@ export const present = async (overlay, name, iosEnterAnimation, mdEnterAnimation
      * to avoid disabling the overlay.
      */
     const overlayEl = overlay.el;
-    const shouldLockRoot = locksAppRoot(overlayEl);
+    const shouldTrapFocus = overlayEl.tagName !== 'ION-TOAST' && overlayEl.focusTrap !== false;
+    const shouldLockRoot = shouldTrapFocus && isBackdropAlwaysBlocking(overlayEl);
     overlay.presented = true;
     overlay.willPresent.emit();
     if (shouldLockRoot) {
-        applyRootLock(overlayEl);
+        const root = getAppRoot(document);
+        const viewContainer = root.querySelector('ion-router-outlet, #ion-view-container-root');
+        const overlayInsideViewContainer = viewContainer ? viewContainer.contains(overlayEl) : false;
+        if (!overlayInsideViewContainer) {
+            setRootAriaHidden(true);
+        }
+        document.body.classList.add(BACKDROP_NO_SCROLL);
     }
     overlay.willPresentShorthand?.emit();
     const mode = getIonMode(overlay);
@@ -646,9 +619,12 @@ export const dismiss = async (overlay, data, role, name, iosLeaveAnimation, mdLe
      * from the root element when the last focus-trapping overlay
      * is dismissed.
      */
-    const overlaysLockingRoot = presentedOverlays.filter((o) => locksAppRoot(o));
+    const overlaysLockingRoot = presentedOverlays.filter((o) => {
+        const el = o;
+        return el.tagName !== 'ION-TOAST' && el.focusTrap !== false && isBackdropAlwaysBlocking(el);
+    });
     const overlayEl = overlay.el;
-    const locksRoot = locksAppRoot(overlayEl);
+    const locksRoot = overlayEl.tagName !== 'ION-TOAST' && overlayEl.focusTrap !== false && isBackdropAlwaysBlocking(overlayEl);
     /**
      * If this is the last visible overlay that is trapping focus
      * then we want to re-add the root to the accessibility tree.

package/dist/collection/utils/test/playwright/index.js

@@ -10,4 +10,3 @@ export * from './apply-keyboard-focus';
 export * from './matchers';
 export * from './viewports';
 export * from './generator';
-export * from './detach-reattach';