Bug 263716 - With VoiceOver in browse mode, the order of read elements is wrong when using `display: contents` on a custom web component
Summary: With VoiceOver in browse mode, the order of read elements is wrong when using...
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: Accessibility (show other bugs)
Version: Safari 17
Hardware: iPhone / iPad iOS 17
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2023-10-26 06:01 PDT by jeripeier
Modified: 2023-10-26 06:01 PDT (History)
2 users (show)

See Also:

Attachments
Add an attachment (proposed patch, testcase, etc.)

Note You need to log in before you can comment on or make changes to this bug.
Description jeripeier 2023-10-26 06:01:15 PDT 
With VoiceOver in browse mode, the order of read elements is wrong when using `display: contents` on a custom web component. It happens when elements in shadow DOM are placed before slotted elements.

Reproduction:
1. Go to https://stackblitz.com/edit/js-wkpjjm?file=index.html,index.js with Safari
2. Enable VoiceOver
3. Focus `Button 0`
4. Use arrow right (browse mode) of VoiceOver
5. Unexpectedly, you don't land on `Button 1` but staying on `Button 0`
6. If using left arrow, you land `Button 3` (Expected).

What you see is, the order of the elements is not being browsable in the order which the elements really are. In Chrome and Firefox the order is as expected. 

When removing "display: contents" from the custom web component, the order is correct.
Comment 1 Radar WebKit Bug Importer 2023-10-26 06:01:28 PDT 
<rdar://problem/117530693>