bug: root remains aria-hidden
after dismissing multiple overlays consecutively
#29396
Open
3 tasks done
Labels
needs: investigation
This issue is waiting on more investigation from the Ionic Team.
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.
The text was updated successfully, but these errors were encountered: