Set aria-live to read updates before reading out the DOM element in focus

Question

Suppose you have a aria-live region and it is read out every time some change is made. But every time the change is made, the focus moves to a particular form element First Name .

If the text being updated in aria-live region is Loading complete , the preferred reading sequence is Loading complete First name , ie first the aria-live region and then the element being focused.

However, regardless of the politeness setting of aria-live, I can't seem to get that combination.

if aria-live = assertive or aria-live = polite , it reads First name Loading complete

if aria-live = rude , it only reads Loading complete , ignoring reading of the element being focused.

How do I make this precedence order?

I am using JavaScript to manipulate the contents.

Answer 1

I've faced a very similar problem in the past. Not sure if this is what you are looking for, but a timeout helped me. So essentially the code looks like:

// ...
// perform updates to your live region
// ...
setTimeout(function() {
    $('.autofocus').focus();
});

ARIA has been a mystery to me, and still is, so can't really explain why this would work, but it did for me anyway.