Bug 173914 – AX: VoiceOver reads absolutely positioned elements on visual order when these elements are inside a <section> or a <div> with aria-label or aria-labelledby

• Status: NEW
• Component: Accessibility

[Károly Szántai]

Steps to Reproduce:
(1) Create this CSS rule:

.vishidden {
  position: absolute;
  left: -10000em;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  white-space: nowrap;
}

(2) Create this HTML code:

<section aria-labelledby="sectionh2">
  <h2 id="sectionh2">Example 1: section with aria-labelledby</h2>
  <p>first <span class="vishidden">second</span> <span>third</span> <span class="vishidden">fourth</span></p>
</section>

or this:

<section aria-label="Example 2: section with aria-label">
    <h2>Example 2: section with aria-label</h2>
    <p>first <span class="vishidden">second</span> <span>third</span> <span class="vishidden">fourth</span></p>
</section>

Expected Results:
Expected reading order: "first, second, third, fourth"

Observed Results:
VoiceOver says: "second, fourth, first, third"

Version:
macOS 10.12.5
Safari 10.1.1

Notes:
Sample code: https://www.akadalymentesweb.hu/demok/voiceover-read-order-bug

[Radar WebKit Bug Importer]

<rdar://problem/33026588>