ionic-team / ionic-team/ionic-framework

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

Abierto
#29,396 2 comentarios 0 reacciones 0 asignados Ver en GitHub
needs: investigation
Lenguaje dominante
TypeScript
Estrellas
52.7k
Forks
13.3k
Merge medio
1 d 15 h
PR fusionados (30 d)
51

Descripción

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

Guía de contribución

Abrir la guía de contribución

Línea de trabajo

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.

Escrito por el modelo de indexación a partir del texto del issue.

Evaluación

Stack tecnológico
typescript
Área
accessibility, frontend
Tipo de issue
Error
Dificultad
4/5
Tiempo estimado
3-5 días
Estado de actividad
Estancado
Claridad
Bien especificado
Aptitud para principiantes
38/100

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.