Modal doesn't get focused in iOS with VoiceOver on

[backwardok]

Issue

Steps to reproduce:

1. Turn on VO on an iOS device (doesn't seem to matter what version, even the latest version has this issue)
2. Go to the main demo page http://humaan.com/modaal/
3. Click the View Example button to open the modal

What's expected: VO focus moves to the modal, swiping right will get me to modal content

What happens: VO focus is still on the button, swiping right will get me to content past the button (which is behind the modal).

What's going on

I created a really simple modal example to demonstrate this problem: https://codepen.io/backwardok/pen/goXPPq

At the core of it is that iOS VO doesn't know how to focus most nested elements. I ended up creating a set of use cases to test VO's handling of focusing things: https://codepen.io/backwardok/pen/xpPZKL.

[danhumaan]

Thanks @backwardok. I know it's been a while since raising the issue. I appreciate the detail and we'll work to find a solution to make it more useful on mobile. Cheers

[danhumaan]

Made some progress on this, and it appears to be driven by VoiceOver's being a little less than ideal in the way it handles the shift of focus. With a little user agent detection and slight delay we seem to be in a better place, although it is a less than ideal solution (but one that works for now). We'll roll this one out shortly once it's been tested a bit more thoroughly.

The next difficulty we seem to be running into is a random result in the 'return to last focus state' where VoiceOver, if it can't find/remember the state for whatever reason, will default to a focusable element nearest the last press being the close button of the modal.

It appears we aren't alone in dealing with issues like these as others seem to be having similar issues. Contribution on this from anyone is very welcome.

[backwardok]

Thanks for working on this! I've found that older versions of iOS (<11.3) + VO seem to have a performance problem when new DOM nodes are added. Seems like the accessibility tree isn't getting populated fast enough or something, so even when the DOM node is available and keyboard focus moves, sometimes VO focus doesn't move with it. With a modal I was working with, I did a somewhat hacky double timeout focus attempt (with timeout of 0), which seemed to do the trick, but probably like what you're attempting, it's an awkward solution.

[backwardok]

Also not sure if this is helpful or not but I chatted with @scottaohara a few times about modals and he has a few useful resources:

• https://developer.paciellogroup.com/blog/2018/06/the-current-state-of-modal-dialog-accessibility/
• https://codepen.io/scottohara/pen/lIdfv

[scottaohara]

oh hi @backwardok :)

got the notification, so just dropping into provide a direct link to the latest version of my script, in case a comparison to how i handled some of these issues.