From f5bd24e592ee9a6292ed0d2be0d6c1f5b8eee38b Mon Sep 17 00:00:00 2001 From: Maria Hutt Date: Tue, 22 Oct 2024 17:13:33 -0700 Subject: [PATCH 1/3] fix(overlays): do not hide root when toast appears --- core/src/utils/overlays.ts | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/core/src/utils/overlays.ts b/core/src/utils/overlays.ts index e69bd49dcda..7a18ee64dd5 100644 --- a/core/src/utils/overlays.ts +++ b/core/src/utils/overlays.ts @@ -510,7 +510,17 @@ export const present = async ( 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); From 33be9ffe7b8f42ea45460dbcf9a5fc01b298ad0a Mon Sep 17 00:00:00 2001 From: Maria Hutt Date: Wed, 23 Oct 2024 11:08:29 -0700 Subject: [PATCH 2/3] chore: run lint --- core/src/utils/overlays.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/core/src/utils/overlays.ts b/core/src/utils/overlays.ts index 7a18ee64dd5..1e6ec63701a 100644 --- a/core/src/utils/overlays.ts +++ b/core/src/utils/overlays.ts @@ -510,11 +510,10 @@ export const present = async ( return; } - /** * 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. */ From ea28919f9f318b77d70c6079e13adac26e039126 Mon Sep 17 00:00:00 2001 From: Maria Hutt Date: Fri, 25 Oct 2024 11:00:39 -0700 Subject: [PATCH 3/3] fix(overlays): remove aria hidden if last overlay is not toast --- core/src/utils/overlays.ts | 21 +++++++++++++++++---- 1 file changed, 17 insertions(+), 4 deletions(-) diff --git a/core/src/utils/overlays.ts b/core/src/utils/overlays.ts index 1e6ec63701a..f932a3cff3b 100644 --- a/core/src/utils/overlays.ts +++ b/core/src/utils/overlays.ts @@ -639,13 +639,26 @@ export const dismiss = async ( return false; } - const lastOverlay = doc !== undefined && getPresentedOverlays(doc).length === 1; + /** + * 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. + */ + 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 then - * we want to re-add the root to the accessibility tree. + * 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 (lastOverlay) { + if (lastOverlayNotToast) { setRootAriaHidden(false); document.body.classList.remove(BACKDROP_NO_SCROLL); }