Proposal: CSS reading-flow

[dizhang168]

What is the issue with the HTML Standard?

The CSSWG agreed to work on the new CSS property reading-flow: (https://github.com/w3c/csswg-drafts/issues/7387, spec). Blink has been working on a prototype for how to change the sequential focus navigation order within a container that has reading-flow.

Our proposal can be found here:

• https://github.com/dizhang168/reading-order-items

Here’s a copy of the introduction:

Introduction

Focus navigation is the mechanism that allows users to navigate and access the contents of a website using their keyboard. Currently, this navigation follows the source order, aka the order the elements are defined in the DOM tree. This causes a disconnect when the elements are displayed in a different order, using a flexbox or grid layout, where the visual reading order can be different from the underlying source order using features like the order property.

The CSS Working Group agreed to solve this problem using the new CSS property reading-flow. This property allows developers to specify how items within a flex or grid container should be read. In this explainer, we are proposing changes to the WHATWG specifications to support this new property for sequential focus navigation. Namely, we propose adding a new focus scope owner and more steps to the sequential navigation search algorithm.

Note this feature will become even more valuable in the upcoming CSS Masonry, which uses an automatic layout method in which items are displayed in a harder-to-predict order.

---

I'm requesting feedback on this proposal and if agreed on, offer to do the spec work. Thanks.

[mfreed7]

@emilio @annevk @rachelandrew feedback appreciated, thanks!

[annevk]

When I look at the last comment in the linked issue I don't get the impression the CSS WG decided on something here? Is this proposal the result of what some in the CSS WG were asking for?

[rachelandrew]

We're intending to discuss the linked issue at the f2f tomorrow morning. This proposal is in support of that. The WG has previously resolved to work on reading-order-items and the existing draft spec is here.

[annevk]

I see. Agreeing to work on something is very different from "The CSS WG has proposed ..." Clarifying that would be good.

The other thing that comes to mind here is #7054. Is that still being developed?

[bkardell]

The other thing that comes to mind here is https://github.com/whatwg/html/issues/7054. Is that still being developed?

It's moved into https://open-ui.org/components/focusgroup.explainer/ @travisleithead

[dizhang168]

I see. Agreeing to work on something is very different from "The CSS WG has proposed ..." Clarifying that would be good.

Updated the above description to "CSSWG agreed to [...]", thanks for the suggestion.

[mfreed7]

We're intending to discuss the linked issue at the f2f tomorrow morning. This proposal is in support of that. The WG has previously resolved to work on reading-order-items and the existing draft spec is here.

Thanks for linking to the spec. One thing that comes to mind is that the eventual WHATWG spec PR would be simplified if the CSS spec could have a defined term for the "reading order". That would avoid needing to re-define it as @dizhang168 has done in this section. The CSS spec has all of the info already, but it isn't listed in a way that could be referenced from the HTML spec, I don't think.

[rachelandrew]

I'm very happy to edit things into the spec that we think are usefully defined there, I'm not completely clear on what would make it easier to reference from the HTML spec (that's likely my lack of knowledge though) very happy to work through this to get things into the best place.

[annevk]

To be clear, I don't think @bkardell's response addressed my question. (But perhaps that was clear and people are still thinking about it?)

[keithamus]

OpenUI has been regularly discussing focus groups and it is an active proposal being prototyped. I think they are a separate issue from this, however. Focusgroup is more about roving tab index patterns while as I understand it reading order is about adjusting the tab/AT cursor order based on layout. Both can co-exist and are distinct enough from each other that there isn't a lot of overlap.

[lukewarlow]

reading-flow (reading-order-items) is relevant to the focusgroup idea imo. It will fall into the same trap that tabbing does today if you use flex and change ordering? Unless focusgroup just does its ordering based on tabbing's (with different focusability requirements). I think that there needs to be some thought put into both as to how they interact for sure.

It is still being actively developed.

[dizhang168]

Adding this proposal to the upcoming meeting so we can discuss with implementers:

• Support for defining reading-flow concepts within HTML standard
• Support for adding Reading Flow container as a Focus scope owner and modify the existing sequential navigation search algorithm, as described in the proposal.

[dizhang168]

Summary from 2024/08/01 meeting: Adding Reading Flow container as a focus scope owner make sense. The proposal should be updated to handle the cases of display: contents and position: absolute. Afterward, we can work toward opening a spec PR for the proposal.