While testing VoiceOver for iOS within an @ionic/angular cordova app, I encountered the following issue:
I have two elements on a page. One is an h1 with a tabindex of 0. The other is a plain <input>.
- I enter into 'edit mode' on the input field (double tap with VoiceOver on)
- I reposition the screen reader focus to the
h1 - I double tap the
h1
I would expect at this point that the screen reader focus would remain on the h1. Instead, the focus shifts back to the <input>.
This can be reproduced by opening this StackBlitz in Safari on iOS and following the above steps.
Notes:
- the tabindex of 0 on the
h1is to facilitate focusing at the top of the page after a transition. - this happens on non
h1elements as well, this is just an example; it seems more related to the tabindex than anything