Bug 263716

Summary:	With VoiceOver in browse mode, the order of read elements is wrong when using `display: contents` on a custom web component
Product:	WebKit	Reporter:	jeripeier
Component:	Accessibility	Assignee:	Nobody <webkit-unassigned>
Status:	NEW ---
Severity:	Normal	CC:	andresg_22, webkit-bug-importer
Priority:	P2	Keywords:	InRadar
Version:	Safari 17
Hardware:	iPhone / iPad
OS:	iOS 17

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>