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 )
/rendering.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

domfarolino · 2024-09-20T03:14:39Z

source

+  data-x="reading-flow-item">reading flow item</span> that is not a <span
+  data-x="non-participating-reading-flow-item">non-participating reading flow item</span>.</p>
+
+  <p>A <dfn>reading-flow focus navigation scope</dfn> is the <span>tabindex-ordered focus navigation


I'm a little worried about using "tabindex-ordered focus navigation scope" here, instead of "flattened tabindex-ordered focus navigation scope". Do we know that this is the right choice?

The terms differ in two ways:

"tabindex-ordered focus navigation scope" may contain non-focusable items, which the "flattened tabindex-ordered focus navigation scope" weeds out. I know we only care specifically about the "reading flow items" inside the "reading-flow focus navigation scope", but can any of these "reading flow items" be non-focusable? If so, then I think the https://whatpr.org/html/10613/interaction.html#reading-flow-sequential-navigation-search-algorithm steps could return a non-focusable item which is broken.

The other obvious distinction between the flattened and non-flattened variants is the recursive flattening. Do we really not want the recursive flattening property for reading flow, when selecting the next reading flow items to focus?

The focus scope finds the next (or previous) element to visit and returns it. Then, we checks for two conditions:

Whether this element is focusable

Whether it has the correct tabindex value (the next element with tabindex value greater or equal).

I believe we should not use "flattened tabindex-ordered focus navigation scope" because this traversal needs to reach all elements and then do the filtering above. For example, display: contents elements are most often not focusable, yet they must be returned by the algorithm.

source

domfarolino · 2024-09-21T19:46:19Z

source

+   <li>
+    <p>If <var>candidate</var> is a <span data-x="reading-flow-item">reading flow item</span> or
+    null, <var>direction</var> is <i>forward</i>, and <var>starting point</var> is in a
+    <span>reading-flow focus navigation scope</span> <var>scope</var>, then let <var>new


This comment is related to the one above about whether "reading-flow focus navigation scope" should be an unflattened tabindex-ordered list, or a flattened one. If it should be flattened (which feels a little more right to me), then I think we can:

Use the condition "selection mechanism is sequential" instead of "starting point is in a reading-flow focus navigation scope". This is because we know starting point belongs to its document's sequential focus navigation order;

Which means we can just pass in "starting point's Document's sequential focus navigation order" to the reading flow search algorithm, as the reading flow focus navigation scope parameter.

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.

annevk · 2024-11-08T17:19:32Z

source

+  <p>A <dfn>reading flow container</dfn> is either: <ref>CSSDISPLAY</ref></p>
+
+  <ul>
+    <li><p>a <dfn data-x-href="https://drafts.csswg.org/css-flexbox-1/#flex-container">flex


Nit: single-space indentation.

annevk · 2024-11-08T17:19:56Z

source

+  <ul>
+    <li><p>a <dfn data-x-href="https://drafts.csswg.org/css-flexbox-1/#flex-container">flex
+    container</dfn> that has the <span>'reading-flow'</span> CSS property set to
+    <span>'flex-visual'</span> or <span>'flex-flow'</span>.</p></li>


Nit: if these end in a dot, we should start with an uppercase letter.

annevk · 2024-11-08T17:20:30Z

source

+  element</span> is a <span>reading flow container scope owner</span>.</p>
+
+  <p>A <dfn data-x="non-participating-reading-flow-item">non-participating reading flow item</dfn> is
+


Spurious newline.

annevk · 2024-11-08T17:20:52Z

source

+  determined by the scope owner's computed value of the <span>'reading-flow'</span> property:
+
+  <ul>
+    <li><p>For <span>'flex-visual'</span>: follows the order defined by sorting the <span


Nit: single-space indentation.

annevk · 2024-11-08T17:20:58Z

source

+  data-x="reading-flow-item">reading flow item</span> that is not a <span
+  data-x="non-participating-reading-flow-item">non-participating reading flow item</span>.</p>
+
+  The <dfn>reading flow order</dfn> for a <span>reading-flow-ordered focus navigation scope</span> is


Missing <p>

annevk · 2024-11-08T17:21:25Z

source

+    <p>If <var>starting point</var> is a <span data-x="reading-flow-item">reading flow item</span>
+    in a <span>reading-flow-ordered focus navigation scope</span> <var>scope</var>, then:</p>
+
+      <ol>


This <ol> should not be further indented than the <p> above.

annevk · 2024-11-08T17:21:47Z

source

@@ -80691,6 +80787,23 @@ dictionary <dfn dictionary>ToggleEventInit</dfn> : <span>EventInit</span> {
    focusable</span>.</p>
   </li>

+   <li>
+    <p>If <var>starting point</var> is a <span data-x="reading-flow-item">reading flow item</span>
+    in a <span>reading-flow-ordered focus navigation scope</span> <var>scope</var>, then:</p>


No need for "then" if an if statement is followed by a nested set of steps.

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

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

Open

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

domfarolino Sep 20, 2024

dizhang168 Sep 23, 2024

domfarolino Sep 21, 2024

dizhang168 commented Sep 26, 2024

annevk left a comment

annevk Nov 8, 2024

annevk Nov 8, 2024

annevk Nov 8, 2024

annevk Nov 8, 2024

annevk Nov 8, 2024

annevk Nov 8, 2024

annevk Nov 8, 2024

		element</span> is a <span>reading flow container scope owner</span>.</p>

		<p>A <dfn data-x="non-participating-reading-flow-item">non-participating reading flow item</dfn> is

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

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

dizhang168 commented Sep 26, 2024

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

dizhang168 commented Sep 10, 2024 •

edited by pr-preview bot

Loading