bug: ios, voiceover does not move to correct location after page transition

[Waligustav]

Prequisites

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

Ionic Framework Version

• v4.x
• v5.x
• v6.x

Current Behavior

Hi!

I stumbled upon a bug while implementing some accessibility functionality in an application

When navigating from page A to page B with voice-over within my application, the following issue appears. Upon entry to page B, the voice over-gets stuck on page A. Voice-over does not detect the correct contents inside page B. It looks like the voice-over keeps focusing on the recently clicked element from the previous page (A).

I have recorded functionality behaviour in the video linked below.

VoiceOverBugRecording.mov

Expected Behavior

When redirecting from "test page1" (A) to "test page2" (B) voice-over should immediately detect the first contents within the pages body so that the voice-over starts reading from the top of the page.

Steps to Reproduce

Project initiation

• Download the repo
• Open your CLI and navigate to the project folder
• Type "npm install" and "ionic serve"

(macOS)

• Go to system preferences > accessibility > shortcut > make sure every box is checked
• Open the browser window that contains the project server > right click > inspect > toggle device toolbar "iphone X"
• Press CMD while quickly pressing the "touch id" button 3 times
• Refresh the browser window that contains the project server

Voice-over navigation

• CAPS-lock + shift + down-arrow to enter the current area
• CAPS-lock + shift + up-arrow to exit the current area
• CAPS-lock + shift + right-arrow to skip the current area
• CAPS-lock + space to "click" on a clickable link/button/item

Code Reproduction URL

https://github.com/Waligustav/ionicbugtest

Ionic Info

[WARN] Error loading @capacitor/ios package.json: Error: Cannot find module
'@capacitor/ios/package'

   Require stack:
   -
   /Users/walibjork/.nvm/versions/node/v14.7.0/lib/node_modules/@ionic/cli/lib/project/index.js
   -
   /Users/walibjork/.nvm/versions/node/v14.7.0/lib/node_modules/@ionic/cli/lib/index.js
   - /Users/walibjork/.nvm/versions/node/v14.7.0/lib/node_modules/@ionic/cli/index.js
   - /Users/walibjork/.nvm/versions/node/v14.7.0/lib/node_modules/@ionic/cli/bin/ionic

[WARN] Error loading @capacitor/android package.json: Error: Cannot find module
'@capacitor/android/package'

   Require stack:
   -
   /Users/walibjork/.nvm/versions/node/v14.7.0/lib/node_modules/@ionic/cli/lib/project/index.js
   -
   /Users/walibjork/.nvm/versions/node/v14.7.0/lib/node_modules/@ionic/cli/lib/index.js
   - /Users/walibjork/.nvm/versions/node/v14.7.0/lib/node_modules/@ionic/cli/index.js
   - /Users/walibjork/.nvm/versions/node/v14.7.0/lib/node_modules/@ionic/cli/bin/ionic

Ionic:

Ionic CLI : 6.16.3 (/Users/walibjork/.nvm/versions/node/v14.7.0/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/vue 5.6.11

Capacitor:

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

Utility:

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

System:

NodeJS : v14.7.0 (/Users/walibjork/.nvm/versions/node/v14.7.0/bin/node)
npm : 6.14.7
OS : macOS Catalina

Additional Information

I upgraded a copy of the project to the Ionic 6 beta and tested the same functionality without any positive results.

I also tried this on a physical Iphone and voice-over seems to behave similarly.
Let me know if you want me to post more information about testing this issue on a physical device and i will provide you with more information.

[liamdebeasi]

Thanks for the issue. What version of iOS are you testing this on? The behavior I am seeing in both mobile Safari and in a Capacitor application is that the VoiceOver "focus" automatically moves to the new page when the page transition ends.

It might be better to use a physical device as baseline for your tests as the mobile views in desktop browsers only simulate the experience.

[Waligustav]

Thanks for the issue. What version of iOS are you testing this on? The behavior I am seeing in both mobile Safari and in a Capacitor application is that the VoiceOver "focus" automatically moves to the new page when the page transition ends.

It might be better to use a physical device as baseline for your tests as the mobile views in desktop browsers only simulate the experience.

Hi Liam, thanks for the quick reply

I am now testing this on iOS 14.0.1 (physical Iphone 11 pro device)

I can see that the "focus" moves to the new page after the page transition ends, but focus does not seem to be on the "correct" place. Focus jumps to an element on page B aligned at the same height as the last clicked element on page A.
If, for example the navigation link from the first page (A) is at the bottom of the screen, focus will jump to an item aligned at the bottom of the next page (B), not on the top of the page (B) screen.

And while testing this on macOS (10.15.7) it does not "focus" on the new page at all, as you can see in the attached video."

[liamdebeasi]

Thanks I can reproduce this. I am not sure how much control we have over the VoiceOver focus, but I can do some more digging to see what is possible.

[Waligustav]

Perfect Liam, thank you for taking your time to look into this issue!