Bug 158120 – AX: Voiceover does not follow browser focus on DOM reorder

• Component: Accessibility
• Status: NEW

[Marcy Sutton]

Created attachment 279894 [details]
HTML file with buggy reorder functionality

In Safari, Chrome and Firefox on OSX, Voiceover has problems following the browser's focus state when a list of similar items is reordered with `insertBefore`. I originally encountered it in Angular but was able to reproduce it in vanilla JavaScript (thanks to the Angular team for help. Related bug: https://github.com/angular/angular.js/issues/14677)

After exploring this problem, there appears to be a bug with Voiceover's tracking of elements and state change detection. When items (A, B) are swapped in the DOM to become (B, A), even with `A.focus()` Voiceover keeps focus on B (now in the first position).

Here is a screencast demonstrating the issue: https://www.youtube.com/watch?v=hqd4ZgQMuK0

I have attached a demo file, it can also be viewed on the Web: http://codepen.io/ExpertSystem/pen/mEbKMP

Steps to reproduce:

1. Open the attached page in Safari, Chrome or Firefox and turn on Voiceover.
2. Tab onto one of the reorder buttons.
3. Hit an arrow key to reorder up or down.
4. Observe Voiceover cursor becoming separated from the browser's (managed) focus state.


Expected behavior:

Voiceover should follow the browser's focus state when a list is reordered. Although not ideal, a temporary workaround was found by dynamically creating an offscreen button and sending focus to it before sending focus to item A. Voiceover can keep up, but the delay is problematic for users. Proof of concept: http://codepen.io/ExpertSystem/pen/bebKWR?editors=0010

[Alexey Proskuryakov]

<rdar://problem/28213531>