@ionic/core 8.8.11 → 8.8.12-dev.11781793379.156d3260

package/dist/collection/utils/overlay-control-label.js

@@ -0,0 +1,47 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+// TODO(FW-6886, FW-6892, FW-6891): Remove this file in favor of the Modular Ionic component config. Each overlay will be able to select its own defaults for label placement and justify based on the interface and theme, so this utility will no longer be necessary.
+/**
+ * Returns the default `labelPlacement` for a radio or checkbox option
+ * rendered inside an overlay. Defaults follow each theme's established
+ * option-row layout:
+ * - `ionic`: always `"start"`.
+ * - `ios`: `"start"` for radio in `alert` and `popover`. The `modal`
+ *   interface flips iOS radio back to `"end"`. Checkbox is always
+ *   `"end"` on iOS.
+ * - everything else (e.g. `md`): `"end"`.
+ *
+ * `interfaceType` is optional; only `"modal"` changes the result, so
+ * callers that aren't a modal can omit it.
+ *
+ * Used by `alert`, `select-popover`, and `select-modal` as the fallback
+ * when an option doesn't explicitly set `labelPlacement`.
+ */
+export const getOverlayLabelPlacement = (theme, control, interfaceType) => {
+    if (theme === 'ionic' || (theme === 'ios' && control === 'radio' && interfaceType !== 'modal')) {
+        return 'start';
+    }
+    return 'end';
+};
+/**
+ * Returns the default `justify` for a radio or checkbox option rendered
+ * inside an overlay. Defaults follow each theme's option-row layout:
+ * - `ionic`: always `"space-between"`.
+ * - `ios`: `"space-between"` for radio in `alert` and `popover`. The
+ *   `modal` interface falls back to `"start"`. Checkbox is always `"start"`
+ *   on iOS.
+ * - everything else (e.g. `md`): `"start"`.
+ *
+ * `interfaceType` is optional; only `"modal"` changes the result, so
+ * callers that aren't a modal can omit it.
+ *
+ * Used by `alert`, `select-popover`, and `select-modal` as the fallback when
+ * an option doesn't explicitly set `justify`.
+ */
+export const getOverlayLabelJustify = (theme, control, interfaceType) => {
+    if (theme === 'ionic' || (theme === 'ios' && control === 'radio' && interfaceType !== 'modal')) {
+        return 'space-between';
+    }
+    return 'start';
+};

package/dist/collection/utils/overlays.js

@@ -6,7 +6,7 @@ import { focusFirstDescendant, focusLastDescendant, focusableQueryString } from
 import { shouldUseCloseWatcher } from "./hardware-back-button";
 import { printIonError, printIonWarning } from "./logging/index";
 import { config } from "../global/config";
-import { getIonMode } from "../global/ionic-global";
+import { getIonMode, getIonTheme } from "../global/ionic-global";
 import { CoreDelegate } from "./framework-delegate";
 import { BACKDROP_NO_SCROLL } from "./gesture/gesture-controller";
 import { OVERLAY_BACK_BUTTON_PRIORITY } from "./hardware-back-button";
@@ -14,8 +14,115 @@ import { addEventListener, componentOnReady, focusVisibleElement, getElementRoot
 let lastOverlayIndex = 0;
 let lastId = 0;
 export const activeAnimations = new WeakMap();
+const OVERLAY_FOCUS_TRAP_SELECTOR = 'ion-alert,ion-action-sheet,ion-loading,ion-modal,ion-picker-legacy,ion-popover';
 /**
- * Determines if the overlay's backdrop is always blocking (no background interaction).
+ * The focus trap is generic and knows nothing about which components are
+ * inside an overlay. Components mark their elements with these `data-*`
+ * attributes, which the trap reads, to control how Tab moves through them.
+ * This keeps private component class names (e.g. `.modal-handle`,
+ * `.action-sheet-button`) out of the trap, so changing a component does
+ *  not silently break Tab order.
+ *
+ * - `data-focus-ignore`: skip this element as a tab stop.
+ * - `data-focus-order`: explicit numeric placement in the tab sequence.
+ * - `data-roving-focus`: a container whose focusable descendants share a
+ *   single tab stop via a roving tabindex.
+ */
+const FOCUS_IGNORE_SELECTOR = '[data-focus-ignore]';
+const FOCUS_ORDER_SELECTOR = '[data-focus-order]';
+const ROVING_FOCUS_SELECTOR = '[data-roving-focus]';
+/**
+ * Returns the roving-focus group an element belongs to, or `null`.
+ * A member is a descendant of a `[data-roving-focus]` container. The
+ * container itself is not a member. Members share a single tab stop.
+ */
+const getRovingFocusGroup = (el) => {
+    const group = el.closest(ROVING_FOCUS_SELECTOR);
+    return group !== null && group !== el ? group : null;
+};
+/**
+ * Whether an element participates in a roving-focus group.
+ */
+const isRovingFocusItem = (el) => getRovingFocusGroup(el) !== null;
+/**
+ * Returns the currently focused element for keyboard focus checks.
+ *
+ * Starts from `document.activeElement` (non-shadow / light DOM focus).
+ * If focus is inside one or more open shadow roots
+ * (e.g. native control inside `ion-radio`), walks through nested
+ * `shadowRoot.activeElement` values until the innermost focused node is reached.
+ */
+const getActiveElement = (ownerDoc) => {
+    var _a;
+    let active = ownerDoc.activeElement;
+    if (!active) {
+        return null;
+    }
+    while ((_a = active.shadowRoot) === null || _a === void 0 ? void 0 : _a.activeElement) {
+        active = active.shadowRoot.activeElement;
+    }
+    return active;
+};
+/**
+ * Walks from a focused node (possibly deep inside shadow roots) up to
+ * the nearest roving-focus host (e.g. `ion-radio` inside an
+ * `ion-radio-group`, or an action sheet `<button role="radio">`).
+ */
+const getRovingFocusHost = (active) => {
+    let n = active;
+    while (n) {
+        if (isRovingFocusItem(n)) {
+            return n;
+        }
+        const root = n.getRootNode();
+        if (root instanceof ShadowRoot && root.host instanceof HTMLElement) {
+            n = root.host;
+        }
+        else {
+            return null;
+        }
+    }
+    return null;
+};
+/**
+ * Reorders focusables for components that declare an explicit tab order
+ * via `data-focus-order`. Elements without the attribute keep their
+ * visual order and are visited first. Elements with it are appended
+ * afterwards, sorted by ascending numeric value.
+ *
+ * Example (sheet modal): the options have no order and are visited
+ * first in visual order, then the drag handle (`data-focus-order="1"`),
+ * then the header Cancel button (`data-focus-order="2"`).
+ */
+const applyFocusOrder = (elements) => {
+    const sortByVisualPosition = (els) => [...els].sort((a, b) => {
+        const ra = a.getBoundingClientRect();
+        const rb = b.getBoundingClientRect();
+        const topDiff = ra.top - rb.top;
+        if (Math.abs(topDiff) > 1) {
+            return topDiff;
+        }
+        return ra.left - rb.left;
+    });
+    const unordered = elements.filter((el) => !el.matches(FOCUS_ORDER_SELECTOR));
+    const ordered = elements
+        .filter((el) => el.matches(FOCUS_ORDER_SELECTOR))
+        .sort((a, b) => Number(a.getAttribute('data-focus-order')) - Number(b.getAttribute('data-focus-order')));
+    return [...sortByVisualPosition(unordered), ...ordered];
+};
+/**
+ * Roving-focus members use a tabindex pattern where only one member is
+ * tabbable (`tabIndex="0"`) while the others are not (`tabIndex="-1"`).
+ * This returns the index of the current tabbable member.
+ */
+const getTabbableRovingFocusIndex = (elements, overlay) => {
+    return elements.findIndex((el) => {
+        return overlay.contains(el) && isRovingFocusItem(el) && el.tabIndex >= 0;
+    });
+};
+/**
+ * Determines if the overlay's backdrop is always blocking
+ * (no background interaction).
  * Returns false if showBackdrop=false or backdropBreakpoint > 0.
  */
 const isBackdropAlwaysBlocking = (el) => {
@@ -136,7 +243,7 @@ const focusElementInOverlay = (hostToFocus, overlay) => {
  * Should NOT include: Toast
  */
 const trapKeyboardFocus = (ev, doc) => {
-    const lastOverlay = getPresentedOverlay(doc, 'ion-alert,ion-action-sheet,ion-loading,ion-modal,ion-picker-legacy,ion-popover');
+    const lastOverlay = getPresentedOverlay(doc, OVERLAY_FOCUS_TRAP_SELECTOR);
     const target = ev.target;
     /**
      * If no active overlay, ignore this event.
@@ -319,6 +426,176 @@ const connectListeners = (doc) => {
         doc.addEventListener('focus', (ev) => {
             trapKeyboardFocus(ev, doc);
         }, true);
+        /**
+         * Remember which roving-focus member last received focus
+         * (arrows, click, or Tab). A roving group keeps `tabIndex=0` on a
+         * single member (e.g. the checked/first radio), so the Tab trap
+         * uses this when wrapping back into the group or focusing its slot.
+         */
+        doc.addEventListener('focusin', (ev) => {
+            const lastOverlay = getPresentedOverlay(doc, OVERLAY_FOCUS_TRAP_SELECTOR);
+            if (!lastOverlay || lastOverlay.classList.contains(FOCUS_TRAP_DISABLE_CLASS)) {
+                return;
+            }
+            const target = ev.target;
+            if (!(target instanceof HTMLElement)) {
+                return;
+            }
+            const rovingHost = getRovingFocusHost(target);
+            if (rovingHost && lastOverlay.contains(rovingHost)) {
+                lastOverlay.trapLastRovingFocus = rovingHost;
+            }
+        }, true);
+        // Listen for keydown events to intercept Tab navigation.
+        // This is needed for Safari and Firefox which may skip focusable
+        // elements or allow focus to escape the overlay.
+        // It also ensures proper focus delegation for shadow DOM elements
+        // like ion-textarea.
+        doc.addEventListener('keydown', (ev) => {
+            var _a, _b, _c;
+            if (ev.key !== 'Tab' && ev.key !== 'Alt+Tab')
+                return;
+            const lastOverlay = getPresentedOverlay(doc, OVERLAY_FOCUS_TRAP_SELECTOR);
+            if (!lastOverlay || lastOverlay.classList.contains(FOCUS_TRAP_DISABLE_CLASS))
+                return;
+            const activeElement = getActiveElement(doc);
+            if (activeElement === lastOverlay) {
+                ev.preventDefault();
+                focusFirstDescendant(lastOverlay);
+                return;
+            }
+            // Check if activeElement is inside the overlay (including shadow DOM)
+            const isInsideOverlay = activeElement
+                ? lastOverlay.contains(activeElement) ||
+                    (activeElement.getRootNode() instanceof ShadowRoot &&
+                        lastOverlay.contains(activeElement.getRootNode().host)) ||
+                    ((_b = (_a = lastOverlay.shadowRoot) === null || _a === void 0 ? void 0 : _a.contains(activeElement)) !== null && _b !== void 0 ? _b : false)
+                : false;
+            if (!isInsideOverlay)
+                return;
+            // Get all focusable elements from both light and shadow DOM
+            let allFocusable = [
+                ...lastOverlay.querySelectorAll(focusableQueryString),
+                ...(((_c = lastOverlay.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelectorAll(focusableQueryString)) || []),
+            ];
+            /**
+             * Some elements match `focusableQueryString` but are not
+             * intended tab stops (e.g. the `ion-item` wrappers a select
+             * modal renders around its options). Components opt these out
+             * with `data-focus-ignore` so Tab can move between the real
+             * controls.
+             */
+            allFocusable = allFocusable.filter((el) => !el.matches(FOCUS_IGNORE_SELECTOR));
+            /**
+             * A roving-focus group is a single tab stop: only its currently
+             * tabbable member (`tabIndex >= 0`) participates. Other
+             * focusables inside the group are not independent tab stops —
+             * this includes inactive members and focusable wrappers such as
+             * the `ion-item` that carries `ion-focusable` on behalf of a
+             * radio. Drop them so Tab moves between the group and the
+             * surrounding controls (e.g. the handle), not into the wrappers.
+             */
+            allFocusable = allFocusable.filter((el) => !isRovingFocusItem(el) || el.tabIndex >= 0);
+            /**
+             * When a component declares an explicit tab order via
+             * `data-focus-order` (e.g. a sheet modal's handle and Cancel
+             * button), reorder accordingly. Overlays that declare no order
+             * keep their DOM order.
+             */
+            if (allFocusable.some((el) => el.matches(FOCUS_ORDER_SELECTOR))) {
+                allFocusable = applyFocusOrder(allFocusable);
+            }
+            if (allFocusable.length === 0) {
+                ev.preventDefault();
+                return;
+            }
+            // Find current element's index (accounting for shadow DOM)
+            let currentIndex = activeElement
+                ? allFocusable.findIndex((el) => {
+                    var _a;
+                    if (el === activeElement)
+                        return true;
+                    if ((_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.contains(activeElement))
+                        return true;
+                    const rootNode = activeElement.getRootNode();
+                    return rootNode instanceof ShadowRoot && rootNode.host === el;
+                })
+                : -1;
+            /**
+             * A roving-focus group keeps `tabIndex=0` on a single member
+             * while the others are `-1`. Arrow keys can move focus onto a
+             * `tabIndex=-1` member, which `focusableQueryString` excludes,
+             * so `findIndex` yields -1 and Tab would wrap to
+             * `allFocusable[0]`. Treat focus on any group member as the
+             * group's tabbable slot so Tab goes to the next control (e.g.
+             * handle → Cancel), not back to the first member.
+             */
+            if (currentIndex < 0 && activeElement) {
+                const rovingHost = getRovingFocusHost(activeElement);
+                if (rovingHost && lastOverlay.contains(rovingHost)) {
+                    const directIndex = allFocusable.indexOf(rovingHost);
+                    if (directIndex >= 0) {
+                        currentIndex = directIndex;
+                    }
+                    else {
+                        const tabbableIndex = getTabbableRovingFocusIndex(allFocusable, lastOverlay);
+                        if (tabbableIndex >= 0) {
+                            currentIndex = tabbableIndex;
+                        }
+                    }
+                }
+            }
+            ev.preventDefault();
+            // Helper to focus an element, handling shadow DOM properly
+            const focusElement = (element) => {
+                const shadowRoot = element.shadowRoot;
+                if (shadowRoot) {
+                    const innerFocusable = shadowRoot.querySelector(focusableQueryString);
+                    if (innerFocusable && typeof element.setFocus !== 'function') {
+                        focusVisibleElement(innerFocusable);
+                        return;
+                    }
+                }
+                focusVisibleElement(element);
+            };
+            let nextIndex;
+            if (ev.shiftKey) {
+                // Shift+Tab: previous element, wrap to last if at first
+                if (currentIndex <= 0) {
+                    nextIndex = allFocusable.length - 1;
+                }
+                else {
+                    nextIndex = currentIndex - 1;
+                }
+            }
+            else {
+                // Tab: next element, wrap to first if at last
+                if (currentIndex < 0 || currentIndex >= allFocusable.length - 1) {
+                    nextIndex = 0;
+                }
+                else {
+                    nextIndex = currentIndex + 1;
+                }
+            }
+            const nextEl = allFocusable[nextIndex];
+            const overlayTrap = lastOverlay;
+            const tabbableRovingIndex = getTabbableRovingFocusIndex(allFocusable, lastOverlay);
+            /**
+             * The trap list only includes one tabbable member of a roving
+             * group (`tabIndex >= 0`), usually the checked/first radio.
+             * `focusin` tracks the real last-focused member. Use it whenever
+             * Tab would focus that slot (wrap from Cancel, Shift+Tab from
+             * handle, etc.).
+             */
+            let focusTarget = nextEl;
+            if (tabbableRovingIndex >= 0 && nextIndex === tabbableRovingIndex) {
+                const saved = overlayTrap.trapLastRovingFocus;
+                if ((saved === null || saved === void 0 ? void 0 : saved.isConnected) && lastOverlay.contains(saved) && saved !== nextEl) {
+                    focusTarget = saved;
+                }
+            }
+            focusElement(focusTarget);
+        }, true);
         // handle back-button click
         doc.addEventListener('ionBackButton', (ev) => {
             const lastOverlay = getPresentedOverlay(doc);
@@ -432,7 +709,7 @@ export const setRootAriaHidden = (hidden = false) => {
         viewContainer.removeAttribute('aria-hidden');
     }
 };
-export const present = async (overlay, name, iosEnterAnimation, mdEnterAnimation, opts) => {
+export const present = async (overlay, name, iosEnterAnimation, mdEnterAnimation, ionicEnterAnimation, opts) => {
     var _a, _b;
     if (overlay.presented) {
         return;
@@ -480,11 +757,15 @@ export const present = async (overlay, name, iosEnterAnimation, mdEnterAnimation
         document.body.classList.add(BACKDROP_NO_SCROLL);
     }
     (_a = overlay.willPresentShorthand) === null || _a === void 0 ? void 0 : _a.emit();
+    const theme = getIonTheme(overlay);
     const mode = getIonMode(overlay);
+    const selectedAnimation = mode === 'ios'
+        ? iosEnterAnimation
+        : theme === 'ionic' && ionicEnterAnimation
+            ? ionicEnterAnimation
+            : mdEnterAnimation;
     // get the user's animation fn if one was provided
-    const animationBuilder = overlay.enterAnimation
-        ? overlay.enterAnimation
-        : config.get(name, mode === 'ios' ? iosEnterAnimation : mdEnterAnimation);
+    const animationBuilder = overlay.enterAnimation ? overlay.enterAnimation : config.get(name, selectedAnimation);
     const completed = await overlayAnimation(overlay, animationBuilder, overlay.el, opts);
     if (completed) {
         overlay.didPresent.emit();
@@ -639,7 +920,8 @@ export const dismiss = async (overlay, data, role, name, iosLeaveAnimation, mdLe
     return true;
 };
 const getAppRoot = (doc) => {
-    return doc.querySelector('ion-app') || doc.body;
+    const appRootSelector = config.get('appRootSelector', 'ion-app');
+    return doc.querySelector(appRootSelector) || doc.body;
 };
 const overlayAnimation = async (overlay, animationBuilder, baseEl, opts) => {
     // Make overlay visible in case it's hidden