<html>
<head>
<base href="https://bugs.webkit.org/" />
</head>
<body><table border="1" cellspacing="0" cellpadding="8">
<tr>
<th>Bug ID</th>
<td><a class="bz_bug_link
bz_status_NEW "
title="NEW - AX: Voiceover does not follow browser focus on DOM reorder"
href="https://bugs.webkit.org/show_bug.cgi?id=158120">158120</a>
</td>
</tr>
<tr>
<th>Summary</th>
<td>AX: Voiceover does not follow browser focus on DOM reorder
</td>
</tr>
<tr>
<th>Classification</th>
<td>Unclassified
</td>
</tr>
<tr>
<th>Product</th>
<td>WebKit
</td>
</tr>
<tr>
<th>Version</th>
<td>WebKit Nightly Build
</td>
</tr>
<tr>
<th>Hardware</th>
<td>Macintosh
</td>
</tr>
<tr>
<th>OS</th>
<td>All
</td>
</tr>
<tr>
<th>Status</th>
<td>NEW
</td>
</tr>
<tr>
<th>Severity</th>
<td>Normal
</td>
</tr>
<tr>
<th>Priority</th>
<td>P2
</td>
</tr>
<tr>
<th>Component</th>
<td>Accessibility
</td>
</tr>
<tr>
<th>Assignee</th>
<td>webkit-unassigned@lists.webkit.org
</td>
</tr>
<tr>
<th>Reporter</th>
<td>holla@marcysutton.com
</td>
</tr>
<tr>
<th>CC</th>
<td>webkit-bug-importer@group.apple.com
</td>
</tr></table>
<p>
<div>
<pre>Created <span class=""><a href="attachment.cgi?id=279894" name="attach_279894" title="HTML file with buggy reorder functionality">attachment 279894</a> <a href="attachment.cgi?id=279894&action=edit" title="HTML file with buggy reorder functionality">[details]</a></span>
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: <a href="https://github.com/angular/angular.js/issues/14677">https://github.com/angular/angular.js/issues/14677</a>)
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: <a href="https://www.youtube.com/watch?v=hqd4ZgQMuK0">https://www.youtube.com/watch?v=hqd4ZgQMuK0</a>
I have attached a demo file, it can also be viewed on the Web: <a href="http://codepen.io/ExpertSystem/pen/mEbKMP">http://codepen.io/ExpertSystem/pen/mEbKMP</a>
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: <a href="http://codepen.io/ExpertSystem/pen/bebKWR?editors=0010">http://codepen.io/ExpertSystem/pen/bebKWR?editors=0010</a></pre>
</div>
</p>
<hr>
<span>You are receiving this mail because:</span>
<ul>
<li>You are the assignee for the bug.</li>
</ul>
</body>
</html>