Open Radar

 
Summary:
document.activeElement is not set correctly when advancing focus with VoiceOver. 

Steps to Reproduce:
Go to this webpage with iOs+VoiceOver: https://jsfiddle.net/7rbkt37q/
Swipe into the button named "Forward"
Activate the button. 
Focus advances correctly to the button named "Back"
Activate the button

Expected Results:
Focus should return to the forward button. It does so when VoiceOver is not active and it does so on Safari desktop. 

Actual Results:
Focus jumps to a different container

Version/Build:


Configuration:




Here is the source HTML of the example: 
<button id="button1">Button1</button>
<button id="forwardButton" onclick="showBackButton();">Forward</button>

Here is the source Javascript: 
window.showBackButton = function showBackButton() {
    var originalFocusedElement = document.activeElement;
    var forwardButton = document.getElementById('forwardButton');
    var parent = forwardButton.parentElement;
    
    var backButton = document.createElement('button');
    backButton.innerText = 'Back';
    backButton.onclick = function() {
        parent.removeChild(backButton);
        originalFocusedElement.focus();
    };
    
    parent.appendChild(backButton);
    backButton.focus();
}

See :
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Clicking_and_focus
https://sarbbottam.github.io/blog/2015/08/21/multiple-submit-buttons-and-javascript#javascript-and-form-submit
http://stackoverflow.com/questions/41035743/safari-doesnt-correctly-change-active-element-on-focus