Re: [csswg-drafts] [css-display-4] Define how reading-flow interacts with focusable display: contents elements. (#9230)

Hi @kizu! So, if I understand correctly, you are saying the behavior with feature DisplayContentsFocusable on in Chrome is what you expect.

If we look at the problem Mason shared:
```
<div style="display:flex; reading-order-items: flex-visual">
  <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>
```
Are you saying the order should be `display: contents` -> `A` -> `D`?
Or should we be splitting it further into smaller focusable areas?

> Yes, if there is a tabindex present on an element with display: contents, all its “areas” should inherit it, but the other focusable elements inside should not (as it works now with the regular nested interactive elements: the parent with tabindex is separate, the children are kept in the normal tabindex order). If there is not tabindex, then the tabbing order should follow the reading order (so, could also be controlled by reading-flow).

Could you give an example for this? Given a display contents DIV, you propose splitting it into multiple focusable areas and let them all have the same tabindex. Does it mean this DIV will get focused multiple times instead of just once during keyboard navigation? I feel like that might not be intuitive to the web users.

Also, would love your input on how this proposal would work with the changes I am proposing at https://github.com/whatwg/html/issues/10407. Thanks!

Side note, I have written and landed some tentative WPT tests for reading-flow [here](https://wpt.fyi/results/shadow-dom/focus-navigation/reading-flow/tentative?label=master&label=experimental&aligned). Maybe this can help visualize different cases.

-- 
GitHub Notification of comment by dizhang168
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/9230#issuecomment-2195867720 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Friday, 28 June 2024 00:20:26 UTC