As the title says, I have a focus trap on a webpage that performs properly when using tab, as well as with NVDA and VoiceOver on Mac. However, with iOS VoiceOver, it will always go outside of the focus trap (which uses the most popular 3rd party node module to implement: react-focus-lock).
The particular issue is with a mobile menu that opens up. Below is an example of the code (which runs some javascript for the focus trap, but works with everything except for iOS VoiceOver).
<div data-focus-lock-disabled="false">
<nav id="mobile-menu">
<ul>
<li><a href="...">Some Link</a></li>
</ul>
</nav>
</div>
<main>
<h3>Some subtitle below</h3>
</main>
When VoiceOver reads the above elements, it will link through any headers at the top of Main before looping back to the original element (which should just be the link).
I'm not 100% certain what the node module is doing, but most of them will just listen for particular key strokes in order to handle looping back properly. Given that every other system works properly I'm wondering if this is a potential bug in iOS VoiceOver, although I'll admit my knowledge of accessibility tools is quite limited so I'm also open to advice on how to fix it!