ionic-team / ionic-team/ionic-framework
bug: root remains `aria-hidden` after dismissing multiple overlays consecutively
- Ngôn ngữ chính
- TypeScript
- Star
- 52.7k
- Fork
- 13.3k
- Merge trung bình
- 1 ngày 15 giờ
- Pull request đã merge (30 ngày)
- 51
Mô tả
### Prerequisites
- [X] I have read the [Contributing Guidelines](https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#creating-an-issue).
- [X] I agree to follow the [Code of Conduct](https://ionicframework.com/code-of-conduct).
- [X] I have searched for [existing issues](https://github.com/ionic-team/ionic-framework/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](https://angular-ffa5nq.stackblitz.io).
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](https://stackblitz.com/edit/angular-ffa5nq?file=src%2Fapp%2Fexample.component.ts).
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 (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](https://github.com/ionic-team/ionic-framework/blob/main/core/src/utils/overlays.ts#L620), the [willDismiss event is emitted](https://github.com/ionic-team/ionic-framework/blob/main/core/src/utils/overlays.ts#L649), and the second modal's dismiss is queued in the microtask queue. And after that, awaiting [overlayAnimation](https://github.com/ionic-team/ionic-framework/blob/main/core/src/utils/overlays.ts#L659C13-L659C29) 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](https://github.com/ionic-team/ionic-framework/blob/main/core/src/utils/overlays.ts#L678). From the perspective of the second overlay, two modals are still present and not hidden, so it skips calling [setRootAriaHidden(false)](https://github.com/ionic-team/ionic-framework/blob/main/core/src/utils/overlays.ts#L64).
### 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](https://github.com/ionic-team/ionic-framework/compare/main...nagashimam:ionic-framework:root_remains_aria-hidden_after_dismissing_multiple_overlays_consecutively).
Hướng dẫn đóng góp
Đánh giá
Issue này chưa được đánh giá.