@ionic/core 9.0.1-dev.11787248963.10a00c73 → 9.0.1-dev.11787949960.1e63841c

package/dist/collection/components/popover/popover.js

@@ -7,7 +7,7 @@ import { CoreDelegate, attachComponent, detachComponent } from "../../utils/fram
 import { addEventListener, raf, hasLazyBuild } from "../../utils/helpers";
 import { createLockController } from "../../utils/lock-controller";
 import { printIonWarning } from "../../utils/logging/index";
-import { BACKDROP, cleanupRootFocusTrapAccessibility, dismiss, eventMethod, FOCUS_TRAP_DISABLE_CLASS, prepareOverlay, present, setOverlayId, } from "../../utils/overlays";
+import { BACKDROP, cleanupRootFocusTrapAccessibility, dismiss, eventMethod, FOCUS_TRAP_DISABLE_CLASS, prepareOverlay, present, restoreRootFocusTrapAccessibility, setOverlayId, } from "../../utils/overlays";
 import { isPlatform } from "../../utils/platform";
 import { getClassMap } from "../../utils/theme";
 import { deepReady, waitForMount } from "../../utils/transition/index";
@@ -219,6 +219,13 @@ export class Popover {
         const { configureTriggerInteraction, el } = this;
         prepareOverlay(el);
         configureTriggerInteraction();
+        // Re-apply the root lock if moved without dismiss() being called
+        if (this.presented) {
+            restoreRootFocusTrapAccessibility(el);
+            // The disconnect tore down the header observer, and `present()` is its
+            // only other caller, so a move mid-layout would lose the recalculation.
+            this.recalculateContentOnHeaderReady();
+        }
     }
     disconnectedCallback() {
         const { destroyTriggerInteraction } = this;
@@ -396,6 +403,12 @@ export class Popover {
         if (!header || contentElements.length === 0) {
             return;
         }
+        // Both `present()` and a reconnect call this, so drop any existing
+        // observer. Below the guards, so a call that bails cannot leave none.
+        if (this.headerResizeObserver) {
+            this.headerResizeObserver.disconnect();
+            this.headerResizeObserver = undefined;
+        }
         this.headerResizeObserver = new ResizeObserver(async () => {
             if (header.offsetHeight > 0) {
                 this.headerResizeObserver?.disconnect();
@@ -468,7 +481,7 @@ export class Popover {
         const { onLifecycle, parentPopover, dismissOnSelect, side, arrow, htmlAttributes, focusTrap } = this;
         const desktop = isPlatform('desktop');
         const enableArrow = arrow && !parentPopover;
-        return (h(Host, { key: '52ffc7116969ae1b8b927e67f2acbfe5f5434f70', "aria-modal": "true", "no-router": true, tabindex: "-1", ...htmlAttributes, style: {
+        return (h(Host, { key: 'b5e9c788f58397203976d5f8302dfb89e916efe1', "aria-modal": "true", "no-router": true, tabindex: "-1", ...htmlAttributes, style: {
                 zIndex: `${20000 + this.overlayIndex}`,
             }, class: {
                 ...getClassMap(this.cssClass),
@@ -479,7 +492,7 @@ export class Popover {
                 [`popover-side-${side}`]: true,
                 [FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false,
                 'popover-nested': !!parentPopover,
-            }, onIonPopoverDidPresent: onLifecycle, onIonPopoverWillPresent: onLifecycle, onIonPopoverWillDismiss: onLifecycle, onIonPopoverDidDismiss: onLifecycle, onIonBackdropTap: this.onBackdropTap }, !parentPopover && h("ion-backdrop", { key: '79a8e851dbd22119e21ffb2f4709c555251045c8', tappable: this.backdropDismiss, visible: this.showBackdrop, part: "backdrop" }), h("div", { key: 'c46c9f62c3ef3f902e23f27404eaa446a5d8cf88', class: "popover-wrapper ion-overlay-wrapper", onClick: dismissOnSelect ? () => this.dismiss() : undefined }, enableArrow && h("div", { key: '9fdcbbc4ea6c7bde74f646d48eb77296b2c9dd83', class: "popover-arrow", part: "arrow" }), h("div", { key: '138e56bb83462ebb0908edb522b45ecf94b82aeb', class: "popover-content", part: "content" }, h("slot", { key: 'daeefcf002e8d89e91d6e0faf7f63f75b68a2dbe' })))));
+            }, onIonPopoverDidPresent: onLifecycle, onIonPopoverWillPresent: onLifecycle, onIonPopoverWillDismiss: onLifecycle, onIonPopoverDidDismiss: onLifecycle, onIonBackdropTap: this.onBackdropTap }, !parentPopover && h("ion-backdrop", { key: 'f3977833c5b2c0087c286ee54363b478d69eb115', tappable: this.backdropDismiss, visible: this.showBackdrop, part: "backdrop" }), h("div", { key: '1059893d6fd2932ca8adcdf8d45a5d66f4794727', class: "popover-wrapper ion-overlay-wrapper", onClick: dismissOnSelect ? () => this.dismiss() : undefined }, enableArrow && h("div", { key: '24d7988bdd95882ad77fcaa7112aeda55878bee4', class: "popover-arrow", part: "arrow" }), h("div", { key: '4d6992e0a9d629f11763045f9199f9a77fa521ab', class: "popover-content", part: "content" }, h("slot", { key: 'b29747419620a01a6c34e9e846cd529b0b210145' })))));
     }
     static get is() { return "ion-popover"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/select/select.js

@@ -8,7 +8,7 @@ import { focusVisibleElement, renderHiddenInput, inheritAttributes } from "../..
 import { printIonWarning } from "../../utils/logging/index";
 import { actionSheetController, alertController, popoverController, modalController } from "../../utils/overlays";
 import { isRTL } from "../../utils/rtl/index";
-import { reflectPropertiesToAttributes, sanitizeDOMTree } from "../../utils/sanitization/index";
+import { blockedTags, reflectPropertiesToAttributes, sanitizeDOMTree } from "../../utils/sanitization/index";
 import { createSlotMutationController } from "../../utils/slot-mutation-controller";
 import { createColorClasses, hostContext } from "../../utils/theme";
 import { watchForOptions } from "../../utils/watch-options";
@@ -947,7 +947,7 @@ export class Select {
         const hasOutlineFill = mode === 'md' && fill === 'outline';
         renderHiddenInput(true, el, name, parseValue(value), disabled);
         const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || hasFocus || isExpanded));
-        return (h(Host, { key: '5d1e5bf46d0f204efdcb55cc42cfde52e6db304b', onClick: this.onClick, class: createColorClasses(this.color, {
+        return (h(Host, { key: 'b2f161e3706e139e61440cd13e162714b1b75d72', onClick: this.onClick, class: createColorClasses(this.color, {
                 [mode]: true,
                 'in-item': inItem,
                 'in-item-color': hostContext('ion-item.ion-color', el),
@@ -965,7 +965,7 @@ export class Select {
                 [`select-justify-${justify}`]: justifyEnabled,
                 [`select-shape-${shape}`]: shape !== undefined,
                 [`select-label-placement-${labelPlacement}`]: true,
-            }) }, h("label", { key: '15fd1f8e06510ae8472c621cf8cf90e51172e0be', class: "select-wrapper", id: "select-label", onClick: this.onLabelClick, part: "wrapper" }, hasOutlineFill && this.renderOutlineContainer(), h("div", { key: '7964e3d9351671899793b117896acdda25ec24c4', class: "select-start", part: "start", ref: (el) => (this.startContainerEl = el) }, h("slot", { key: 'aa309ef155c4025acfd7ed5739b5221c85097b36', name: "start" })), h("div", { key: '23d5a9dfea64a9d81b0b36d9426b15bed98901b9', class: "select-control", part: "control" }, this.renderLabel(), h("div", { key: '810da9fbfa8771e09b5fb768d64e5f04858b5833', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox(), !hasFloatingOrStackedLabel && this.renderSelectIcon())), h("div", { key: 'bf1c04704326ecfa14cf2e49bb76d3fb45beb08d', class: "select-end", part: "end" }, hasFloatingOrStackedLabel && this.renderSelectIcon(), h("slot", { key: '76a8bcaeefdcaa908aebd820d93171b08165cee3', name: "end" })), shouldRenderHighlight && h("div", { key: '55a9c417a82323a44e16328fd62a634d9d7c558b', class: "select-highlight" })), this.renderBottomContent()));
+            }) }, h("label", { key: '944a2eb468154a21260d181fdaf67828a71eb902', class: "select-wrapper", id: "select-label", onClick: this.onLabelClick, part: "wrapper" }, hasOutlineFill && this.renderOutlineContainer(), h("div", { key: '927200c53548b1bb4f52d6a167605b724a7b7d0d', class: "select-start", part: "start", ref: (el) => (this.startContainerEl = el) }, h("slot", { key: '6e14b95e9b95c116b16744d630600e90977782bc', name: "start" })), h("div", { key: '8451ed4300ac005963075be36a04ea8763bc0fdd', class: "select-control", part: "control" }, this.renderLabel(), h("div", { key: '207e7b63f3224a4870579365ac992da6784fb31f', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox(), !hasFloatingOrStackedLabel && this.renderSelectIcon())), h("div", { key: '5c17367d488db4d570f31b25e33560efa9011500', class: "select-end", part: "end" }, hasFloatingOrStackedLabel && this.renderSelectIcon(), h("slot", { key: '21fd8c0d9bee8cffef9ef6984cacd31e8f38211c', name: "end" })), shouldRenderHighlight && h("div", { key: '1fff767db9a1ec07b274ef65ff7ae8fb976e6ad2', class: "select-highlight" })), this.renderBottomContent()));
     }
     static get is() { return "ion-select"; }
     static get encapsulation() { return "shadow"; }
@@ -1663,29 +1663,14 @@ const textForValue = (opts, value, compareWith, useHTML = false) => {
         return getOptionContent(selectOpt, undefined, true);
     }
     /**
-     * When custom HTML is enabled, extract only the default slot content.
-     * This ensures aria-label and other text-only contexts read only
-     * the relevant option text.
+     * Every text-only context reads only the default slot, so the start
+     * and end slots stay out of the `aria-label` and the overlay labels.
+     * Both config paths derive that text through the same helper, so they
+     * cannot disagree about what an option's text is. `null` marks an
+     * option with no text, which is dropped from the joined text of a
+     * `multiple` select rather than joined in as an empty entry.
      */
-    if (customHTMLEnabled) {
-        const content = getOptionContent(selectOpt);
-        if (typeof content === 'string') {
-            return content;
-        }
-        /**
-         * Elements were found in the default slot, extract and concatenate
-         * their text content while trimming whitespace.
-         */
-        if (content) {
-            const texts = Array.from(content.childNodes)
-                .map((n) => n.textContent?.trim())
-                .filter((t) => t);
-            return texts.join(' ') || null;
-        }
-        // Empty option
-        return null;
-    }
-    return getDefaultSlotPlainText(selectOpt);
+    return getDefaultSlotPlainText(selectOpt) || null;
 };
 /**
  * Trims whitespace from all text nodes within a DOM tree.
@@ -1741,9 +1726,13 @@ const getOptionContent = (option, slotName, useHTML = false) => {
     if (nodes.length === 0) {
         return null;
     }
-    // Return plain text if no elements are found
+    /**
+     * Return plain text if no elements are found. This reads the option the
+     * same way the non-custom-HTML path does, so the two do not disagree
+     * about what an option's text is.
+     */
     if (!slotName && nodes.every((n) => n.nodeType === Node.TEXT_NODE)) {
-        return nodes.map((n) => n.textContent?.trim()).join(' ') || null;
+        return getDefaultSlotPlainText(option) || null;
     }
     /**
      * Mirror known custom-element properties (e.g. ion-icon's `icon`)
@@ -1799,22 +1788,43 @@ const getOptionDefaultSlot = (option) => {
     }
     return defaultSlotNodes;
 };
+/**
+ * Concatenates the text a node renders, skipping the subtrees of tags
+ * whose contents the browser never paints (`script`, `style`, and the
+ * rest of `blockedTags`). `textContent` includes those, so reading it
+ * directly would put stylesheet or script source into the select text
+ * and the `aria-label`.
+ *
+ * @param node - The node to read text from.
+ * @returns The node's rendered text.
+ */
+const getRenderedTextContent = (node) => {
+    if (node.nodeType === Node.TEXT_NODE) {
+        return node.textContent ?? '';
+    }
+    if (node.nodeType !== Node.ELEMENT_NODE) {
+        return '';
+    }
+    if (blockedTags.includes(node.tagName.toLowerCase())) {
+        return '';
+    }
+    return Array.from(node.childNodes)
+        .map((child) => getRenderedTextContent(child))
+        .join('');
+};
 /**
  * Extracts plain text from only the default slot of an option,
- * excluding content assigned to named slots (start/end).
+ * excluding content assigned to named slots (start/end). Text is
+ * concatenated with no separator and collapsible whitespace is
+ * collapsed, approximating how the browser renders the option.
+ * NBSP is not collapsible, so it is preserved.
+ *
+ * @param option - The `ion-select-option` element to read text from.
+ * @returns The option's default slot text.
  */
 const getDefaultSlotPlainText = (option) => {
-    const texts = Array.from(option.childNodes)
-        .filter((node) => {
-        if (node.nodeType === Node.ELEMENT_NODE) {
-            return !node.hasAttribute('slot');
-        }
-        return node.nodeType === Node.TEXT_NODE;
-    })
-        .filter((node) => node.nodeType === Node.TEXT_NODE)
-        .map((n) => n.textContent?.trim())
-        .filter((t) => t);
-    return texts.join(' ');
+    const text = (getOptionDefaultSlot(option) ?? []).map((node) => getRenderedTextContent(node)).join('');
+    return text.replace(/[ \t\n\r\f]+/g, ' ').replace(/^[ \t\n\r\f]+|[ \t\n\r\f]+$/g, '');
 };
 /**
  * Extracts the rich content from an `ion-select-option`.

package/dist/collection/utils/overlays.js

@@ -21,6 +21,15 @@ 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) {
@@ -391,6 +400,13 @@ 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.
@@ -414,8 +430,7 @@ export const getPresentedOverlay = (doc, overlayTag, id) => {
  * for main content.
  */
 export const setRootAriaHidden = (hidden = false) => {
-    const root = getAppRoot(document);
-    const viewContainer = root.querySelector('ion-router-outlet, #ion-view-container-root');
+    const viewContainer = getViewContainer();
     if (!viewContainer) {
         return;
     }
@@ -440,15 +455,42 @@ export const cleanupRootFocusTrapAccessibility = () => {
         return;
     }
     const remainingOverlays = getPresentedOverlays(document);
-    const hasRemainingLocking = remainingOverlays.some((o) => {
-        const el = o;
-        return el.tagName !== 'ION-TOAST' && el.focusTrap !== false && isBackdropAlwaysBlocking(el);
-    });
+    const hasRemainingLocking = remainingOverlays.some((o) => locksAppRoot(o));
     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;
@@ -465,15 +507,7 @@ export const present = async (overlay, name, iosEnterAnimation, mdEnterAnimation
         restoreElementFocus(overlay.el);
     }
     /**
-     * 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
+     * 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
@@ -482,18 +516,11 @@ export const present = async (overlay, name, iosEnterAnimation, mdEnterAnimation
      * to avoid disabling the overlay.
      */
     const overlayEl = overlay.el;
-    const shouldTrapFocus = overlayEl.tagName !== 'ION-TOAST' && overlayEl.focusTrap !== false;
-    const shouldLockRoot = shouldTrapFocus && isBackdropAlwaysBlocking(overlayEl);
+    const shouldLockRoot = locksAppRoot(overlayEl);
     overlay.presented = true;
     overlay.willPresent.emit();
     if (shouldLockRoot) {
-        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);
+        applyRootLock(overlayEl);
     }
     overlay.willPresentShorthand?.emit();
     const mode = getIonMode(overlay);
@@ -619,12 +646,9 @@ 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) => {
-        const el = o;
-        return el.tagName !== 'ION-TOAST' && el.focusTrap !== false && isBackdropAlwaysBlocking(el);
-    });
+    const overlaysLockingRoot = presentedOverlays.filter((o) => locksAppRoot(o));
     const overlayEl = overlay.el;
-    const locksRoot = overlayEl.tagName !== 'ION-TOAST' && overlayEl.focusTrap !== false && isBackdropAlwaysBlocking(overlayEl);
+    const locksRoot = locksAppRoot(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/detach-reattach.js

@@ -0,0 +1,23 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+/**
+ * Detaches an element and puts it back in a later task, the way a framework
+ * binding relocates a subtree it owns.
+ *
+ * A single `appendChild` won't do it. Custom element reactions run at the end
+ * of the same task, so `disconnectedCallback` fires with the element already
+ * back and nothing tears down. The detach has to survive a task before the
+ * disconnect is observable.
+ *
+ * Pass `containerSelector` to hold the element somewhere other than the body.
+ */
+export const detachAndReattach = async (locator, containerSelector = 'body') => {
+    await locator.evaluate(async (el, selector) => {
+        const holder = document.createElement('div');
+        document.querySelector(selector).appendChild(holder);
+        el.remove();
+        await new Promise((resolve) => setTimeout(resolve, 0));
+        holder.appendChild(el);
+    }, containerSelector);
+};

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

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