- From: Di Zhang via GitHub <sysbot+gh@w3.org>
- Date: Fri, 31 May 2024 21:09:33 +0000
- To: public-css-archive@w3.org
On this topic, here are a few more tricky cases where having display: contents on a flex item causes unclear reading order.
### What should be the reading order if reading order items are defined inside a slot (has display: contents) and cross navigation scopes?
```HTML
<!DOCTYPE html>
<meta charset="utf-8">
<div>
<template shadowrootmode="open" shadowrootdelegatesfocus>
<style>
.wrapper {
display: flex;
reading-order-items: flex-visual;
}
</style>
<div class=wrapper>
<button id="A" style="order: 2">Item A</button>
<slot></slot>
<button id="C" style="order: 4">Item C</button>
</div>
</template>
<button id="B1" style="order: 1">Slotted B1</button>
<button id="B2" style="order: 3">Slotted B2</button>
</div>
```
Which will render to:
Source order: A,B1,B2,C
Visual order: B1,A,B2,C
Given the [flattened tabindex-ordered focus navigation ](https://html.spec.whatwg.org/multipage/interaction.html#flattened-tabindex-ordered-focus-navigation-scope)scope, step 2.2, we should visit all elements within a scope together (so B1,B2 together). However, that is visually the wrong order.
### What should be the reading order if reading order items are defined inside a display: contents shadow root and cross navigation scopes?
```HTML
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.wrapper {
display: flex;
reading-order-items: flex-visual;
}
</style>
<div class=wrapper>
<div style="display: contents" id="root">
<template shadowrootmode=open>
<slot></slot>
</template>
<button id="A2" style="order: 2">A</button>
<button id="B2" style="order: 1">B</button>
</div>
<button id="C" style="order: 3">C</button>
</div>
```
Which will render to
Source order: A,B,C
Visual order: B,A,C
Here, we have a DIV that is:
* Shadow root (so a focus navigation scope owner)
* Its layout parent is a reading order container
* Has display: contents
A reading order item is defined using layout information. And in this case, this DIV is invisible to the layout object. Should the DIV qualify as a reading order item? My thinking is yes or else we wouldn't be able to visit its content.
--
GitHub Notification of comment by dizhang168
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/9230#issuecomment-2142981113 using your GitHub account
--
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Friday, 31 May 2024 21:09:34 UTC