@ionic/core 7.7.2-dev.11707881769.185d2a14 → 7.7.2-dev.11707932366.16baf005

package/dist/collection/utils/overlays.js

@@ -6,6 +6,7 @@ import { shoudUseCloseWatcher } from "./hardware-back-button";
 import { config } from "../global/config";
 import { getIonMode } 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";
 import { addEventListener, componentOnReady, focusElement, getElementRoot, removeEventListener } from "./helpers";
 import { printIonWarning } from "./logging";
@@ -29,7 +30,10 @@ export const alertController = /*@__PURE__*/ createController('ion-alert');
 export const actionSheetController = /*@__PURE__*/ createController('ion-action-sheet');
 export const loadingController = /*@__PURE__*/ createController('ion-loading');
 export const modalController = /*@__PURE__*/ createController('ion-modal');
-export const pickerController = /*@__PURE__*/ createController('ion-picker');
+/**
+ * @deprecated Use the inline ion-picker component instead.
+ */
+export const pickerController = /*@__PURE__*/ createController('ion-picker-legacy');
 export const popoverController = /*@__PURE__*/ createController('ion-popover');
 export const toastController = /*@__PURE__*/ createController('ion-toast');
 /**
@@ -139,7 +143,7 @@ const focusLastDescendant = (ref, overlay) => {
  * Should NOT include: Toast
  */
 const trapKeyboardFocus = (ev, doc) => {
-    const lastOverlay = getPresentedOverlay(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-legacy,ion-popover');
     const target = ev.target;
     /**
      * If no active overlay, ignore this event.
@@ -343,7 +347,7 @@ export const dismissOverlay = (doc, data, role, overlayTag, id) => {
  */
 export const getOverlays = (doc, selector) => {
     if (selector === undefined) {
-        selector = 'ion-alert,ion-action-sheet,ion-loading,ion-modal,ion-picker,ion-popover,ion-toast';
+        selector = 'ion-alert,ion-action-sheet,ion-loading,ion-modal,ion-picker-legacy,ion-popover,ion-toast';
     }
     return Array.from(doc.querySelectorAll(selector)).filter((c) => c.overlayIndex > 0);
 };
@@ -409,15 +413,7 @@ export const present = async (overlay, name, iosEnterAnimation, mdEnterAnimation
         return;
     }
     setRootAriaHidden(true);
-    /**
-     * Hide all other overlays from screen readers so only this one
-     * can be read. Note that presenting an overlay always makes
-     * it the topmost one.
-     */
-    if (doc !== undefined) {
-        const presentedOverlays = getPresentedOverlays(doc);
-        presentedOverlays.forEach((o) => o.setAttribute('aria-hidden', 'true'));
-    }
+    document.body.classList.add(BACKDROP_NO_SCROLL);
     overlay.presented = true;
     overlay.willPresent.emit();
     (_a = overlay.willPresentShorthand) === null || _a === void 0 ? void 0 : _a.emit();
@@ -440,7 +436,7 @@ export const present = async (overlay, name, iosEnterAnimation, mdEnterAnimation
      * from returning focus as a result.
      */
     if (overlay.el.tagName !== 'ION-TOAST') {
-        restoreElementFocus(overlay.el);
+        focusPreviousElementOnDismiss(overlay.el);
     }
     /**
      * If the focused element is already
@@ -451,14 +447,6 @@ export const present = async (overlay, name, iosEnterAnimation, mdEnterAnimation
     if (overlay.keyboardClose && (document.activeElement === null || !overlay.el.contains(document.activeElement))) {
         overlay.el.focus();
     }
-    /**
-     * If this overlay was previously dismissed without being
-     * the topmost one (such as by manually calling dismiss()),
-     * it would still have aria-hidden on being presented again.
-     * Removing it here ensures the overlay is visible to screen
-     * readers.
-     */
-    overlay.el.removeAttribute('aria-hidden');
 };
 /**
  * When an overlay component is dismissed,
@@ -470,7 +458,7 @@ export const present = async (overlay, name, iosEnterAnimation, mdEnterAnimation
  * to where they were before they
  * opened the overlay.
  */
-const restoreElementFocus = async (overlayEl) => {
+const focusPreviousElementOnDismiss = async (overlayEl) => {
     let previousElement = document.activeElement;
     if (!previousElement) {
         return;
@@ -481,45 +469,21 @@ const restoreElementFocus = async (overlayEl) => {
         previousElement = shadowRoot.querySelector(focusableQueryString) || previousElement;
     }
     await overlayEl.onDidDismiss();
-    /**
-     * After onDidDismiss, the overlay loses focus
-     * because it is removed from the document
-     *
-     * > An element will also lose focus [...]
-     * > if the element is removed from the document)
-     *
-     * https://developer.mozilla.org/en-US/docs/Web/API/Element/blur_event
-     *
-     * Additionally, `document.activeElement` returns:
-     *
-     * > The Element which currently has focus,
-     * > `<body>` or null if there is
-     * > no focused element.
-     *
-     * https://developer.mozilla.org/en-US/docs/Web/API/Document/activeElement#value
-     *
-     * However, if the user has already focused
-     * an element sometime between onWillDismiss
-     * and onDidDismiss (for example, focusing a
-     * text box after tapping a button in an
-     * action sheet) then don't restore focus to
-     * previous element
-     */
-    if (document.activeElement === null || document.activeElement === document.body) {
-        previousElement.focus();
-    }
+    previousElement.focus();
 };
 export const dismiss = async (overlay, data, role, name, iosLeaveAnimation, mdLeaveAnimation, opts) => {
-    var _a, _b, _c;
+    var _a, _b;
     if (!overlay.presented) {
         return false;
     }
+    const lastOverlay = doc !== undefined && getPresentedOverlays(doc).length === 1;
     /**
      * 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) {
+    if (lastOverlay) {
         setRootAriaHidden(false);
+        document.body.classList.remove(BACKDROP_NO_SCROLL);
     }
     overlay.presented = false;
     try {
@@ -561,13 +525,6 @@ export const dismiss = async (overlay, data, role, name, iosLeaveAnimation, mdLe
         console.error(err);
     }
     overlay.el.remove();
-    /**
-     * If there are other overlays presented, unhide the new
-     * topmost one from screen readers.
-     */
-    if (doc !== undefined) {
-        (_c = getPresentedOverlay(doc)) === null || _c === void 0 ? void 0 : _c.removeAttribute('aria-hidden');
-    }
     return true;
 };
 const getAppRoot = (doc) => {

package/dist/collection/utils/test/aria.spec.js

@@ -6,7 +6,8 @@ import { Item } from "../../components/item/item";
 import { Label } from "../../components/label/label";
 import { Toggle } from "../../components/toggle/toggle";
 import { getAriaLabel } from "../helpers";
-describe('getAriaLabel()', () => {
+// TODO FW-5969
+describe.skip('getAriaLabel()', () => {
     it('should correctly link component to label', async () => {
         const page = await newSpecPage({
             components: [Item, Label, Toggle],

package/dist/collection/utils/test/overlays/overlays-scroll-blocking.spec.js

@@ -0,0 +1,65 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { newSpecPage } from "@stencil/core/testing";
+import { Modal } from "../../../components/modal/modal";
+describe('overlays: scroll blocking', () => {
+    it('should not block scroll when the overlay is created', async () => {
+        const page = await newSpecPage({
+            components: [Modal],
+            html: `
+        <ion-modal></ion-modal>
+      `,
+        });
+        const body = page.doc.querySelector('body');
+        expect(body).not.toHaveClass('backdrop-no-scroll');
+    });
+    it('should block scroll when the overlay is presented', async () => {
+        const page = await newSpecPage({
+            components: [Modal],
+            html: `
+        <ion-modal></ion-modal>
+      `,
+        });
+        const modal = page.body.querySelector('ion-modal');
+        const body = page.doc.querySelector('body');
+        await modal.present();
+        expect(body).toHaveClass('backdrop-no-scroll');
+        await modal.dismiss();
+        expect(body).not.toHaveClass('backdrop-no-scroll');
+    });
+    it('should not block scroll when the overlay is dismissed', async () => {
+        const page = await newSpecPage({
+            components: [Modal],
+            html: `
+        <ion-modal></ion-modal>
+      `,
+        });
+        const modal = page.body.querySelector('ion-modal');
+        const body = page.doc.querySelector('body');
+        await modal.present();
+        expect(body).toHaveClass('backdrop-no-scroll');
+        await modal.dismiss();
+        expect(body).not.toHaveClass('backdrop-no-scroll');
+    });
+    it('should not enable scroll until last overlay is dismissed', async () => {
+        const page = await newSpecPage({
+            components: [Modal],
+            html: `
+        <ion-modal id="one"></ion-modal>
+        <ion-modal id="two"></ion-modal>
+      `,
+        });
+        const modalOne = page.body.querySelector('#one');
+        const modalTwo = page.body.querySelector('#two');
+        const body = page.doc.querySelector('body');
+        await modalOne.present();
+        expect(body).toHaveClass('backdrop-no-scroll');
+        await modalTwo.present();
+        expect(body).toHaveClass('backdrop-no-scroll');
+        await modalOne.dismiss();
+        expect(body).toHaveClass('backdrop-no-scroll');
+        await modalTwo.dismiss();
+        expect(body).not.toHaveClass('backdrop-no-scroll');
+    });
+});

package/dist/collection/utils/test/overlays/overlays.e2e.js

@@ -175,38 +175,5 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
             await modalInputOne.click();
             await expect(modalInputOne).toBeFocused();
         });
-        test('should not return focus to another element if focus already manually returned', async ({ page, skip, }, testInfo) => {
-            skip.browser('webkit', 'WebKit does not consider buttons to be focusable, so this test always passes since the input is the only focusable element.');
-            testInfo.annotations.push({
-                type: 'issue',
-                description: 'https://github.com/ionic-team/ionic-framework/issues/28849',
-            });
-            await page.setContent(`
-        <button id="open-action-sheet">open</button>
-        <ion-action-sheet trigger="open-action-sheet"></ion-action-sheet>
-        <input id="test-input" />
-
-        <script>
-          const actionSheet = document.querySelector('ion-action-sheet');
-
-          actionSheet.addEventListener('ionActionSheetWillDismiss', () => {
-            requestAnimationFrame(() => {
-              document.querySelector('#test-input').focus();
-            });
-          });
-        </script>
-      `, config);
-            const ionActionSheetDidPresent = await page.spyOnEvent('ionActionSheetDidPresent');
-            const actionSheet = page.locator('ion-action-sheet');
-            const input = page.locator('#test-input');
-            const trigger = page.locator('#open-action-sheet');
-            // present action sheet
-            await trigger.click();
-            await ionActionSheetDidPresent.next();
-            // dismiss action sheet
-            await actionSheet.evaluate((el) => el.dismiss());
-            // verify focus is in correct location
-            await expect(input).toBeFocused();
-        });
     });
 });

package/dist/collection/utils/test/overlays/overlays.spec.js

@@ -100,54 +100,3 @@ describe('setRootAriaHidden()', () => {
         expect(routerOutlet.hasAttribute('aria-hidden')).toEqual(false);
     });
 });
-describe('aria-hidden on individual overlays', () => {
-    it('should hide non-topmost overlays from screen readers', async () => {
-        const page = await newSpecPage({
-            components: [Modal],
-            html: `
-        <ion-modal id="one"></ion-modal>
-        <ion-modal id="two"></ion-modal>
-      `,
-        });
-        const modalOne = page.body.querySelector('ion-modal#one');
-        const modalTwo = page.body.querySelector('ion-modal#two');
-        await modalOne.present();
-        await modalTwo.present();
-        expect(modalOne.hasAttribute('aria-hidden')).toEqual(true);
-        expect(modalTwo.hasAttribute('aria-hidden')).toEqual(false);
-    });
-    it('should unhide new topmost overlay from screen readers when topmost is dismissed', async () => {
-        const page = await newSpecPage({
-            components: [Modal],
-            html: `
-        <ion-modal id="one"></ion-modal>
-        <ion-modal id="two"></ion-modal>
-      `,
-        });
-        const modalOne = page.body.querySelector('ion-modal#one');
-        const modalTwo = page.body.querySelector('ion-modal#two');
-        await modalOne.present();
-        await modalTwo.present();
-        // dismiss modalTwo so that modalOne becomes the new topmost overlay
-        await modalTwo.dismiss();
-        expect(modalOne.hasAttribute('aria-hidden')).toEqual(false);
-    });
-    it('should not keep overlays hidden from screen readers if presented after being dismissed while non-topmost', async () => {
-        const page = await newSpecPage({
-            components: [Modal],
-            html: `
-        <ion-modal id="one"></ion-modal>
-        <ion-modal id="two"></ion-modal>
-      `,
-        });
-        const modalOne = page.body.querySelector('ion-modal#one');
-        const modalTwo = page.body.querySelector('ion-modal#two');
-        await modalOne.present();
-        await modalTwo.present();
-        // modalOne is not the topmost overlay at this point and is hidden from screen readers
-        await modalOne.dismiss();
-        // modalOne will become the topmost overlay; ensure it isn't still hidden from screen readers
-        await modalOne.present();
-        expect(modalOne.hasAttribute('aria-hidden')).toEqual(false);
-    });
-});

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

@@ -72,4 +72,5 @@ const DEFAULT_THEMES = ['light'];
 const DEFAULT_TEST_CONFIG_OPTION = {
     modes: DEFAULT_MODES,
     directions: DEFAULT_DIRECTIONS,
+    themes: DEFAULT_THEMES,
 };

package/dist/collection/utils/test/playwright/page/utils/set-content.js

@@ -39,7 +39,7 @@ export const setContent = async (page, html, testInfo, options) => {
         <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
         <link href="${baseUrl}/css/ionic.bundle.css" rel="stylesheet" />
         <link href="${baseUrl}/scripts/testing/styles.css" rel="stylesheet" />
-        ${theme !== 'light' ? `<link href="${baseUrl}/scripts/testing/themes/${theme}.css" rel="stylesheet" />` : ''}
+        ${theme !== 'light' ? `<link href="${baseUrl}/css/themes/${theme}.always.css" rel="stylesheet" />` : ''}
         <script src="${baseUrl}/scripts/testing/scripts.js"></script>
         <script type="module" src="${baseUrl}/dist/ionic/ionic.esm.js"></script>
         <script>