<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 with Safari Bug: aria-activedescendant not respected when container has absolute position and child has flex display."
href="https://bugs.webkit.org/show_bug.cgi?id=151657">151657</a>
</td>
</tr>
<tr>
<th>Summary</th>
<td>AX: VoiceOver with Safari Bug: aria-activedescendant not respected when container has absolute position and child has flex display.
</td>
</tr>
<tr>
<th>Classification</th>
<td>Unclassified
</td>
</tr>
<tr>
<th>Product</th>
<td>WebKit
</td>
</tr>
<tr>
<th>Version</th>
<td>Safari 9
</td>
</tr>
<tr>
<th>Hardware</th>
<td>iOS
</td>
</tr>
<tr>
<th>URL</th>
<td>https://jsbin.com/vafubucuyo/edit?output
</td>
</tr>
<tr>
<th>OS</th>
<td>iOS 9.0
</td>
</tr>
<tr>
<th>Status</th>
<td>NEW
</td>
</tr>
<tr>
<th>Severity</th>
<td>Major
</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>wilson.louie@oracle.com
</td>
</tr>
<tr>
<th>CC</th>
<td>webkit-bug-importer@group.apple.com
</td>
</tr></table>
<p>
<div>
<pre>Hi,
I'm writing to report an accessibility related bug that is reproducible in both iOS 8 and iOS 9 using VoiceOver with Safari: aria-activedescendant is not respected when a container element has absolute position and the child element has flex display property. The examples in this link demonstrate this bug: <a href="https://jsbin.com/vafubucuyo/edit?output">https://jsbin.com/vafubucuyo/edit?output</a>
The link brings up a page with 6 cases, each with a button and an unordered list. The 6 cases differ only by the CSS applied to each. Clicking a button induces browser focus on the list below the button via javascript. Each list uses aria-activedescendant so that when browser focus is on the list, "logical focus" is on the first list item. That is, if you turn on VoiceOver, move cursor to 'Action' button, double tap, then the cursor should move to 'Eat' item. This works as expected in every case except the last one, where the VoiceOver cursor remains on the 'Action' button rather than moving to the first item. This last case differs from the other cases only in that the list is absolutely positioned and the list items have flex display properties.
Some important things to note:
- This will be encountered often in the wild. "position: absolute with aria-activedescendant" is a very likely combination for UI widgets such as popup menu, and flex display is also becoming popular with wide browser support. Therefore, a common setup for a popup menu would be the container having position: absolute with aria-activedescendant, and the items having flex display.
- This platform bug makes that common setup completely inaccesible. The VoiceOver cursor doesn't move to the Menu when it is launched, so VoiceOver users can't use it.
- Many page authors will be unsuccessful in identifying a workaround (causing the page to remain inaccessible for VoiceOver users), as it takes quite a lot of debugging effort to narrow down what is triggering this platform issue, and the answer is completely non-obvious.
- This is not an issue with other screen readers on touch devices, e.g. Android Talkback.
If possible, I would also like to request a bug number with URL so we can track it.
Thank you very much for your time and attention, and please feel free to contact me or Jim (CCed) if you have any additional questions or comments regarding this bug.
Sincerely,
Wilson</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>