diff --git a/core/src/utils/overlays.ts b/core/src/utils/overlays.ts index 90a4062840e..4a392ac5370 100644 --- a/core/src/utils/overlays.ts +++ b/core/src/utils/overlays.ts @@ -520,10 +520,9 @@ export const present = async ( */ if (overlay.el.tagName !== 'ION-TOAST') { setRootAriaHidden(true); + document.body.classList.add(BACKDROP_NO_SCROLL); } - document.body.classList.add(BACKDROP_NO_SCROLL); - hideUnderlyingOverlaysFromScreenReaders(overlay.el); hideAnimatingOverlayFromScreenReaders(overlay.el); @@ -646,6 +645,8 @@ export const dismiss = async ( return false; } + const presentedOverlays = doc !== undefined ? getPresentedOverlays(doc) : []; + /** * For accessibility, toasts lack focus traps and don’t receive * `aria-hidden` on the root element when presented. @@ -657,7 +658,7 @@ export const dismiss = async ( * 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 overlaysNotToast = presentedOverlays.filter((o) => o.tagName !== 'ION-TOAST'); const lastOverlayNotToast = overlaysNotToast.length === 1 && overlaysNotToast[0].id === overlay.el.id; diff --git a/core/src/utils/test/overlays/overlays-scroll-blocking.spec.ts b/core/src/utils/test/overlays/overlays-scroll-blocking.spec.ts index 2fcafadd9fd..28bd17dd263 100644 --- a/core/src/utils/test/overlays/overlays-scroll-blocking.spec.ts +++ b/core/src/utils/test/overlays/overlays-scroll-blocking.spec.ts @@ -1,6 +1,7 @@ import { newSpecPage } from '@stencil/core/testing'; import { Modal } from '../../../components/modal/modal'; +import { Toast } from '../../../components/toast/toast'; describe('overlays: scroll blocking', () => { it('should not block scroll when the overlay is created', async () => { @@ -85,4 +86,25 @@ describe('overlays: scroll blocking', () => { expect(body).not.toHaveClass('backdrop-no-scroll'); }); + + // Fixes https://github.com/ionic-team/ionic-framework/issues/30112 + it('should not block scroll when the toast overlay is presented', async () => { + const page = await newSpecPage({ + components: [Toast], + html: ` + + `, + }); + + const toast = page.body.querySelector('ion-toast')!; + const body = page.doc.querySelector('body')!; + + await toast.present(); + + expect(body).not.toHaveClass('backdrop-no-scroll'); + + await toast.dismiss(); + + expect(body).not.toHaveClass('backdrop-no-scroll'); + }); });