Can't set focus() on a tabindexed element with children in mobile Safari?

Question

As part of some a11y work I've been doing recently on an one page app, I've added code that calls focus() on the header of a page whenever a new page loads. This works great on desktop, and gets read out correctly by a screenreader, but completely fails with VoiceOver in mobile Safari.

After hours of debugging and Googling, I discovered that it seems to fail when trying to focus on an element (that is normally not-focusable) with children.

Example code:

<div id="header1" tabindex="-1">Hello world</div>
<div id="header2" tabindex="-1">Goodbye <span>cruel cruel</span> world</div>

Then enable VoiceOver in Safari, and try to call:

document.getElementById('header1').focus();

And notice that it gets read, but that

document.getElementById('header2').focus();

does absolutely nothing, which seems like completely broken behavior to me. Am I doing something fundamentally wrong, or is this a known issue, and is there any way around this without having to resort to focusing on elements without children?

Answer 1

That does sound messed up. You can try two different things:

1. add a tabindex="-1" to the inner <span> . I doubt that will do anything but perhaps the non-focusable nature of the inner element is affecting the parent element.

2. use the undocumented role="text" on the outer <div> . That will cause the entire <div> to be treated as one element instead of treating the inner element as a separate VoiceOver "tab stop". This probably has a better chance at fixing the problem.

<div role="text" id="header2" tabindex="-1">Goodbye <span>cruel cruel</span> world</div>