voyager-ionic-core 8.3.3 → 8.4.0

package/dist/collection/utils/overlays.js

@@ -427,9 +427,19 @@ export const present = async (overlay, name, iosEnterAnimation, mdEnterAnimation
     if (overlay.presented) {
         return;
     }
-    setRootAriaHidden(true);
+    /**
+     * 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.
+     */
+    if (overlay.el.tagName !== 'ION-TOAST') {
+        setRootAriaHidden(true);
+    }
     document.body.classList.add(BACKDROP_NO_SCROLL);
-    hideOverlaysFromScreenReaders(overlay.el);
+    hideUnderlyingOverlaysFromScreenReaders(overlay.el);
+    hideAnimatingOverlayFromScreenReaders(overlay.el);
     overlay.presented = true;
     overlay.willPresent.emit();
     (_a = overlay.willPresentShorthand) === null || _a === void 0 ? void 0 : _a.emit();
@@ -469,6 +479,11 @@ export const present = async (overlay, name, iosEnterAnimation, mdEnterAnimation
      * it would still have aria-hidden on being presented again.
      * Removing it here ensures the overlay is visible to screen
      * readers.
+     *
+     * If this overlay was being presented, then it was hidden
+     * from screen readers during the animation. Now that the
+     * animation is complete, we can reveal the overlay to
+     * screen readers.
      */
     overlay.el.removeAttribute('aria-hidden');
 };
@@ -526,17 +541,35 @@ export const dismiss = async (overlay, data, role, name, iosLeaveAnimation, mdLe
     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.
+     * For accessibility, toasts lack focus traps and don’t receive
+     * `aria-hidden` on the root element when presented.
+     *
+     * All other overlays use focus traps to keep keyboard focus
+     * within the overlay, setting `aria-hidden` on the root element
+     * to enhance accessibility.
+     *
+     * Therefore, we must remove `aria-hidden` from the root element
+     * when the last non-toast overlay is dismissed.
      */
-    if (lastOverlay) {
+    const overlaysNotToast = doc !== undefined ? getPresentedOverlays(doc).filter((o) => o.tagName !== 'ION-TOAST') : [];
+    const lastOverlayNotToast = overlaysNotToast.length === 1 && overlaysNotToast[0].id === overlay.el.id;
+    /**
+     * If this is the last visible overlay that is not a toast
+     * then we want to re-add the root to the accessibility tree.
+     */
+    if (lastOverlayNotToast) {
         setRootAriaHidden(false);
         document.body.classList.remove(BACKDROP_NO_SCROLL);
     }
     overlay.presented = false;
     try {
+        /**
+         * There is no need to show the overlay to screen readers during
+         * the dismiss animation. This is because the overlay will be removed
+         * from the DOM after the animation is complete.
+         */
+        hideAnimatingOverlayFromScreenReaders(overlay.el);
         // Overlay contents should not be clickable during dismiss
         overlay.el.style.setProperty('pointer-events', 'none');
         overlay.willDismiss.emit({ data, role });
@@ -771,6 +804,28 @@ export const createTriggerController = () => {
         removeClickListener,
     };
 };
+/**
+ * The overlay that is being animated also needs to hide from screen
+ * readers during its animation. This ensures that assistive technologies
+ * like TalkBack do not announce or interact with the content until the
+ * animation is complete, avoiding confusion for users.
+ *
+ * If the overlay is being presented, it prevents focus rings from appearing
+ * in incorrect positions due to the transition (specifically `transform`
+ * styles), ensuring that when aria-hidden is removed, the focus rings are
+ * correctly displayed in the final location of the elements.
+ *
+ * @param overlay - The overlay that is being animated.
+ */
+const hideAnimatingOverlayFromScreenReaders = (overlay) => {
+    if (doc === undefined)
+        return;
+    /**
+     * Once the animation is complete, this attribute will be removed.
+     * This is done at the end of the `present` method.
+     */
+    overlay.setAttribute('aria-hidden', 'true');
+};
 /**
  * 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
@@ -781,7 +836,7 @@ export const createTriggerController = () => {
  * @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) => {
+const hideUnderlyingOverlaysFromScreenReaders = (newTopMostOverlay) => {
     var _a;
     if (doc === undefined)
         return;