From 36f8cd47f8bd054f682bf347e00aa127b13613eb Mon Sep 17 00:00:00 2001 From: amandaesmith3 Date: Wed, 7 Feb 2024 13:15:30 -0600 Subject: [PATCH 01/16] fix(overlays): ensure that only topmost overlay is visible to screen readers --- core/src/utils/overlays.ts | 28 ++++++++ core/src/utils/test/overlays/index.html | 70 +++++++++++-------- core/src/utils/test/overlays/overlays.spec.ts | 65 +++++++++++++++++ 3 files changed, 135 insertions(+), 28 deletions(-) diff --git a/core/src/utils/overlays.ts b/core/src/utils/overlays.ts index f4eaad1e4cf..e01f10401fd 100644 --- a/core/src/utils/overlays.ts +++ b/core/src/utils/overlays.ts @@ -491,6 +491,16 @@ export const present = async ( 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')); + } + overlay.presented = true; overlay.willPresent.emit(); overlay.willPresentShorthand?.emit(); @@ -528,6 +538,15 @@ export const present = async ( 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'); }; /** @@ -625,6 +644,15 @@ export const dismiss = async ( } 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'); + } + return true; }; diff --git a/core/src/utils/test/overlays/index.html b/core/src/utils/test/overlays/index.html index 51fa62440e7..85921f7b281 100644 --- a/core/src/utils/test/overlays/index.html +++ b/core/src/utils/test/overlays/index.html @@ -20,33 +20,47 @@ - - - Open Modal - - -
- - - Modal - Inline - - - - - - - - - Create a Modal - Create Nested Overlay Modal - Present a Hidden Modal - Create and Present a Modal - Simulate Hardware Back Button - Create and Present Toast - -
+ + + + Open Modal + + +
+ + + Modal - Inline + + + + + + + + + Create a Modal + Create Nested Overlay Modal + Present a Hidden Modal + Create and Present a Modal + Simulate Hardware Back Button + Create and Present Toast + Present Inline Modal + + + + Inline modal + Present Nested Inline Modal + + + + + + Nested inline modal + + + +
+