Open nagashimam opened 2 weeks ago
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.
Prerequisites
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
orwillDismiss
lifecycle events are used to trigger the dismissal of another overlay, the root element should not remainaria-hidden
. Alternatively, the documentation should explicitly note this behavior and recommend usingdidDismiss
for dismissing another overlay instead ofwillDismiss
.Steps to Reproduce
ion-modal
will be presented.ion-action-sheet
will be presented.ion-modal
andion-action-sheet
will be dismissed.ion-router-outlet
is marked asaria-hidden
.actionSheet.onDidDismiss();
on line 35 toactionSheet.onWillDismiss();
, and save.ion-router-outlet
is NOT marked asaria-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 (cordova-lib@12.0.1) 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.