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 | ||
jeripeier
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.
| Attachments | ||
|---|---|---|
| Add attachment proposed patch, testcase, etc. |
Radar WebKit Bug Importer
<rdar://problem/117530693>