bug: a11y - Focus Not Limited Within Modal

Bug Report

Ionic version:

@ionic/angular 5.6.0

Current behavior:

When the modal is open, focus is not limited within modal. Moving focus past the OK button moves focus to back to the top of the page forcing user to navigate through all of the page content again in order to return focus to the modal.

Expected behavior:

Focus remains within modal until modal is closed.

Steps to reproduce:

Take the code from attached link or install .apk provide in attached link, start talk back screen reader open any overlay component from provided .apk, keep navigating with screen reader you will see focus moves on extra 2 div’s only in android devices. This issue occurs because this type of 2 <div> tag are present there in overlay component. & some times the focus moves behind the overlay component.

<div tabindex="0" class="sc-ion-alert-md"></div>

Download .apk here

Related code:

Downlead code here

Other information:

Screen shorts of issues

Ionic info:

Ionic:

   Ionic CLI                     : 6.11.8
   Ionic Framework               : @ionic/angular 5.6.0
   @angular-devkit/build-angular : 0.1101.4
   @angular-devkit/schematics    : 11.1.4
   @angular/cli                  : 11.1.4
   @ionic/angular-toolkit        : 3.1.0

Cordova:

   Cordova CLI       : 10.0.0
   Cordova Platforms : android 9.0.0
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.2.1, (and 4 other plugins)

Utility:

   cordova-res : 0.11.0
   native-run  : 1.0.0

[gurpreetonebcg]

This issue is only occurring in android devices. when you open any alert or popup box then right swipe you will see focus moves to a rectangular element before reaching to the first element of the popup & when you read whole content of popup then right swipe from the last item of popup, the focus will move again to a rectangular element. Please refer to the attach video. https://drive.google.com/file/d/1WED4jlVcs86bo2yAB5eKZoEqN9RLIdLp/view?usp=sharing

In attached video you will see when popup opens then on right swipe focus moves to right bottom corner in a rectangular box & when you reach to OK button then right swipe focus again move to a rectangular box at the right bottom corner. Please refer to the highlighted areas of attached screen shorts.

[ionitron-bot[bot]]

Thanks for the issue! This issue is being closed due to the lack of a reply. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.

Thank you for using Ionic!