dpalou · GitHub

Prerequisites

Ionic Framework Version

v7.x

Current Behavior

In issue #23472, the behaviour of overlays was modified to add aria-hidden=true to existing overlays when displaying a new overlay. IMO this makes sense for modals and popovers, but this shouldn't be done when displaying a Toast. Toasts are overlays that don't block the interaction with the other elements in the DOM, so the rest of overlays should remain active and visible.

Expected Behavior

Displaying a Toast should not add aria-hidden=true to other overlays.

Steps to Reproduce

  1. In an Ionic app, display any modal using ModalController.create.
  2. While the modal is displayed, show a toast with a long duration using ToastController.create.
  3. Inspect the DOM and search for the ion-modal. Check that it has aria-hidden="true" while the Toast is displayed.

Code Reproduction URL

https://github.com/dpalou/overlays-toast-bug

Ionic Info

Ionic:

Ionic CLI : 7.2.0 (/Users/dpalou/.nvm/versions/node/v18.18.2/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/angular 7.7.4
@angular-devkit/build-angular : 17.2.3
@angular-devkit/schematics : 17.2.3
@angular/cli : 17.2.3
@ionic/angular-toolkit : 9.0.0

Capacitor:

Capacitor CLI : 5.7.2
@capacitor/android : not installed
@capacitor/core : 5.7.2
@capacitor/ios : not installed

Utility:

cordova-res : 0.15.4
native-run : 2.0.1

System:

NodeJS : v18.18.2 (/Users/dpalou/.nvm/versions/node/v18.18.2/bin/node)
npm : 9.8.1
OS : macOS Unknown

Additional Information

No response

Read the original on github.com ↗