fix(overlay): do not hide overlay if toast is presented

core/src/utils/overlays.ts

@@ -541,16 +541,7 @@ export const present = async <OverlayPresentOptions>(
  }
 
  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'));
- }
+ hideOverlaysFromScreenReaders(overlay.el);
 
  overlay.presented = true;
  overlay.willPresent.emit();
@@ -723,13 +714,7 @@ export const dismiss = async <OverlayDismissOptions>(
 
  overlay.el.remove();
 
- /**
- * If there are other overlays presented, unhide the new
- * topmost one from screen readers.
- */
- if (doc !== undefined) {
- getPresentedOverlay(doc)?.removeAttribute('aria-hidden');
- }
+ revealOverlaysToScreenReaders();
 
  return true;
 };
@@ -966,3 +951,65 @@ 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: HTMLIonOverlayElement) => {
+ if (doc === undefined) return;
+
+ const overlays = getPresentedOverlays(doc);
+
+ for (let i = overlays.length - 1; i >= 0; i--) {
+ const presentedOverlay = overlays[i];
+ const nextPresentedOverlay = overlays[i + 1] ?? 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;
+ }
+ }
+};

core/src/utils/test/overlays/overlays.spec.ts

@@ -1,6 +1,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';
@@ -193,4 +194,70 @@ 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<HTMLIonModalElement>('ion-modal#m-one')!;
+ const modalTwo = page.body.querySelector<HTMLIonModalElement>('ion-modal#m-two')!;
+ const toastOne = page.body.querySelector<HTMLIonModalElement>('ion-toast#t-one')!;
+ const toastTwo = page.body.querySelector<HTMLIonModalElement>('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<HTMLIonModalElement>('ion-modal#m-one')!;
+ const modalTwo = page.body.querySelector<HTMLIonModalElement>('ion-modal#m-two')!;
+ const toastOne = page.body.querySelector<HTMLIonModalElement>('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);
+ });
 });