bug: navigating to new view in ion-nav in a modal causes browser to move focus to body

[BenoitMonchanin]

Prerequisites

• [X] I have read the Contributing Guidelines.
• [X] I agree to follow the Code of Conduct.
• [X] I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

v6.x

Current Behavior

Hi,

I have a IonNav in a IonModal and I am trying to get better accessibility on my app. But I'm facing an issue, when user navigates through a new page in my IonNav, focus is not trap anymore in modal and continue in background.

Expected Behavior

The expected behavior it to trap the focus in modal when navigating through IonNav pages.

Steps to Reproduce

1. Build a IonNav in a IonModal ;
2. Make sure you have two or more pages you can navigate through ;
3. On navigating to your second, third or more, page using Tab, you can see that your focus continue on your main page (besides your modal).

Code Reproduction URL

No response

Ionic Info

Ionic:

Ionic CLI : 6.20.8 (/usr/local/lib/node_modules/@ionic/cli) Ionic Framework : @ionic/angular 6.3.2 @angular-devkit/build-angular : 13.3.11 @angular-devkit/schematics : 14.2.2 @angular/cli : 13.1.4 @ionic/angular-toolkit : 7.0.0

Capacitor:

Capacitor CLI : not installed @capacitor/android : not installed @capacitor/core : not installed @capacitor/ios : not installed

Utility:

cordova-res : not installed globally native-run : not installed globally

System:

NodeJS : v16.19.1 (/Users/monchaninbenoit/.nvm/versions/node/v16.19.1/bin/node) npm : 8.19.3 OS : macOS

Additional Information

Don't worry to ask me for something !

Sorry for my bad english

[ionitron-bot[bot]]

Thanks for the issue! This issue has been labeled as needs reproduction. This label is added to issues that need a code reproduction.

Please reproduce this issue in an Ionic starter application and provide a way for us to access it (GitHub repo, StackBlitz, etc). Without a reliable code reproduction, it is unlikely we will be able to resolve the issue, leading to it being closed.

If you have already provided a code snippet and are seeing this message, it is likely that the code snippet was not enough for our team to reproduce the issue.

For a guide on how to create a good reproduction, see our Contributing Guide.

[BenoitMonchanin]

Hello !

Here is a link to a little project which has the issue : https://github.com/BenoitMonchanin/ionic-demo You can just run by cd ion-modal_navigation, little npm i then ionic serve and the first page will be it !

Simply use the "Open Modal" button and navigate through modals using Tab and Space with buttons, you'll see the issue.

Also here is the ionic info for this project :

Ionic:

Ionic CLI : 6.20.8 (/usr/local/lib/node_modules/@ionic/cli) Ionic Framework : not installed @angular-devkit/build-angular : 16.0.1 @angular-devkit/schematics : 16.0.1 @angular/cli : 16.0.1 @ionic/angular-toolkit : 9.0.0

Capacitor:

Capacitor CLI : 5.0.3 @capacitor/android : not installed @capacitor/core : 5.0.3 @capacitor/ios : not installed

Utility:

cordova-res : not installed globally native-run : 1.7.2

System:

NodeJS : v16.19.1 (/Users/monchaninbenoit/.nvm/versions/node/v16.19.1/bin/node) npm : 8.19.3 OS : macOS

Thanks

[liamdebeasi]

Thanks for the report. It looks like the issue here is the previously focused element (the ion-button on Page1) is hidden, so the browser moves focus to the body. This is normally fine when used outside of ion-modal (since the body should have focus), but when used in ion-modal the focus should be moved to the modal.

[ncallsen-ba]

@BenoitMonchanin have you found any workaround for this? We are facing the same issue.