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

[nagashimam]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• 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.