Created attachment 465560 [details] Screenshot Hello, I have a Listbox which contains a 3 <div> heading and <Ul> groups. HTML structure: <div role="listbox"> <div id="1">heading1</div> <ul role="group" aria-labelledby="1">...</ul> <div id="2">heading2</div> <ul role="group" aria-labelledby="2">...</ul> <div id="3">heading3</div> <ul role="group" aria-labelledby="3">...</ul> </div> When reading using Voiceover + Safari, it fails to read the correct group heading for group 2 and 3, and always read group1. (This reads correctly when using Chrome) When list item is in focus, it says that I'm currently on a "Text element". Similar example but using only one group: https://codepen.io/mijordan/pen/NWqBqOV
Created attachment 465562 [details] test case (not reproducing for me)
// Voiceover incorrectly reads the group heading for group 2 and 3, when "Tab" is pressed on the <li>. // There is a filter right above this listbox. Filter and the listBox are inside a Popover which is opened by a toggle button // arrow and tab are used to navigate <input aria-autocomplete="list" aria-controls="listBox" aria-label="Filter" placeholder="Filter" role="searchbox" id="filter" aria-required="false" aria-invalid="false" class="input" type="text" value=""> <div id="listBox" role="listbox" class="select" aria-live="polite" aria-atomic="true" aria-multiselectable="false"> <div class="heading" id="group1">Group 1</div> <ul role="group" class="options" aria-labelledby="group1"> <li aria-selected="false" role="option" id="group1-op1" tabindex="0"> <span class="">option 1</span></li> <li aria-selected="false" role="option" id="group1-op2" tabindex="0"> <span class="">option 2</span></li> <li aria-selected="false" role="option" id="group1-op3" tabindex="0"> <span class="">option 3</span></li> </ul> <div class="heading" id="group2">Group 2</div> <ul role="group" class="options" aria-labelledby="group2"> <li aria-selected="false" role="option" id="group2-op1" tabindex="0"> <span class="">option 1</span></li> <li aria-selected="false" role="option" id="group2-op2" tabindex="0"> <span class="">option 2</span></li> <li aria-selected="false" role="option" id="group2-op3" tabindex="0"> <span class="">option 3</span></li> </ul> <div class="heading" id="group3">Group 3</div> <ul role="group" class="options" aria-labelledby="group3"> <li aria-selected="false" role="option" id="group3-op1" tabindex="0"> <span class="">option 1</span></li> <li aria-selected="false" role="option" id="group3-op2" tabindex="0"> <span class="">option 2</span></li> <li aria-selected="false" role="option" id="group3-op3" tabindex="0"> <span class="">option 3</span></li> </ul> </div>
Created attachment 465565 [details] screenshot of the Select component
rdar://107161589