accessibility aria-live reading order changes on ios

Question

I am trying to add accessibility to a dynamic page and I have a div to where all the content gets replaced and its marked as polite for aria-live.

<div id="replace-content" aria-live="polite" aria-relevant="additions"></div>

When the content gets replaced everything get read as expected, but when I replace for the content

<p id="p1"> A Title </p>
<p id="p2"> Some text </p>
<table id="table">
a Table with multiple rows and 2 columns
</table>
<p id="p3">  More Text </p>

ios VoiceOver reads in the order p1, p2, p3, table intead of p1, p2, table, p3.

This only happens on ios VoiceOver using chrome's ChromeVox works as expected.

Does anyone know how to change the reading order in ios?

Answer 1

I'm not happy with the workaround, but you can apply aria-live to each child element at the time that the child is added to the DOM, and iOS VoiceOver will read it in the proper order. However, this results in MacOS VoiceOver not reading the content at all. Hmm.