bug: root remains `aria-hidden` after dismissing multiple overlays consecutively

[nagashimam]

Prerequisites

• [X] I have read the Contributing Guidelines.
• [X] I agree to follow the Code of Conduct.
• [X] I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

v7.x, v8.x

Current Behavior

Consider this scenario: A modal that contains a form is presented. You try to close it, and a confirmation dialog is presented. You click "confirm", and the confirmation dialog is dismissed first. And in the confirmation dialog's willDismiss life cycle, the form modal is dismissed too. And then, the root element such as ion-router-outlet remains aria-hidden.

Note the root is not aria-hidden when the form modal is dismissed on the confirmation dialog's didDismiss life cycle.¥

Expected Behavior

Regardless of whether the didDismiss or willDismiss lifecycle events are used to trigger the dismissal of another overlay, the root element should not remain aria-hidden. Alternatively, the documentation should explicitly note this behavior and recommend using didDismiss for dismissing another overlay instead of willDismiss.

Steps to Reproduce

1. Open the reproduction page.
2. Click "Open", and an ion-modal will be presented.
3. Click "Close", and an ion-action-sheet will be presented.
4. Click "Yes", and both the ion-modal and ion-action-sheet will be dismissed.
5. Open the dev tool, and note the ion-router-outlet is marked as aria-hidden.
6. Go to the code reproduction page.
7. Change actionSheet.onDidDismiss(); on line 35 to actionSheet.onWillDismiss();, and save.
8. Refresh the reproduction page and repeat the same procedure.
9. Observe that the ion-router-outlet is NOT marked as aria-hidden.

Code Reproduction URL

https://stackblitz.com/edit/angular-ffa5nq?file=src%2Fapp%2Fexample.component.ts

Ionic Info

Ionic:

Ionic CLI : 7.2.0 (/Users/mzb0005/.anyenv/envs/nodenv/versions/20.11.1/lib/node_modules/@ionic/cli) Ionic Framework : @ionic/angular 7.8.0 @angular-devkit/build-angular : 17.3.0 @angular-devkit/schematics : 17.3.0 @angular/cli : 17.3.0 @ionic/angular-toolkit : 11.0.1

Cordova:

Cordova CLI : 12.0.0 ([email protected]) Cordova Platforms : android 12.0.1, ios 7.0.1 Cordova Plugins : cordova-plugin-ionic-keyboard 2.2.0, (and 43 other plugins)

Utility:

cordova-res : not installed globally native-run : 2.0.1

System:

ios-deploy : 1.12.2 ios-sim : ios-sim/9.0.0 darwin-arm64 node-v20.11.1 NodeJS : v20.11.1 (/Users/mzb0005/.anyenv/envs/nodenv/versions/20.11.1/bin/node) npm : 10.2.4 OS : macOS Unknown Xcode : Xcode 15.2 Build version 15C500b

Additional Information

Additional Information

Cause of the Behavior

During the first overlay's dismiss, the willDismiss event is emitted, and the second modal's dismiss is queued in the microtask queue. And after that, awaiting overlayAnimation puts everything after that lines to the microtask queue.

This sequence causes the second overlay's dismiss to execute before the first overlay has added "overlay-hidden" to its classList. From the perspective of the second overlay, two modals are still present and not hidden, so it skips calling setRootAriaHidden(false).

Possible Fix

One possible solution could involve implementing a flag that indicates an overlay is being dismissed, which might manage the timing issue more effectively. Here's a commit with a possible fix.

[dpalou]

We detected the same problem in our app, and also another case when this happens. We have some modals that could trigger a navigation in the app (using NavController), and we have some code to automatically close the modals when this happens:

navSubscription = Router.events
    .pipe(filter(event => event instanceof NavigationStart))
    .subscribe(() => {
         modal.dismiss();
    });

When this happens (the modal is dismissed when navigating), the aria-hidden also stays in the ion-router-outlet.