AX: Element with display:none's aria-flowto is not considered

• Component: Accessibility
• Status: NEW ---

[Jonathan Deutsch]

If there is an aria-flowto chain and one of the elements is set to display:none, it will ignore the subsequent pointers and go by DOM ordering.

Consider the following HTML:

<div id="item1" role="img", aria-flowto="item2">  Item 1 (role=img, flowto=item2)</div>
<div id="item2" role="button" aria-flowto="item5">  Item 2 (role=button, flowto=item5)</div>
<div id="item3" role="img" aria-flowto="item6">  Item 3 (role=img, flowto=item6)</div>
<div id="item4" role="img" aria-flowto="item3">  Item 4 (role=img, flowto=item3)</div>
<div id="item5" role="img"   aria-flowto="item4" style="display:none">  Item 5 (role=img, flowto=item4, display:none)</div>
<div id="item6" role="radio">  Item 6 (role=radio)</div>

The flowto order would be:

1, 2, 5, 4, 3, 6

However, because item5 has display:none, the actual ordering is:

1, 2, 3, 6

This ordering misses 4, which clearly was meant to be visited.  I would have expected aria-flowto to be considered, and simply jump ahead to the next element so it would look like:

1, 2, 4, 3, 6

This means developers need to be very careful when setting display:none, and tools like Tumult Hype need to take extra care in managing flowto chains.

Interestingly this is different than if aria-hidden=true were on the element (see https://bugs.webkit.org/show_bug.cgi?id=166703)

I am reproducing on iPad Pro with iOS 10.2.1 via:
1. Enabling VoiceOver
2. Swiping to the right

[Radar WebKit Bug Importer]

<rdar://problem/29875302>