<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: Programmatic DOM changes are not noticed by VoiceOver"
href="https://bugs.webkit.org/show_bug.cgi?id=166714">166714</a>
</td>
</tr>
<tr>
<th>Summary</th>
<td>AX: Programmatic DOM changes are not noticed by VoiceOver
</td>
</tr>
<tr>
<th>Classification</th>
<td>Unclassified
</td>
</tr>
<tr>
<th>Product</th>
<td>WebKit
</td>
</tr>
<tr>
<th>Version</th>
<td>Safari 10
</td>
</tr>
<tr>
<th>Hardware</th>
<td>iPhone / iPad
</td>
</tr>
<tr>
<th>OS</th>
<td>iOS 10
</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>jonathan@tumult.com
</td>
</tr>
<tr>
<th>CC</th>
<td>webkit-bug-importer@group.apple.com
</td>
</tr></table>
<p>
<div>
<pre>If the DOM is programmatically changed, these changes are not picked up by VoiceOver.
Example Code:
=====================
<div id = "item1">item 1 (not hidden)</div>
<div id = "item2" aria-hidden="true">item 2 (hidden via HTML)</div>
<div id = "item3">item 3 (hidden via JS after 2s)</div>
<div id = "item4">item 4 (not hidden)</div>
<script>
function changeHidden() {
document.getElementById("item3").setAttribute("aria-hidden", "true");
}
window.setTimeout(changeHidden, 4000);
</script>
=====================
After 4 seconds, item3 should no longer be navigable via swiping left/right in voice over because it is set to aria-hidden=true. However it still is. Some actions like double-tapping will get it to be properly hidden from navigation.
Likewise, simply changing innerHTML may have the same result:
=====================
<div id = "item1">item 1 (not hidden)</div>
<div id = "output"></div>
<script>
function changeOutput() {
output.innerHTML = "changed";
}
window.setTimeout(changeOutput, 2000);
</script>
=====================
VO does not see the output div.
This affects dynamic sites, like those generated by Tumult Hype.
I am reproducing on iPad Pro with iOS 10.2.1 via:
1. Enabling VoiceOver
2. Swiping to the right</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>