Skip to content

bug: Screen readers read content behind overlays if is present more than 1 overlay #23472

Description

@falconeta

Bug Report

Ionic version:
[ ] 4.x
[x] 5.x

Current behavior:
Screen readers read content behind overlays if is present more than 1 overlay and, after closing the last overlay, the aria-hidden applied on the ion-router-outlet component is removed despite the first modal is already present.

Expected behavior:
if I open another overlay (inside an overlay for example) the screen reader doesn't have to read the hidden overlay and if I close the second overlay, the ion-router-outlet component must have the attribute aria-hidden if an overlay is present

Steps to reproduce:

open first overlay -> open second overlay from first overlay

A sample application via GitHub
https://stackblitz.com/edit/ionic-bug-overlays

Ionic info:

Ionic:

   Ionic CLI                     : 6.16.1 
   Ionic Framework               : @ionic/angular 5.6.9
   @angular-devkit/build-angular : 0.1100.7
   @angular-devkit/schematics    : 11.0.7
   @angular/cli                  : 11.0.7
   @ionic/angular-toolkit        : 3.1.1

Cordova:

   Cordova CLI       : 9.0.0 (cordova-lib@9.0.1)
   Cordova Platforms : android 9.0.0, ios 5.1.1
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 5.0.0, (and 41 other plugins)

Utility:

   cordova-res                          : not installed globally
   native-run (update available: 1.4.0) : 1.2.2

System:

   Android SDK Tools : 26.1.1 
   ios-deploy        : 1.10.0
   ios-sim           : 8.0.2
   NodeJS            : v12.19.0 (/usr/local/bin/node)
   npm               : 6.14.13
   OS                : macOS Big Sur
   Xcode             : Xcode 12.5 Build version 12E262

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions