iOS Safari Voicover Progromatic Focus Bug

There is a bug in iOS voiceover where you cannot programmatically send focus to an element if that element contains HTML. This is important because on a single page application, when swapping out the content on the page, we need to re-focus the topmost element and announce it to the user. This issue only occurs on iOS, Voiceover on MacOS works as expected.

The <a> tags located below the buttons as expected work when you use voice over to click on them. But if you use js to click on them they do not set focus to the elements.

Link to this projects github repo

Link to the submitted WebKit bug

Reproduction Steps

on iOS:

  1. Turn on voiceover
  2. Navigate to the buttons
  3. Click the buttons to focus the divs in voiceover

Expected Result

Voiceover focuses on the appropriate div and begins reading it

Actual Result

If the div contains html, voiceover will not focus on it or start reading. The Voiceover cursor will remain where it is and re-read the button it is on

Test

A div without html
direct text child with some html
div text child with some html


focus on text div

focus on text child div with html

focus on html child div with html