fix(overlays): exclude backdrop-no-scroll class when toast is presented (#30123)

Issue number: resolves #30112 

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?

When toast is presented, the `backdrop-no-scroll` class is added to the
body when using Frameworks like Angular. It should not add this class as
toast does not be setting focus trap as mentioned in the
[comments](https://github.com/ionic-team/ionic-framework/blob/1cfa915e8fe362951c521bce970a9f5f10918ab2/core/src/utils/overlays.ts#L514-L520).

## What is the new behavior?

- Class is only added when the overlay that is presented is not a toast
component.
- Test was added.

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!--
  If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
  2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer
for more information.
-->


## Other information

N/A

---------

Co-authored-by: Maria Hutt <[email protected]>

Author: tobiloeb

core/src/utils/overlays.ts

@@ -520,10 +520,9 @@ export const present = async <OverlayPresentOptions>(
    */
   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 <OverlayDismissOptions>(
     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 <OverlayDismissOptions>(
    * 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;
 

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: `
+        <ion-toast></ion-toast>
+      `,
+    });
+
+    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');
+  });
 });