ionic-team / ionic-team/ionic-framework

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

未关闭
#29,396 2 条评论 0 个 reaction 已指派 0 人 在 GitHub 查看
needs: investigation
主要语言
TypeScript
星标
52.7k
派生
13.3k
平均合并
1 天 15 小时
30 天内合并 PR
51

描述

### 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).

贡献指南

打开贡献指南

调研方向

Start in core/src/utils/overlays.ts around dismiss, the willDismiss emission, overlayAnimation, and setRootAriaHidden(false). Run the linked StackBlitz reproduction with consecutive modal and action-sheet dismissal from both lifecycle events. Done means the root element is no longer left aria-hidden in either sequence.

由索引模型根据 Issue 内容生成。

评估

技术栈
typescript
领域
accessibility, frontend
Issue 类型
缺陷
难度
4/5
预计耗时
3-5 天
活跃度
停滞
描述清晰度
描述清楚
新手友好度
38/100

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。