Add support for CSS reading-flow #10613

dizhang168 · 2024-09-10T20:05:09Z

The CSSWG resolved to add the new CSS property reading-flow: (w3c/csswg-drafts#7387, spec). Chrome has been working on a prototype for how to change the sequential focus navigation order within a container that has reading-flow.
This PR specs the new CSS property reading-flow per proposal described at #10407.

At least two implementers are interested (and none opposed):
- Chrome
- Gecko: CSS reading-flow mozilla/standards-positions#1056
- WebKit: CSS reading-flow WebKit/standards-positions#378
Tests are written and can be reviewed and commented upon at:
- wpt/focus-navigation/reading-flow/tentative
Implementation bugs are filed:
- Chromium: https://issues.chromium.org/issues/40932006
- Gecko: TBA
- WebKit: TBA
MDN issue is filed: …
The top of this comment includes a clear commit message to use.

(See WHATWG Working Mode: Changes for more details.)

/index.html ( diff )
/infrastructure.html ( diff )
/interaction.html ( diff )

source

domfarolino · 2024-09-17T21:12:03Z

By the way, in the OP you have "At least two implementers are interested (and none opposed):" checked, but neither of the two linked standards positions have been resolved yet, so I'd uncheck that unless you you have other cross-browser support to point to.

dizhang168 · 2024-09-18T20:37:55Z

Thanks for the first pass!

By the way, in the OP you have "At least two implementers are interested (and none opposed):" checked, but neither of the two linked standards positions have been resolved yet, so I'd uncheck that unless you you have other cross-browser support to point to.

Thanks for the call out. There has been conversation in meetings and implementers from non-chromium browsers are interested and none opposed. But I will wait for their comments on the official position issues before checking the checkbox.

source

dizhang168 · 2024-09-26T17:39:48Z

Status update: I have addressed all the formatting comments. @domfarolino and other reviewers proposed more suggestions and changes at TPAC 2024. I will go back to working on the proposal before making more changes to this spec PR.

…g#10632)

annevk

Thank you for writing this! It looks quite clear. One thing I'm missing from the surrounding discussion we had are the examples. I thought those would be added to the specification in some fashion.

source

fantasai

The HTML spec shouldn't be written in a way that depends on specific CSS properties, because these can change--we shouldn't need to change the HTML spec to change how CSS calculates the reading order.

HTML should use a generic concept of a "rendering-defined sibling reading order" or something like that, which both specs can refer to. Then CSS can say how that order is calculated, and HTML can say how it interacts with HTML features and algorithms.

There have been multiple different proposals for how CSS calculates reading order, only some of which depend on values of reading-flow. For example, we have discussed a property on the items (reading-order), a property on the container (reading-flow), a variety of different types of values for each, and the possibility of even changing behavior for effects like dense packing to perform layout-based reordering by default (no specific property). All of this is out of scope for the HTML spec, and shouldn't be locked down into it as if it were the defining spec for these features.

dizhang168 · 2024-11-12T22:09:11Z

Thanks for the feedback. I will update this spec to remove any specific CSS properties and instead refer to CSS Display 4 for rendering-defined sibling reading order and reading flow container.

Next, I will refactor this PR accordingly to have only the reading flow order in the context of a focus navigation scope and illustrate the steps with a detailed example.

dizhang168 · 2024-11-13T23:25:19Z

I have updated the PR with a thorough example for the reading flow order algorithm without referring directly to any 'reading-flow' property. Would appreciate your review, thanks.
@domfarolino @annevk @emilio

Note: I am working with @rachelandrew to update the definitions in css-display-4.

domfarolino

I think this is looking good, % some comments about the example which I think could be cleared up.

Besides that, I was thinking more about how a "reading-flow-ordered focus navigation scope" is-a "tabindex-ordered focus navigation scope" but without the tabindex-ordering that it calls for. I tried to clarify this in a small commit that mentioned "by default" the odering of a "tabindex-ordered focus navigation scope" is tabindex-based, unless the ordering criteria is overridden, as it is with the reading-flow variant. But I almost wonder if we should go a step further and literally rename both:

"tabindex-ordered focus navigation scope" -> "ordered focus navigation scope"
"flattened tabindex-ordered focus navigation scope" -> "flattened ordered navigation scope"

... and continue to do what I did in 512e4fb, by making the "default" ordering of these tabindex-based, but allowing for the ordering to be overridden as we do in the reading flow variant.

@annevk what do you think about this naming question?

domfarolino · 2024-11-27T21:25:27Z

source

+
+  </div>
+
+  </div>


Is this extra?

domfarolino · 2024-11-27T21:36:11Z

source

+    <p><img src="/images/reading-flow-order-example.svg" width="500" height="350" alt=""
+    class="darkmode-aware"></p>
+
+    <p>For a reading-flow-ordered focus navigation scope where wrapper is the focus scope owner:</p>


A few things for below:

Please link to every definition you can. Things like "reading-flow ordered focus navigation scope", "rendering-defined sibling reading flow", and more, just like you were writing a non-example algorithm.

Use <var> when referring to all variables, just like you would in a non-example algorithm.

When referring to nodes in the DOM outside of the actual example HTML code, use <code data-x="">wrapper</code>, like we do in https://html.spec.whatwg.org/#script-processing-model:html-element-post-connection-steps-5 etc.

Use the (unfortunate) « » syntax for beginning/end list brackets, instead of [ ].

Some of the "algorithms" below don't appear to be real algorithms. I'd write them a bit more descriptively. For example, instead of saying Let <var>output</var> be « »., which is obvious since that's the first line of the #reading-flow-order algorithm anyways, I would start with a paragraph telling you first what the reading flow order of wrapper is, and then describe (in list form maybe—I'm not saying anything is wrong with that) exactly how you get it. What you have is pretty close!

domfarolino · 2024-11-27T22:29:25Z

source

+
+   <li>
+    <p><span data-x="list iterate">For each</span> <var>child</var> of <var>owner</var> element's
+    children:</p>


Link to the DOM definition of an element's children here.

domfarolino · 2024-11-27T22:30:36Z

source

+         <var>output</var>.</p></li>
+
+         <li><p><span>Break</span>.</p></li>
+        </ol>


I'd add a note below this </ol> mentioning what exactly this condition is trying to accomplish, because it's not clear just from reading it why it does what it does.

domfarolino · 2024-11-27T22:31:36Z

source

+   <li><p>Let <var>container</var> be the <span>reading flow container</span> associated with
+   <var>owner</var>.</p></li>
+
+   <li><p>Let <var>items</var> be the <span>rendering-defined sibling reading flow</span> of


So this can include descendants of <var>container</var> that are not direct DOM children of container, right? I guess that's the only reason we have to have a while loop that goes upward arbitrarily?

annevk

I would like to discuss this one more time briefly during the CSS + WHATWG call. In particular to better understand the stability of this feature on the CSS side.

annevk · 2024-11-28T15:39:58Z

source

-  <p>The order within a <span>tabindex-ordered focus navigation scope</span> is determined by each
-  element's <span>tabindex value</span>, as described in the section below.</p>
+  <p>By default, the order within a <span>tabindex-ordered focus navigation scope</span> is
+  determined by each of its element's <span>tabindex value</span>. This ordering criteria is


Suggested change

determined by each of its element's tabindex value. This ordering criteria is

determined by each element's tabindex value. This ordering criteria is

Or you would have to pluralize element.

annevk · 2024-11-28T15:42:53Z

source

+  <p>A <dfn>reading-flow-ordered scope owner</dfn> is either: <ref>CSSDISPLAY</ref></p>
+
+  <ul>
+   <li><p>a <span>reading flow container</span>.</p></li>


Suggested change

<li>a reading flow container.</li>

<li>a reading flow container, or</li>

(otherwise the lowercase starting letters don't make sense)

annevk · 2024-11-28T15:43:33Z

source

+  <p>A <dfn>reading flow item</dfn> is an element whose <span>parent element</span> is a
+  <span>reading-flow-ordered scope owner</span>.</p>
+
+  <p>The <dfn>reading flow order</dfn> of a <span>reading-flow-ordered focus navigation scope</span> <var>scope</var> is the ordered list of elements constructed as follows:</p>


This looks like it needs some wrapping (100 columns max and on spaces only).

annevk · 2024-11-28T15:44:02Z

source

+  <p>The <dfn>reading flow order</dfn> of a <span>reading-flow-ordered focus navigation scope</span> <var>scope</var> is the ordered list of elements constructed as follows:</p>
+
+  <ol>
+   <li><p>Let <var>output</var> be an empty <span>list</span>.</p></li>


Suggested change

<li>Let <var>output</var> be an empty list.</li>

<li>Let <var>output</var> be « ».</li>

annevk · 2024-11-28T15:44:42Z

source

+   </li>
+
+   <li><p>Return <var>output</var>.</p></li>
+


This newline can be removed.

annevk · 2024-11-28T15:44:49Z

source

+  </ol>
+
+  <div class="example">
+


This newline can be removed.

annevk · 2024-11-28T15:45:08Z

source

+
+    <p>Combining everything together, the flattened tabindex-ordered focus navigation scope is:
+    [Wrapper, A, B, DC, F, C, E, D, H, PA, G].</p>
+


This newline can be removed.

annevk · 2024-11-28T15:45:43Z

source

+  </div>
+
  <div w-nodev>


These two can coalesce?

annevk · 2024-11-28T15:49:31Z

@domfarolino I would like at blame to see who introduced the naming and ask advice from them. I don't have a good intuition as to what's best here.

t-hamano mentioned this pull request Sep 11, 2024

Media & Text block: Incorrect focus order in mobile viewport when "Show media on right" is enabled WordPress/gutenberg#58881

Open

past mentioned this pull request Sep 12, 2024

TPAC 2024 meeting whatwg/meta#326

Closed

domfarolino reviewed Sep 17, 2024

View reviewed changes

source Outdated Show resolved Hide resolved

source Outdated Show resolved Hide resolved

source Outdated Show resolved Hide resolved

source Outdated Show resolved Hide resolved

source Outdated Show resolved Hide resolved

domfarolino reviewed Sep 21, 2024

View reviewed changes

css-meeting-bot mentioned this pull request Sep 23, 2024

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

Open

This was referenced Sep 24, 2024

tabindex vs reading-flow property #10642

Open

'reading-flow' and "display: contents" #10643

Closed

Discussing how to focus navigate display: contents elements that are focusable in CSS reading-flow #10533

Open

dizhang168 and others added 8 commits October 28, 2024 15:33

Add support for reading-flow

9708fb7

Definitions and nits

45fa391

Review changes

35dd322

Address format review changes

dc70a78

Editorial: clean up small parts of sequential focus navigation (whatw…

31b2e80

…g#10632)

Add support for reading-flow

a5656ba

Address format review changes

33c0f64

Update definitions to make reading flow item a scope owner

93ec208

dizhang168 force-pushed the reading-flow branch from 8a1ee6d to 93ec208 Compare October 28, 2024 22:35

Fix previous bad merge fixes

9aeb6c2

annevk reviewed Nov 8, 2024

View reviewed changes

source Show resolved Hide resolved

source Show resolved Hide resolved

source Show resolved Hide resolved

source Show resolved Hide resolved

source Show resolved Hide resolved

source Outdated Show resolved Hide resolved

source Outdated Show resolved Hide resolved

annevk added the topic: focus label Nov 8, 2024

annevk mentioned this pull request Nov 8, 2024

Discussing how to focus navigate absolute position elements that are focusable in CSS reading-flow #10539

Closed

fantasai suggested changes Nov 12, 2024

View reviewed changes

PR format review changes

5b543f6

Define reading flow order algorithm, add example and other improvements

9fa15ee

Update CSS Display links + fix ol error

391d1bc

past mentioned this pull request Nov 21, 2024

Upcoming WHATNOT meeting on 2024-11-21 #10765

Closed

domfarolino added 2 commits November 27, 2024 15:55

Small nits

adc4888

Small clarifications

512e4fb

domfarolino reviewed Nov 27, 2024

View reviewed changes

annevk mentioned this pull request Nov 28, 2024

Upcoming WHATNOT meeting on 2024-11-28 #10789

Closed

annevk reviewed Nov 28, 2024

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add support for CSS reading-flow #10613

Add support for CSS reading-flow #10613

dizhang168 commented Sep 10, 2024 •

edited by pr-preview bot

Loading

domfarolino commented Sep 17, 2024

dizhang168 commented Sep 18, 2024

dizhang168 commented Sep 26, 2024

annevk left a comment

fantasai left a comment •

edited

Loading

dizhang168 commented Nov 12, 2024 •

edited

Loading

dizhang168 commented Nov 13, 2024

domfarolino left a comment

domfarolino Nov 27, 2024

domfarolino Nov 27, 2024

domfarolino Nov 27, 2024

domfarolino Nov 27, 2024

domfarolino Nov 27, 2024

annevk left a comment

annevk Nov 28, 2024

annevk Nov 28, 2024

annevk Nov 28, 2024

annevk Nov 28, 2024

annevk Nov 28, 2024

annevk Nov 28, 2024

annevk Nov 28, 2024

annevk Nov 28, 2024

annevk commented Nov 28, 2024

	determined by each of its element's <span>tabindex value</span>. This ordering criteria is
	determined by each element's <span>tabindex value</span>. This ordering criteria is

	<li><p>a <span>reading flow container</span>.</p></li>
	<li><p>a <span>reading flow container</span>, or</p></li>

	<li><p>Let <var>output</var> be an empty <span>list</span>.</p></li>
	<li><p>Let <var>output</var> be « ».</p></li>


		<p>Combining everything together, the flattened tabindex-ordered focus navigation scope is:
		[Wrapper, A, B, DC, F, C, E, D, H, PA, G].</p>

Add support for CSS reading-flow #10613

Are you sure you want to change the base?

Add support for CSS reading-flow #10613

Conversation

dizhang168 commented Sep 10, 2024 • edited by pr-preview bot Loading

domfarolino commented Sep 17, 2024

dizhang168 commented Sep 18, 2024

dizhang168 commented Sep 26, 2024

annevk left a comment

Choose a reason for hiding this comment

fantasai left a comment • edited Loading

Choose a reason for hiding this comment

dizhang168 commented Nov 12, 2024 • edited Loading

dizhang168 commented Nov 13, 2024

domfarolino left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

annevk left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

annevk commented Nov 28, 2024

dizhang168 commented Sep 10, 2024 •

edited by pr-preview bot

Loading

fantasai left a comment •

edited

Loading

dizhang168 commented Nov 12, 2024 •

edited

Loading