Ionic-framework: [Accessibility] Keyboard tab/voiceover navigation over modal does not work correctly

[yannbf]

Bug Report

I'm bringing this issue again as it has been moved to another repo then closed without being fixed. This is an expected and quite important behaviour, as visually impaired people depend on it, and the element navigation without this is completely misleading.

Ionic version:


[x] 4.x

Current behavior:
After opening a modal and either pressing tabs on keyboard on desktop, or navigating using voice over through phone accessibility tools, the navigation goes over the elements in the underlying parent page, and not in the active modal.

Expected behavior:
After opening a modal, the tab navigation should start inside the modal.

Steps to reproduce:

• Create any kind of Ionic app.
• Open a modal.
• Try to navigate with the keyboard over elements in the page.

You can also use a phone and turn voice assistant, then try to navigate over the elements. On a mobile phone is even worse, as the modal becomes full screen yet the navigation still starts on the underlying page elements.

_edit: Added a video to explain the issue_

Related code:
This issue can be replicated in any blank project, no special configuration needed.

Ionic 4 is going really great! Would be even greater if there was some focus on accessibility.

[AdamModus]

+1 on this bug. I was working on improving the accessibility of my app and came across this as well.

Would maybe implementing something using aria-live properties on the modal and asserting that focus is triggered on the modal or something like that could help? 🕵️‍♀️

[yannbf]

@brandyscarney @paulstelzer I see this issue has been on the milestone for some time, do you maybe have some update on it? Thanks a lot!

[camwiegert]

@yannbf I'm beginning to go through all of Ionic and improve accessibility as part of our push on desktop support. There should be more to see on this soon. I strongly agree that this is an important issue for us to address. Thank you!

[yannbf]

@camwiegert thanks for your answer! would be lovely to check how close are you to providing this fix. Maybe is there something we can do to help? It's very important for our app.

[hannie]

+1, The bug can be easily be reproduced on the https://ionicframework.com/docs/api/modal page. I'm using the built in voiceover of MacOS. I think this an very import issue as visually impaired people have no idea that a modal has been opened.

[liamo94]

I have this issue as well. It is also an issue when you navigate to a different page, the focus is on a random element on the middle of the page, rather than at the top of the page. There needs to be a way to change focus on your app for voiceover and talkback. Our company is really pushing to get all its applications fully accessible, and this issue definitely is holding us back, so would be good to get a fix in if possible (or if anyone has a hack around in the meantime)

[ionitron-bot[bot]]

This issue has been labeled as help wanted. This label is added to issues that we believe would be good for contributors.

If you'd like to work on this issue, please comment here letting us know that you would like to submit a pull request for it. This helps us to keep track of the pull request and make sure there isn't duplicated effort.

For a guide on how to create a pull request and test this project locally to see your changes, see our contributing documentation.

Thank you!

[brandyscarney]

I added a help wanted label if anyone would like to take a look at this. We're currently working on some other issues with desktop support, and would appreciate any help we can get. Thanks!

[Janssena]

Any update on this issue? On mobile devices, the VoiceOver assistant on iOS starts reading from the background page before reading any elements inside the modal window. Our code is using Ionic/core 4.5

[liamdebeasi]

Thanks for the issue. This has been resolved via https://github.com/ionic-team/ionic/pull/20997, and a fix will be available in an upcoming release of Ionic Framework.

[yannbf]

Hey @liamdebeasi that's great news! Thanks for taking the time to implement it!

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. 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.