Bug 254379

Summary:

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

Product:

WebKit

Reporter:

brenda_kim

Component:

Accessibility

Assignee:

Nobody <webkit-unassigned>

Status:

NEW ---

Severity:

Normal

CC:

andresg_22, jcraig, webkit-bug-importer

Priority:

Keywords:

InRadar

Version:

Safari 16

Hardware:

All

OS:

macOS 13

Attachments:

Description	Flags
Screenshot	none
test case (not reproducing for me)	none
screenshot of the Select component	none

Description brenda_kim 2023-03-23 17:18:06 PDT

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

Comment 1 James Craig 2023-03-23 18:07:18 PDT

Created attachment 465562 [details]
test case (not reproducing for me)

Comment 2 brenda_kim 2023-03-23 23:30:00 PDT

// 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>

Comment 3 brenda_kim 2023-03-23 23:32:49 PDT

Created attachment 465565 [details]
screenshot of the Select component

Comment 4 Ryan Haddad 2023-03-24 14:20:20 PDT

rdar://107161589