@ionic/core 8.0.0-beta.1 → 8.0.0-beta.3

package/dist/collection/utils/overlays.js

@@ -3,7 +3,7 @@
  */
 import { doc } from "./browser/index";
 import { focusFirstDescendant, focusLastDescendant, focusableQueryString } from "./focus-trap";
-import { shoudUseCloseWatcher } from "./hardware-back-button";
+import { shouldUseCloseWatcher } from "./hardware-back-button";
 import { config } from "../global/config";
 import { getIonMode } from "../global/ionic-global";
 import { CoreDelegate } from "./framework-delegate";
@@ -338,7 +338,7 @@ const connectListeners = (doc) => {
          * this behavior will be handled via the ionBackButton
          * event.
          */
-        if (!shoudUseCloseWatcher()) {
+        if (!shouldUseCloseWatcher()) {
             doc.addEventListener('keydown', (ev) => {
                 if (ev.key === 'Escape') {
                     const lastOverlay = getPresentedOverlay(doc);
@@ -429,15 +429,7 @@ export const present = async (overlay, name, iosEnterAnimation, mdEnterAnimation
     }
     setRootAriaHidden(true);
     document.body.classList.add(BACKDROP_NO_SCROLL);
-    /**
-     * 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'));
-    }
+    hideOverlaysFromScreenReaders(overlay.el);
     overlay.presented = true;
     overlay.willPresent.emit();
     (_a = overlay.willPresentShorthand) === null || _a === void 0 ? void 0 : _a.emit();
@@ -530,7 +522,7 @@ const restoreElementFocus = async (overlayEl) => {
     }
 };
 export const dismiss = async (overlay, data, role, name, iosLeaveAnimation, mdLeaveAnimation, opts) => {
-    var _a, _b, _c;
+    var _a, _b;
     if (!overlay.presented) {
         return false;
     }
@@ -583,13 +575,7 @@ 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');
-    }
+    revealOverlaysToScreenReaders();
     return true;
 };
 const getAppRoot = (doc) => {
@@ -785,3 +771,59 @@ export const createTriggerController = () => {
         removeClickListener,
     };
 };
+/**
+ * Ensure that underlying overlays have aria-hidden if necessary so that screen readers
+ * cannot move focus to these elements. Note that we cannot rely on focus/focusin/focusout
+ * events here because those events do not fire when the screen readers moves to a non-focusable
+ * element such as text.
+ * Without this logic screen readers would be able to move focus outside of the top focus-trapped overlay.
+ *
+ * @param newTopMostOverlay - The overlay that is being presented. Since the overlay has not been
+ * fully presented yet at the time this function is called it will not be included in the getPresentedOverlays result.
+ */
+const hideOverlaysFromScreenReaders = (newTopMostOverlay) => {
+    var _a;
+    if (doc === undefined)
+        return;
+    const overlays = getPresentedOverlays(doc);
+    for (let i = overlays.length - 1; i >= 0; i--) {
+        const presentedOverlay = overlays[i];
+        const nextPresentedOverlay = (_a = overlays[i + 1]) !== null && _a !== void 0 ? _a : newTopMostOverlay;
+        /**
+         * If next overlay has aria-hidden then all remaining overlays will have it too.
+         * Or, if the next overlay is a Toast that does not have aria-hidden then current overlay
+         * should not have aria-hidden either so focus can remain in the current overlay.
+         */
+        if (nextPresentedOverlay.hasAttribute('aria-hidden') || nextPresentedOverlay.tagName !== 'ION-TOAST') {
+            presentedOverlay.setAttribute('aria-hidden', 'true');
+        }
+    }
+};
+/**
+ * When dismissing an overlay we need to reveal the new top-most overlay to screen readers.
+ * If the top-most overlay is a Toast we potentially need to reveal more overlays since
+ * focus is never automatically moved to the Toast.
+ */
+const revealOverlaysToScreenReaders = () => {
+    if (doc === undefined)
+        return;
+    const overlays = getPresentedOverlays(doc);
+    for (let i = overlays.length - 1; i >= 0; i--) {
+        const currentOverlay = overlays[i];
+        /**
+         * If the current we are looking at is a Toast then we can remove aria-hidden.
+         * However, we potentially need to keep looking at the overlay stack because there
+         * could be more Toasts underneath. Additionally, we need to unhide the closest non-Toast
+         * overlay too so focus can move there since focus is never automatically moved to the Toast.
+         */
+        currentOverlay.removeAttribute('aria-hidden');
+        /**
+         * If we found a non-Toast element then we can just remove aria-hidden and stop searching entirely
+         * since this overlay should always receive focus. As a result, all underlying overlays should still
+         * be hidden from screen readers.
+         */
+        if (currentOverlay.tagName !== 'ION-TOAST') {
+            break;
+        }
+    }
+};

package/dist/collection/utils/slot-mutation-controller.js

@@ -45,6 +45,18 @@ export const createSlotMutationController = (el, slotName, mutationCallback) =>
         });
         hostMutationObserver.observe(el, {
             childList: true,
+            /**
+             * This fixes an issue with the `ion-input` and
+             * `ion-textarea` not re-rendering in some cases
+             * when using the label slot functionality.
+             *
+             * HTML element patches in Stencil that are enabled
+             * by the `experimentalSlotFixes` flag in Stencil v4
+             * result in DOM manipulations that won't trigger
+             * the current mutation observer configuration and
+             * callback.
+             */
+            subtree: true,
         });
     }
     /**

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

@@ -3,6 +3,7 @@
  */
 import { newSpecPage } from "@stencil/core/testing";
 import { Modal } from "../../../components/modal/modal";
+import { Toast } from "../../../components/toast/toast";
 import { Nav } from "../../../components/nav/nav";
 import { RouterOutlet } from "../../../components/router-outlet/router-outlet";
 import { setRootAriaHidden } from "../../overlays";
@@ -150,4 +151,56 @@ describe('aria-hidden on individual overlays', () => {
         await modalOne.present();
         expect(modalOne.hasAttribute('aria-hidden')).toEqual(false);
     });
+    it('should not hide previous overlay if top-most overlay is toast', async () => {
+        const page = await newSpecPage({
+            components: [Modal, Toast],
+            html: `
+        <ion-modal id="m-one"></ion-modal>
+        <ion-modal id="m-two"></ion-modal>
+        <ion-toast id="t-one"></ion-toast>
+        <ion-toast id="t-two"></ion-toast>
+      `,
+        });
+        const modalOne = page.body.querySelector('ion-modal#m-one');
+        const modalTwo = page.body.querySelector('ion-modal#m-two');
+        const toastOne = page.body.querySelector('ion-toast#t-one');
+        const toastTwo = page.body.querySelector('ion-toast#t-two');
+        await modalOne.present();
+        await modalTwo.present();
+        await toastOne.present();
+        await toastTwo.present();
+        expect(modalOne.hasAttribute('aria-hidden')).toEqual(true);
+        expect(modalTwo.hasAttribute('aria-hidden')).toEqual(false);
+        expect(toastOne.hasAttribute('aria-hidden')).toEqual(false);
+        expect(toastTwo.hasAttribute('aria-hidden')).toEqual(false);
+        await toastTwo.dismiss();
+        expect(modalOne.hasAttribute('aria-hidden')).toEqual(true);
+        expect(modalTwo.hasAttribute('aria-hidden')).toEqual(false);
+        expect(toastOne.hasAttribute('aria-hidden')).toEqual(false);
+        await toastOne.dismiss();
+        expect(modalOne.hasAttribute('aria-hidden')).toEqual(true);
+        expect(modalTwo.hasAttribute('aria-hidden')).toEqual(false);
+    });
+    it('should hide previous overlay even with a toast that is not the top-most overlay', async () => {
+        const page = await newSpecPage({
+            components: [Modal, Toast],
+            html: `
+        <ion-modal id="m-one"></ion-modal>
+        <ion-toast id="t-one"></ion-toast>
+        <ion-modal id="m-two"></ion-modal>
+      `,
+        });
+        const modalOne = page.body.querySelector('ion-modal#m-one');
+        const modalTwo = page.body.querySelector('ion-modal#m-two');
+        const toastOne = page.body.querySelector('ion-toast#t-one');
+        await modalOne.present();
+        await toastOne.present();
+        await modalTwo.present();
+        expect(modalOne.hasAttribute('aria-hidden')).toEqual(true);
+        expect(toastOne.hasAttribute('aria-hidden')).toEqual(true);
+        expect(modalTwo.hasAttribute('aria-hidden')).toEqual(false);
+        await modalTwo.dismiss();
+        expect(modalOne.hasAttribute('aria-hidden')).toEqual(false);
+        expect(toastOne.hasAttribute('aria-hidden')).toEqual(false);
+    });
 });

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

@@ -8,34 +8,34 @@
  * each test title is unique.
  */
 const generateTitle = (title, config) => {
-    const { mode, direction, theme } = config;
-    if (theme === 'light') {
+    const { mode, direction, palette } = config;
+    if (palette === 'light') {
         /**
          * Ionic has many existing tests that existed prior to
-         * the introduction of theme testing. To maintain backwards
-         * compatibility, we will not include the theme in the test
-         * title if the theme is set to light.
+         * the introduction of palette testing. To maintain backwards
+         * compatibility, we will not include the palette in the test
+         * title if the palette is set to light.
          */
         return `${title} - ${mode}/${direction}`;
     }
-    return `${title} - ${mode}/${direction}/${theme}`;
+    return `${title} - ${mode}/${direction}/${palette}`;
 };
 /**
  * Generates a unique filename based on a base filename
  * and a test config.
  */
 const generateScreenshotName = (fileName, config) => {
-    const { mode, direction, theme } = config;
-    if (theme === 'light') {
+    const { mode, direction, palette } = config;
+    if (palette === 'light') {
         /**
          * Ionic has many existing tests that existed prior to
-         * the introduction of theme testing. To maintain backwards
-         * compatibility, we will not include the theme in the screenshot
-         * name if the theme is set to light.
+         * the introduction of palette testing. To maintain backwards
+         * compatibility, we will not include the palette in the screenshot
+         * name if the palette is set to light.
          */
         return `${fileName}-${mode}-${direction}.png`;
     }
-    return `${fileName}-${mode}-${direction}-${theme}.png`;
+    return `${fileName}-${mode}-${direction}-${palette}.png`;
 };
 /**
  * Given a config generate an array of test variants.
@@ -50,11 +50,11 @@ export const configs = (testConfig = DEFAULT_TEST_CONFIG_OPTION) => {
      */
     const processedMode = modes !== null && modes !== void 0 ? modes : DEFAULT_MODES;
     const processedDirection = directions !== null && directions !== void 0 ? directions : DEFAULT_DIRECTIONS;
-    const processedTheme = (_a = testConfig.themes) !== null && _a !== void 0 ? _a : DEFAULT_THEMES;
+    const processedPalette = (_a = testConfig.palettes) !== null && _a !== void 0 ? _a : DEFAULT_PALETTES;
     processedMode.forEach((mode) => {
         processedDirection.forEach((direction) => {
-            processedTheme.forEach((theme) => {
-                configs.push({ mode, direction, theme });
+            processedPalette.forEach((palette) => {
+                configs.push({ mode, direction, palette });
             });
         });
     });
@@ -68,9 +68,9 @@ export const configs = (testConfig = DEFAULT_TEST_CONFIG_OPTION) => {
 };
 const DEFAULT_MODES = ['ios', 'md'];
 const DEFAULT_DIRECTIONS = ['ltr', 'rtl'];
-const DEFAULT_THEMES = ['light'];
+const DEFAULT_PALETTES = ['light'];
 const DEFAULT_TEST_CONFIG_OPTION = {
     modes: DEFAULT_MODES,
     directions: DEFAULT_DIRECTIONS,
-    themes: DEFAULT_THEMES,
+    palettes: DEFAULT_PALETTES,
 };

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

@@ -18,16 +18,16 @@ export const setContent = async (page, html, testInfo, options) => {
     }
     let mode;
     let direction;
-    let theme;
+    let palette;
     if (options == undefined) {
         mode = testInfo.project.metadata.mode;
         direction = testInfo.project.metadata.rtl ? 'rtl' : 'ltr';
-        theme = testInfo.project.metadata.theme;
+        palette = testInfo.project.metadata.palette;
     }
     else {
         mode = options.mode;
         direction = options.direction;
-        theme = options.theme;
+        palette = options.palette;
     }
     const baseUrl = process.env.PLAYWRIGHT_TEST_BASE_URL;
     const output = `
@@ -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}/css/themes/${theme}.always.css" rel="stylesheet" />` : ''}
+        ${palette !== 'light' ? `<link href="${baseUrl}/css/palettes/${palette}.always.css" rel="stylesheet" />` : ''}
         <script src="${baseUrl}/scripts/testing/scripts.js"></script>
         <script type="module" src="${baseUrl}/dist/ionic/ionic.esm.js"></script>
         <script>
@@ -56,8 +56,8 @@ export const setContent = async (page, html, testInfo, options) => {
     </html>
   `;
     testInfo.annotations.push({
-        type: 'theme',
-        description: theme,
+        type: 'palette',
+        description: palette,
     });
     if (baseUrl) {
         await page.route(baseUrl, (route) => {