158120 2016-05-26 10:29:11 -0700 AX: Voiceover does not follow browser focus on DOM reorder 2016-09-08 13:57:19 -0700 1 1 1 Unclassified WebKit Accessibility WebKit Nightly Build Mac All NEW InRadar P2 Normal --- 1 holla webkit-unassigned webkit-bug-importer oldest_to_newest 1196770 0 279894 holla 2016-05-26 10:29:11 -0700 Created attachment 279894 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 1227768 1 ap 2016-09-08 13:57:19 -0700 <rdar://problem/28213531> 279894 2016-05-26 10:29:11 -0700 2016-05-26 10:29:11 -0700 HTML file with buggy reorder functionality voiceover-reorder.html text/html 2718 holla PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KPGhlYWQ+Cgk8dGl0bGU+Vm9pY2VvdmVy IFJlb3JkZXJpbmcgYnVnIGRlbW88L3RpdGxlPgoJPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KCQlo dG1sLCBib2R5IHsKCQkgIGZvbnQtZmFtaWx5OiBzYW5zLXNlcmlmOwoJCX0KCQl1bCB7CgkJICBw YWRkaW5nOiAwOwoJCX0KCQlsaSB7CgkJICBib3JkZXItYm90dG9tOiAxcHggc29saWQgI2NjYzsK CQkgIHBhZGRpbmc6IDAgMTZweDsKCQkgIAoJCX0KCQlsaS5kcmFnLW9uIHsKCQkgIGJhY2tncm91 bmQtY29sb3I6ICMzMzM7CgkJICBjb2xvcjogI2ZmZjsKCQl9CgkJICAuYWN0aW9ucy5mbGV4ciB7 CgkJICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7CgkJICAgIGRpc3BsYXk6IGZsZXg7CgkJICB9CgkJ ICAKCQkgIGRpdi5hY3Rpb24tYnV0dG9ucyB7CgkJICAgIG1hcmdpbi1sZWZ0OiBhdXRvOwoJCSAg fQoJCSAgYnV0dG9uIHsKCQkgICAgYmFja2dyb3VuZC1jb2xvcjogdHJhbnNwYXJlbnQ7CgkJICAg IGJvcmRlcjogMXB4IHNvbGlkICNjY2M7CgkJICAgIGNvbG9yOiBjdXJyZW50Q29sb3I7CgkJICAg IGJvcmRlci1yYWRpdXM6IDE1JTsKCQkJZm9udC13ZWlnaHQ6IGJvbGQ7CgkJICAgIGhlaWdodDog MzJweDsKCQkgICAgd2lkdGg6IDMycHg7CgkJICB9CgkJYnV0dG9uLnJlb3JkZXItaXRlbTpiZWZv cmUgewoJCSAgY29udGVudDogJ+KGkyc7CgkJfQoJCWJ1dHRvbi5yZW9yZGVyLWl0ZW06YWZ0ZXIg ewoJCSAgY29udGVudDogJ+KGkSc7CgkJfQoJPC9zdHlsZT4KCTxtZXRhIGNoYXJzZXQ9IlVURi04 Ij4KPC9oZWFkPgo8Ym9keT4KPGRpdiBpZD0icmVvcmRlci1wcm90b3R5cGUiPgogIDxoMT5BY2Nl c3NpYmxlIGRyYWcgJmFtcDsgZHJvcCBwcm90b3R5cGU8L2gxPgogIDxwPlRhYiBvbnRvIGEgcmVv cmRlciBidXR0b24gYW5kIHN0YXJ0IGVkaXRpbmcgd2l0aCB0aGUgYXJyb3cga2V5cy48L3A+CiAg PHVsIGNsYXNzPSJkcmFnIj4KICAgIDxsaT4KICAgICAgPGRpdiBjbGFzcz0iYWN0aW9ucyBmbGV4 ciI+CiAgICAgICAgPGgyIGlkPSJlYWdsZS1yYXJlIj5FYWdsZSBSYXJlPC9oMj4KICAgICAgICA8 ZGl2IGNsYXNzPSJhY3Rpb24tYnV0dG9ucyI+CiAgICAgICAgICA8YnV0dG9uIGNsYXNzPSJkcmFn b24gcmVvcmRlci1pdGVtIiBpZD0icmVvcmRlci1pdGVtMCIgYXJpYS1sYWJlbD0iUmVvcmRlciBF YWdsZSBSYXJlIj48L2J1dHRvbj4KICAgICAgICA8L2Rpdj4KICAgICAgPC9kaXY+CiAgICA8L2xp PgogICAgPGxpPgogICAgICA8ZGl2IGNsYXNzPSJhY3Rpb25zIGZsZXhyIj4KICAgICAgICA8aDIg aWQ9ImJsYW50b25zIj5CbGFudG9uJ3M8L2gyPgogICAgICAgIDxkaXYgY2xhc3M9ImFjdGlvbi1i dXR0b25zIj4KICAgICAgICAgIDxidXR0b24gY2xhc3M9ImRyYWdvbiByZW9yZGVyLWl0ZW0iIGlk PSJyZW9yZGVyLWl0ZW0xIiBhcmlhLWxhYmVsPSJSZW9yZGVyIEJsYW50b24ncyI+PC9idXR0b24+ CiAgICAgICAgPC9kaXY+CiAgICAgIDwvZGl2PgogICAgPC9saT4KICAgIDxsaT4KICAgICAgPGRp diBjbGFzcz0iYWN0aW9ucyBmbGV4ciI+CiAgICAgICAgPGgyIGlkPSJqZWZmZXJzb25zIj5KZWZm ZXJzb24nczwvaDI+CiAgICAgICAgPGRpdiBjbGFzcz0iYWN0aW9uLWJ1dHRvbnMiPgogICAgICAg ICAgPGJ1dHRvbiBjbGFzcz0iZHJhZ29uIHJlb3JkZXItaXRlbSIgaWQ9InJlb3JkZXItaXRlbTIi IGFyaWEtbGFiZWw9IlJlb3JkZXIgSmVmZmVyc29uJ3MiPjwvYnV0dG9uPgogICAgICAgIDwvZGl2 PgogICAgICA8L2Rpdj4KICAgIDwvbGk+CiAgPC91bD4KPC9kaXY+CjxzY3JpcHQ+Cid1c2Ugc3Ry aWN0JzsKCnZhciBsaXMgPSBkb2N1bWVudC5xdWVyeVNlbGVjdG9yQWxsKCdsaScpOwpBcnJheS5w cm90b3R5cGUuZm9yRWFjaC5jYWxsKGxpcywgZnVuY3Rpb24gKGxpKSB7CiAgdmFyIGJ1dHRvbiA9 IGxpLnF1ZXJ5U2VsZWN0b3IoJ2J1dHRvbicpOwoKICBidXR0b24uYWRkRXZlbnRMaXN0ZW5lcign a2V5ZG93bicsIGZ1bmN0aW9uIG9uS2V5ZG93bihldnQpIHsKICAgIHZhciBrZXlDb2RlID0gZXZ0 LmtleUNvZGUgfHwgZXZ0LndoaWNoOwogICAgc3dpdGNoIChrZXlDb2RlKSB7CiAgICAgIGNhc2Ug Mzc6CiAgICAgIGNhc2UgMzg6CiAgICAgIGNhc2UgMzk6CiAgICAgIGNhc2UgNDA6CiAgICAgICAg ZXZ0LnByZXZlbnREZWZhdWx0KCk7CiAgICAgICAgYXJyb3dIYW5kbGVyKGtleUNvZGUsIGxpLCBi dXR0b24pOwogICAgICAgIGJyZWFrOwogICAgfQogIH0pOwp9KTsKCmZ1bmN0aW9uIGFycm93SGFu ZGxlcihrZXksIGxpLCBidXR0b24pIHsKICB2YXIgdWwgPSBsaS5wYXJlbnROb2RlOwogIHZhciBs aXMgPSBBcnJheS5wcm90b3R5cGUuc2xpY2UuY2FsbCh1bC5xdWVyeVNlbGVjdG9yQWxsKCdsaScp KTsKICB2YXIgbGVuID0gbGlzLmxlbmd0aDsKICB2YXIgaWR4ID0gbGlzLmluZGV4T2YobGkpOwog IHZhciBpc1VwID0ga2V5ID09PSAzNyB8fCBrZXkgPT09IDM4OwoKICBpZiAoaXNVcCAmJiBpZHgg PiAwKSB7CiAgICB1bC5pbnNlcnRCZWZvcmUobGksIGxpc1tpZHggLSAxXSk7CiAgfSBlbHNlIGlm ICghaXNVcCAmJiBpZHggPCBsZW4gLSAxKSB7CiAgICB1bC5pbnNlcnRCZWZvcmUobGlzW2lkeCAr IDFdLCBsaSk7CiAgfQogIAogIHNldFRpbWVvdXQoZnVuY3Rpb24oKSB7CiAgICBidXR0b24uZm9j dXMoKTsKICB9KTsKfQo8L3NjcmlwdD4KPC9ib2R5Pgo8L2h0bWw+