- From: Mason Freed via GitHub <sysbot+gh@w3.org>
- Date: Wed, 15 May 2024 17:05:14 +0000
- To: public-css-archive@w3.org
I agree this is an issue. We (really @dizhang168) are in the process of trying to prototype an implementation of `reading-order-items`, and this case came up. For example:
```html
<div style="display:flex; reading-order-items: flex-visual">
<div style="order:2">Flex item
<button>B</button>
<button>C</button>
</div>
<div style="display:contents" tabindex=0> Problem here
<div style="order:3">Flex item <button>D</button></div>
<div style="order:1">Flex item <button>A</button></div>
</div>
</div>
```
In this example, the sequential focus order should be A, B, C, D. There's no well defined "place" to put the `display:contents` div, since **a)** it isn't a flex item that can be ordered according to the flex visual order, and **b)** it can wrap flex items that aren't even contiguous. There's a similar (and slightly more complicated) case for `<slot>`s within a flex container like this.
I propose these `display:contents` elements within a `reading-order-items` container should simply be declared non-focusable entirely. Unless there's a compelling use case for doing that?
The case for `<slot>` gets more complicated, since a `<slot>` forms a [focus navigation scope](https://html.spec.whatwg.org/#focus-navigation-scope-owner) which must be traversed in its entirety before returning to the owning scope. We think we have a solution for that, maybe, but that's likely a good candidate for another issue. But it'd be simplified, here, by saying `<slot>` (which is `display:contents` by default) cannot itself be focusable within a `reading-order-items` container.
--
GitHub Notification of comment by mfreed7
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/9230#issuecomment-2113045411 using your GitHub account
--
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Wednesday, 15 May 2024 17:05:15 UTC