Bug 254379 – AX: WebKit computes wrong label for sections in this test case

• Component: Accessibility
• Status: NEW

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

[James Craig]

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

[Ryan Haddad]

rdar://107161589