@ionic/core 7.4.1-nightly.20230919 → 7.4.1

package/dist/collection/components/checkbox/test/legacy/basic/checkbox.e2e.js

@@ -47,5 +47,22 @@ configs({ directions: ['ltr'] }).forEach(({ title, config }) => {
       await checkbox.evaluate((el) => (el.checked = true));
       await expect(ionChange).not.toHaveReceivedEvent();
     });
+    test('clicking padded space within item should click the checkbox', async ({ page }) => {
+      await page.setContent(`
+        <ion-item>
+          <ion-checkbox legacy="true" value="my-checkbox"></ion-checkbox>
+        </ion-item>
+      `, config);
+      const itemNative = page.locator('.item-native');
+      const ionChange = await page.spyOnEvent('ionChange');
+      // Clicks the padded space within the item
+      await itemNative.click({
+        position: {
+          x: 5,
+          y: 5,
+        },
+      });
+      expect(ionChange).toHaveReceivedEvent();
+    });
   });
 });

package/dist/collection/components/item/item.ios.css

@@ -134,6 +134,10 @@
     background: var(--ion-color-contrast);
   }
 }
+:host(.item-has-interactive-control) {
+  cursor: pointer;
+}
+
 :host(.item-interactive-disabled:not(.item-multiple-inputs)) {
   cursor: default;
   pointer-events: none;

package/dist/collection/components/item/item.js

@@ -1,7 +1,7 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { Host, forceUpdate, h } from "@stencil/core";
+import { Build, Host, forceUpdate, h } from "@stencil/core";
 import { inheritAttributes, raf } from "../../utils/helpers";
 import { printIonError, printIonWarning } from "../../utils/logging/index";
 import { createColorClasses, hostContext, openURL } from "../../utils/theme";
@@ -194,8 +194,21 @@ export class Item {
       this.el.classList.add('item-has-start-slot');
     }
   }
+  getFirstInteractive() {
+    if (Build.isTesting) {
+      /**
+       * Pseudo selectors can't be tested in unit tests.
+       * It will cause an error when running the tests.
+       *
+       * TODO: FW-5205 - Remove the build conditional when this is fixed in Stencil
+       */
+      return undefined;
+    }
+    const controls = this.el.querySelectorAll('ion-toggle:not([disabled]), ion-checkbox:not([disabled]), ion-radio:not([disabled]), ion-select:not([disabled])');
+    return controls[0];
+  }
   render() {
-    const { counterString, detail, detailIcon, download, fill, labelColorStyles, lines, disabled, href, rel, shape, target, routerAnimation, routerDirection, inheritedAriaAttributes, } = this;
+    const { counterString, detail, detailIcon, download, fill, labelColorStyles, lines, disabled, href, rel, shape, target, routerAnimation, routerDirection, inheritedAriaAttributes, multipleInputs, } = this;
     const childStyles = {};
     const mode = getIonMode(this);
     const clickable = this.isClickable();
@@ -209,15 +222,37 @@ export class Item {
         rel,
         target,
       };
+    let clickFn = {};
+    const firstInteractive = this.getFirstInteractive();
     // Only set onClick if the item is clickable to prevent screen
     // readers from reading all items as clickable
-    const clickFn = clickable
-      ? {
+    if (clickable || (firstInteractive !== undefined && !multipleInputs)) {
+      clickFn = {
         onClick: (ev) => {
-          openURL(href, ev, routerDirection, routerAnimation);
+          if (clickable) {
+            openURL(href, ev, routerDirection, routerAnimation);
+          }
+          if (firstInteractive !== undefined && !multipleInputs) {
+            const path = ev.composedPath();
+            const target = path[0];
+            if (ev.isTrusted) {
+              /**
+               * Dispatches a click event to the first interactive element,
+               * when it is the result of a user clicking on the item.
+               *
+               * We check if the click target is in the shadow root,
+               * which means the user clicked on the .item-native or
+               * .item-inner padding.
+               */
+              const clickedWithinShadowRoot = this.el.shadowRoot.contains(target);
+              if (clickedWithinShadowRoot) {
+                firstInteractive.click();
+              }
+            }
+          }
         },
-      }
-      : {};
+      };
+    }
     const showDetail = detail !== undefined ? detail : mode === 'ios' && clickable;
     this.itemStyles.forEach((value) => {
       Object.assign(childStyles, value);
@@ -232,6 +267,7 @@ export class Item {
         [`item-lines-${lines}`]: lines !== undefined,
         [`item-fill-${fillValue}`]: true,
         [`item-shape-${shape}`]: shape !== undefined,
+        'item-has-interactive-control': firstInteractive !== undefined,
         'item-disabled': disabled,
         'in-list': inList,
         'item-multiple-inputs': this.multipleInputs,

package/dist/collection/components/item/item.md.css

@@ -134,6 +134,10 @@
     background: var(--ion-color-contrast);
   }
 }
+:host(.item-has-interactive-control) {
+  cursor: pointer;
+}
+
 :host(.item-interactive-disabled:not(.item-multiple-inputs)) {
   cursor: default;
   pointer-events: none;

package/dist/collection/components/menu/menu.js

@@ -7,7 +7,7 @@ import { doc } from "../../utils/browser/index";
 import { GESTURE_CONTROLLER } from "../../utils/gesture/index";
 import { inheritAriaAttributes, assert, clamp, isEndSide as isEnd } from "../../utils/helpers";
 import { menuController } from "../../utils/menu-controller/index";
-import { getOverlay } from "../../utils/overlays";
+import { getPresentedOverlay } from "../../utils/overlays";
 import { config } from "../../global/config";
 import { getIonMode } from "../../global/ionic-global";
 const iosEasing = 'cubic-bezier(0.32,0.72,0,1)';
@@ -35,7 +35,7 @@ export class Menu {
        * open does not contain this ion-menu, then ion-menu's
        * focus trapping should not run.
        */
-      const lastOverlay = getOverlay(document);
+      const lastOverlay = getPresentedOverlay(document);
       if (lastOverlay && !lastOverlay.contains(this.el)) {
         return;
       }

package/dist/collection/components/radio/test/item/radio.e2e.js

@@ -66,4 +66,27 @@ configs({ directions: ['ltr'], modes: ['md'] }).forEach(({ title, screenshot, co
       await expect(list).toHaveScreenshot(screenshot(`radio-stacked-label-in-item`));
     });
   });
+  test.describe(title('radio: ionChange'), () => {
+    test('clicking padded space within item should click the radio', async ({ page }) => {
+      await page.setContent(`
+        <ion-radio-group>
+          <ion-item>
+            <ion-radio>
+              <ion-label>Enable Notifications</ion-label>
+            </ion-radio>
+          </ion-item>
+        </ion-radio-group>
+      `, config);
+      const itemNative = page.locator('.item-native');
+      const ionChange = await page.spyOnEvent('ionChange');
+      // Clicks the padded space within the item
+      await itemNative.click({
+        position: {
+          x: 5,
+          y: 5,
+        },
+      });
+      expect(ionChange).toHaveReceivedEvent();
+    });
+  });
 });

package/dist/collection/components/range/range.ios.css

@@ -407,6 +407,10 @@
   margin-bottom: 0px;
 }
 
+/**
+ * 24px was chosen so the knob and its
+ * shadow do not get cut off by the item.
+ */
 :host {
   --knob-border-radius: 50%;
   --knob-background: #ffffff;
@@ -428,6 +432,16 @@
   padding-bottom: 8px;
 }
 
+:host(.range-item-start-adjustment) {
+  -webkit-padding-start: 24px;
+  padding-inline-start: 24px;
+}
+
+:host(.range-item-end-adjustment) {
+  -webkit-padding-end: 24px;
+  padding-inline-end: 24px;
+}
+
 :host(.ion-color) .range-bar-active,
 :host(.ion-color) .range-tick-active {
   background: var(--ion-color-base);

package/dist/collection/components/range/range.js

@@ -372,20 +372,47 @@ Developers can dismiss this warning by removing their usage of the "legacy" prop
         'legacy-range': true,
       }) }, h("slot", { name: "start" }), this.renderRangeSlider(), h("slot", { name: "end" })));
   }
+  /**
+   * Returns true if content was passed to the "start" slot
+   */
+  get hasStartSlotContent() {
+    return this.el.querySelector('[slot="start"]') !== null;
+  }
+  /**
+   * Returns true if content was passed to the "end" slot
+   */
+  get hasEndSlotContent() {
+    return this.el.querySelector('[slot="end"]') !== null;
+  }
   renderRange() {
-    const { disabled, el, rangeId, pin, pressedKnob, labelPlacement, label } = this;
+    const { disabled, el, hasLabel, rangeId, pin, pressedKnob, labelPlacement, label } = this;
+    const inItem = hostContext('ion-item', el);
+    /**
+     * If there is no start content then the knob at
+     * the min value will be cut off by the item margin.
+     */
+    const hasStartContent = (hasLabel && (labelPlacement === 'start' || labelPlacement === 'fixed')) || this.hasStartSlotContent;
+    const needsStartAdjustment = inItem && !hasStartContent;
+    /**
+     * If there is no end content then the knob at
+     * the max value will be cut off by the item margin.
+     */
+    const hasEndContent = (hasLabel && labelPlacement === 'end') || this.hasEndSlotContent;
+    const needsEndAdjustment = inItem && !hasEndContent;
     const mode = getIonMode(this);
     renderHiddenInput(true, el, this.name, JSON.stringify(this.getValue()), disabled);
     return (h(Host, { onFocusin: this.onFocus, onFocusout: this.onBlur, id: rangeId, class: createColorClasses(this.color, {
         [mode]: true,
-        'in-item': hostContext('ion-item', el),
+        'in-item': inItem,
         'range-disabled': disabled,
         'range-pressed': pressedKnob !== undefined,
         'range-has-pin': pin,
         [`range-label-placement-${labelPlacement}`]: true,
+        'range-item-start-adjustment': needsStartAdjustment,
+        'range-item-end-adjustment': needsEndAdjustment,
       }) }, h("label", { class: "range-wrapper", id: "range-label" }, h("div", { class: {
         'label-text-wrapper': true,
-        'label-text-wrapper-hidden': !this.hasLabel,
+        'label-text-wrapper-hidden': !hasLabel,
       } }, label !== undefined ? h("div", { class: "label-text" }, label) : h("slot", { name: "label" })), h("div", { class: "native-wrapper" }, h("slot", { name: "start" }), this.renderRangeSlider(), h("slot", { name: "end" })))));
   }
   get hasLabel() {

package/dist/collection/components/range/range.md.css

@@ -407,6 +407,10 @@
   margin-bottom: 0px;
 }
 
+/**
+ * 18px was chosen so the knob and its focus/active
+ * effects do not get cut off by the item.
+ */
 :host {
   --knob-border-radius: 50%;
   --knob-background: var(--bar-background-active);
@@ -435,6 +439,16 @@
   padding-bottom: 8px;
 }
 
+:host(.range-item-start-adjustment) {
+  -webkit-padding-start: 18px;
+  padding-inline-start: 18px;
+}
+
+:host(.range-item-end-adjustment) {
+  -webkit-padding-end: 18px;
+  padding-inline-end: 18px;
+}
+
 :host(.ion-color) .range-bar {
   background: rgba(var(--ion-color-base-rgb), 0.26);
 }

package/dist/collection/components/range/test/item/range.e2e.js

@@ -27,6 +27,17 @@ configs().forEach(({ title, screenshot, config }) => {
       const list = page.locator('ion-list');
       await expect(list).toHaveScreenshot(screenshot(`range-inset-list`));
     });
+    test('should render adjustments in item', async ({ page }) => {
+      await page.setContent(`
+        <ion-list inset="true">
+          <ion-item>
+            <ion-range value="0" aria-label="true"></ion-range>
+          </ion-item>
+        </ion-list>
+      `, config);
+      const list = page.locator('ion-list');
+      await expect(list).toHaveScreenshot(screenshot(`range-adjustments`));
+    });
   });
 });
 configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {

package/dist/collection/components/select/test/basic/select.e2e.js

@@ -170,5 +170,26 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
       await select.evaluate((el) => (el.value = 'banana'));
       await expect(ionChange).not.toHaveReceivedEvent();
     });
+    test('clicking padded space within item should click the select', async ({ page }) => {
+      await page.setContent(`
+        <ion-item>
+          <ion-select label="Fruit" interface="action-sheet">
+            <ion-select-option value="apple">Apple</ion-select-option>
+            <ion-select-option value="banana">Banana</ion-select-option>
+          </ion-select>
+        </ion-item>
+      `, config);
+      const itemNative = page.locator('.item-native');
+      const ionActionSheetDidPresent = await page.spyOnEvent('ionActionSheetDidPresent');
+      // Clicks the padded space within the item
+      await itemNative.click({
+        position: {
+          x: 5,
+          y: 5,
+        },
+      });
+      await ionActionSheetDidPresent.next();
+      expect(ionActionSheetDidPresent).toHaveReceivedEvent();
+    });
   });
 });

package/dist/collection/components/toggle/test/item/toggle.e2e.js

@@ -73,4 +73,32 @@ configs({ directions: ['ltr'], modes: ['md'] }).forEach(({ title, screenshot, co
       await expect(list).toHaveScreenshot(screenshot(`toggle-stacked-label-in-item`));
     });
   });
+  test.describe(title('toggle: ionChange'), () => {
+    test('clicking padded space within item should click the toggle', async ({ page }) => {
+      await page.setContent(`
+        <ion-item>
+          <ion-toggle>Size</ion-toggle>
+        </ion-item>
+      `, config);
+      const itemNative = page.locator('.item-native');
+      const ionChange = await page.spyOnEvent('ionChange');
+      /**
+       * Clicks the padded space within the item.
+       *
+       * We intentionally activate the toggle control when clicking either
+       * the label or padded space. This is different than native iOS,
+       * but we do it for three reasons:
+       * 1. Clicking a label connected to a control is standard behavior for web controls.
+       * 2. iOS is inconsistent in their implementation and other controls can be activated by clicking the label.
+       * 3. MD is consistent in their implementation and activates controls by clicking the label.
+       */
+      await itemNative.click({
+        position: {
+          x: 5,
+          y: 5,
+        },
+      });
+      expect(ionChange).toHaveReceivedEvent();
+    });
+  });
 });

package/dist/collection/utils/input-shims/hacks/scroll-assist.js

@@ -1,6 +1,7 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
+import { win } from "../../browser/index";
 import { getScrollElement, scrollByPoint } from "../../content";
 import { raf } from "../../helpers";
 import { KeyboardResize } from "../../native/keyboard";
@@ -20,6 +21,83 @@ export const enableScrollAssist = (componentEl, inputEl, contentEl, footerEl, ke
    * Resize info is available on Capacitor 4+
    */
   const addScrollPadding = enableScrollPadding && (keyboardResize === undefined || keyboardResize.mode === KeyboardResize.None);
+  /**
+   * This tracks whether or not the keyboard has been
+   * presented for a single focused text field. Note
+   * that it does not track if the keyboard is open
+   * in general such as if the keyboard is open for
+   * a different focused text field.
+   */
+  let hasKeyboardBeenPresentedForTextField = false;
+  /**
+   * When adding scroll padding we need to know
+   * how much of the viewport the keyboard obscures.
+   * We do this by subtracting the keyboard height
+   * from the platform height.
+   *
+   * If we compute this value when switching between
+   * inputs then the webview may already be resized.
+   * At this point, `win.innerHeight` has already accounted
+   * for the keyboard meaning we would then subtract
+   * the keyboard height again. This will result in the input
+   * being scrolled more than it needs to.
+   */
+  const platformHeight = win !== undefined ? win.innerHeight : 0;
+  /**
+   * Scroll assist is run when a text field
+   * is focused. However, it may need to
+   * re-run when the keyboard size changes
+   * such that the text field is now hidden
+   * underneath the keyboard.
+   * This function re-runs scroll assist
+   * when that happens.
+   *
+   * One limitation of this is on a web browser
+   * where native keyboard APIs do not have cross-browser
+   * support. `ionKeyboardDidShow` relies on the Visual Viewport API.
+   * This means that if the keyboard changes but does not change
+   * geometry, then scroll assist will not re-run even if
+   * the user has scrolled the text field under the keyboard.
+   * This is not a problem when running in Cordova/Capacitor
+   * because `ionKeyboardDidShow` uses the native events
+   * which fire every time the keyboard changes.
+   */
+  const keyboardShow = (ev) => {
+    /**
+     * If the keyboard has not yet been presented
+     * for this text field then the text field has just
+     * received focus. In that case, the focusin listener
+     * will run scroll assist.
+     */
+    if (hasKeyboardBeenPresentedForTextField === false) {
+      hasKeyboardBeenPresentedForTextField = true;
+      return;
+    }
+    /**
+     * Otherwise, the keyboard has already been presented
+     * for the focused text field.
+     * This means that the keyboard likely changed
+     * geometry, and we need to re-run scroll assist.
+     * This can happen when the user rotates their device
+     * or when they switch keyboards.
+     *
+     * Make sure we pass in the computed keyboard height
+     * rather than the estimated keyboard height.
+     *
+     * Since the keyboard is already open then we do not
+     * need to wait for the webview to resize, so we pass
+     * "waitForResize: false".
+     */
+    jsSetFocus(componentEl, inputEl, contentEl, footerEl, ev.detail.keyboardHeight, addScrollPadding, disableClonedInput, platformHeight, false);
+  };
+  /**
+   * Reset the internal state when the text field loses focus.
+   */
+  const focusOut = () => {
+    hasKeyboardBeenPresentedForTextField = false;
+    win === null || win === void 0 ? void 0 : win.removeEventListener('ionKeyboardDidShow', keyboardShow);
+    componentEl.removeEventListener('focusout', focusOut, true);
+  };
   /**
    * When the input is about to receive
    * focus, we need to move it to prevent
@@ -36,11 +114,15 @@ export const enableScrollAssist = (componentEl, inputEl, contentEl, footerEl, ke
       inputEl.removeAttribute(SKIP_SCROLL_ASSIST);
       return;
     }
-    jsSetFocus(componentEl, inputEl, contentEl, footerEl, keyboardHeight, addScrollPadding, disableClonedInput);
+    jsSetFocus(componentEl, inputEl, contentEl, footerEl, keyboardHeight, addScrollPadding, disableClonedInput, platformHeight);
+    win === null || win === void 0 ? void 0 : win.addEventListener('ionKeyboardDidShow', keyboardShow);
+    componentEl.addEventListener('focusout', focusOut, true);
   };
   componentEl.addEventListener('focusin', focusIn, true);
   return () => {
     componentEl.removeEventListener('focusin', focusIn, true);
+    win === null || win === void 0 ? void 0 : win.removeEventListener('ionKeyboardDidShow', keyboardShow);
+    componentEl.removeEventListener('focusout', focusOut, true);
   };
 };
 /**
@@ -59,11 +141,11 @@ const setManualFocus = (el) => {
   el.setAttribute(SKIP_SCROLL_ASSIST, 'true');
   el.focus();
 };
-const jsSetFocus = async (componentEl, inputEl, contentEl, footerEl, keyboardHeight, enableScrollPadding, disableClonedInput = false) => {
+const jsSetFocus = async (componentEl, inputEl, contentEl, footerEl, keyboardHeight, enableScrollPadding, disableClonedInput = false, platformHeight = 0, waitForResize = true) => {
   if (!contentEl && !footerEl) {
     return;
   }
-  const scrollData = getScrollData(componentEl, (contentEl || footerEl), keyboardHeight);
+  const scrollData = getScrollData(componentEl, (contentEl || footerEl), keyboardHeight, platformHeight);
   if (contentEl && Math.abs(scrollData.scrollAmount) < 4) {
     // the text input is in a safe position that doesn't
     // require it to be scrolled into view, just set focus now
@@ -150,7 +232,7 @@ const jsSetFocus = async (componentEl, inputEl, contentEl, footerEl, keyboardHei
        * bandwidth to become available.
        */
       const totalScrollAmount = scrollEl.scrollHeight - scrollEl.clientHeight;
-      if (scrollData.scrollAmount > totalScrollAmount - scrollEl.scrollTop) {
+      if (waitForResize && scrollData.scrollAmount > totalScrollAmount - scrollEl.scrollTop) {
         /**
          * On iOS devices, the system will show a "Passwords" bar above the keyboard
          * after the initial keyboard is shown. This prevents the webview from resizing

package/dist/collection/utils/input-shims/hacks/scroll-data.js

@@ -3,11 +3,10 @@
  */
 import { SCROLL_AMOUNT_PADDING } from "./common";
 const SCROLL_ASSIST_SPEED = 0.3;
-export const getScrollData = (componentEl, contentEl, keyboardHeight) => {
+export const getScrollData = (componentEl, contentEl, keyboardHeight, platformHeight) => {
   var _a;
   const itemEl = (_a = componentEl.closest('ion-item,[ion-item]')) !== null && _a !== void 0 ? _a : componentEl;
-  return calcScrollData(itemEl.getBoundingClientRect(), contentEl.getBoundingClientRect(), keyboardHeight, componentEl.ownerDocument.defaultView.innerHeight // TODO(FW-2832): type
-  );
+  return calcScrollData(itemEl.getBoundingClientRect(), contentEl.getBoundingClientRect(), keyboardHeight, platformHeight);
 };
 const calcScrollData = (inputRect, contentRect, keyboardHeight, platformHeight) => {
   // compute input's Y values relative to the body

package/dist/collection/utils/overlays.js

@@ -1,6 +1,7 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
+import { doc } from "./browser/index";
 import { config } from "../global/config";
 import { getIonMode } from "../global/ionic-global";
 import { CoreDelegate } from "./framework-delegate";
@@ -19,7 +20,7 @@ const createController = (tagName) => {
       return dismissOverlay(document, data, role, tagName, id);
     },
     async getTop() {
-      return getOverlay(document, tagName);
+      return getPresentedOverlay(document, tagName);
     },
   };
 };
@@ -136,7 +137,7 @@ const focusLastDescendant = (ref, overlay) => {
  * Should NOT include: Toast
  */
 const trapKeyboardFocus = (ev, doc) => {
-  const lastOverlay = getOverlay(doc, 'ion-alert,ion-action-sheet,ion-loading,ion-modal,ion-picker,ion-popover');
+  const lastOverlay = getPresentedOverlay(doc, 'ion-alert,ion-action-sheet,ion-loading,ion-modal,ion-picker,ion-popover');
   const target = ev.target;
   /**
    * If no active overlay, ignore this event.
@@ -291,7 +292,7 @@ const connectListeners = (doc) => {
     }, true);
     // handle back-button click
     doc.addEventListener('ionBackButton', (ev) => {
-      const lastOverlay = getOverlay(doc);
+      const lastOverlay = getPresentedOverlay(doc);
       if (lastOverlay === null || lastOverlay === void 0 ? void 0 : lastOverlay.backdropDismiss) {
         ev.detail.register(OVERLAY_BACK_BUTTON_PRIORITY, () => {
           return lastOverlay.dismiss(undefined, BACKDROP);
@@ -301,7 +302,7 @@ const connectListeners = (doc) => {
     // handle ESC to close overlay
     doc.addEventListener('keydown', (ev) => {
       if (ev.key === 'Escape') {
-        const lastOverlay = getOverlay(doc);
+        const lastOverlay = getPresentedOverlay(doc);
         if (lastOverlay === null || lastOverlay === void 0 ? void 0 : lastOverlay.backdropDismiss) {
           lastOverlay.dismiss(undefined, BACKDROP);
         }
@@ -310,12 +311,15 @@ const connectListeners = (doc) => {
   }
 };
 export const dismissOverlay = (doc, data, role, overlayTag, id) => {
-  const overlay = getOverlay(doc, overlayTag, id);
+  const overlay = getPresentedOverlay(doc, overlayTag, id);
   if (!overlay) {
     return Promise.reject('overlay does not exist');
   }
   return overlay.dismiss(data, role);
 };
+/**
+ * Returns a list of all overlays in the DOM even if they are not presented.
+ */
 export const getOverlays = (doc, selector) => {
   if (selector === undefined) {
     selector = 'ion-alert,ion-action-sheet,ion-loading,ion-modal,ion-picker,ion-popover,ion-toast';
@@ -323,14 +327,24 @@ export const getOverlays = (doc, selector) => {
   return Array.from(doc.querySelectorAll(selector)).filter((c) => c.overlayIndex > 0);
 };
 /**
- * Returns an overlay element
+ * Returns a list of all presented overlays.
+ * Inline overlays can exist in the DOM but not be presented,
+ * so there are times when we want to exclude those.
+ * @param doc The document to find the element within.
+ * @param overlayTag The selector for the overlay, defaults to Ionic overlay components.
+ */
+const getPresentedOverlays = (doc, overlayTag) => {
+  return getOverlays(doc, overlayTag).filter((o) => !isOverlayHidden(o));
+};
+/**
+ * Returns a presented overlay element.
  * @param doc The document to find the element within.
  * @param overlayTag The selector for the overlay, defaults to Ionic overlay components.
  * @param id The unique identifier for the overlay instance.
  * @returns The overlay element or `undefined` if no overlay element is found.
  */
-export const getOverlay = (doc, overlayTag, id) => {
-  const overlays = getOverlays(doc, overlayTag).filter((o) => !isOverlayHidden(o));
+export const getPresentedOverlay = (doc, overlayTag, id) => {
+  const overlays = getPresentedOverlays(doc, overlayTag);
   return id === undefined ? overlays[overlays.length - 1] : overlays.find((o) => o.id === id);
 };
 /**
@@ -436,7 +450,13 @@ export const dismiss = async (overlay, data, role, name, iosLeaveAnimation, mdLe
   if (!overlay.presented) {
     return false;
   }
-  setRootAriaHidden(false);
+  /**
+   * If this is the last visible overlay then
+   * we want to re-add the root to the accessibility tree.
+   */
+  if (doc !== undefined && getPresentedOverlays(doc).length === 1) {
+    setRootAriaHidden(false);
+  }
   overlay.presented = false;
   try {
     // Overlay contents should not be clickable during dismiss

package/dist/docs.json

@@ -1,8 +1,8 @@
 {
-  "timestamp": "2023-09-19T06:03:37",
+  "timestamp": "2023-09-20T13:15:45",
   "compiler": {
     "name": "@stencil/core",
-    "version": "4.2.1",
+    "version": "4.3.0",
     "typescriptVersion": "5.1.6"
   },
   "components": [

package/dist/esm/{app-globals-c7886b40.js → app-globals-8ae762aa.js}

@@ -1,7 +1,7 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { i as initialize } from './ionic-global-9080266a.js';
+import { i as initialize } from './ionic-global-b3fc28dd.js';
 
 const globalScripts = initialize;
 

package/dist/esm/{button-active-b76ae4ec.js → button-active-513e9fff.js}

@@ -1,7 +1,7 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { w as writeTask } from './index-adfb2000.js';
+import { w as writeTask } from './index-2d388930.js';
 import { h as hapticSelectionEnd, a as hapticSelectionStart, b as hapticSelectionChanged } from './haptic-6447af60.js';
 import { createGesture } from './index-ff313b19.js';