Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add support for CSS reading-flow #10613

Open
wants to merge 25 commits into
base: main
Choose a base branch
from
Open

Add support for CSS reading-flow #10613

Changes from 9 commits
Commits
Show all changes
25 commits
Select commit Hold shift + click to select a range
9708fb7
Add support for reading-flow
dizhang168 Sep 10, 2024
45fa391
Definitions and nits
domfarolino Sep 17, 2024
35dd322
Review changes
dizhang168 Sep 18, 2024
dc70a78
Address format review changes
dizhang168 Sep 26, 2024
31b2e80
Editorial: clean up small parts of sequential focus navigation (#10632)
domfarolino Oct 2, 2024
a5656ba
Add support for reading-flow
dizhang168 Sep 10, 2024
33c0f64
Address format review changes
dizhang168 Sep 26, 2024
93ec208
Update definitions to make reading flow item a scope owner
dizhang168 Oct 28, 2024
9aeb6c2
Fix previous bad merge fixes
dizhang168 Oct 28, 2024
5b543f6
PR format review changes
dizhang168 Nov 12, 2024
9fa15ee
Define reading flow order algorithm, add example and other improvements
dizhang168 Nov 13, 2024
391d1bc
Update CSS Display links + fix ol error
dizhang168 Nov 14, 2024
adc4888
Small nits
domfarolino Nov 27, 2024
512e4fb
Small clarifications
domfarolino Nov 27, 2024
97a14d9
Review changes: refactor example
dizhang168 Dec 3, 2024
910492d
Fix wrong nesting of node
dizhang168 Dec 4, 2024
7fe3c3e
Reword a couple definitions and add a note
domfarolino Dec 17, 2024
58bd0b0
review changes
dizhang168 Dec 18, 2024
4e4a4c3
Address more review comments
dizhang168 Dec 19, 2024
1d6b374
Some clean-ups, clarification, and wording
domfarolino Dec 20, 2024
da9d18b
Example wording
domfarolino Dec 20, 2024
790976d
Match CONTRIBUTING.md file for conditions
domfarolino Dec 20, 2024
84883e8
Improve example + remove unnecessary association description
dizhang168 Dec 20, 2024
6a79572
Run `specfmt`
domfarolino Dec 20, 2024
8aacc86
center content in reading-flow-order-example.svg
dizhang168 Dec 20, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
125 changes: 119 additions & 6 deletions source
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3818,6 +3818,13 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
<li><dfn data-x-href="https://drafts.csswg.org/css-display/#inline-formatting-context">inline formatting context</dfn></li>
<li><dfn data-x-href="https://drafts.csswg.org/css-display/#replaced-element">replaced element</dfn></li>
<li><dfn data-x-href="https://drafts.csswg.org/css-display/#css-box">CSS box</dfn></li>
<li>The <dfn data-x-href="https://drafts.csswg.org/css-display-4/#valdef-reading-flow-flex-visual">'flex-visual'</dfn>,
<dfn data-x-href="https://drafts.csswg.org/css-display-4/#valdef-reading-flow-flex-flow">'flex-flow'</dfn>,
<dfn data-x-href="https://drafts.csswg.org/css-display-4/#valdef-reading-flow-grid-rows">'grid-rows'</dfn>,
<dfn data-x-href="https://drafts.csswg.org/css-display-4/#valdef-reading-flow-grid-columns">'grid-columns'</dfn>, and
<dfn data-x-href="https://drafts.csswg.org/css-display-4/#valdef-reading-flow-grid-order">'grid-order'</dfn> values of the
<dfn data-x-href="https://drafts.csswg.org/css-display-4/#propdef-reading-flow">'reading-flow'</dfn> property</li>
<li><dfn data-x-href="https://drafts.csswg.org/css-display-4/#order-modified-document-order">order-modified document order</dfn></li>
</ul>

<p>The following features are defined in <cite>CSS Flexible Box Layout</cite>:
Expand Down Expand Up @@ -3964,7 +3971,9 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
<li>The <dfn data-x-href="https://drafts.csswg.org/css-writing-modes/#direction">'direction'</dfn> property</li>
<li>The <dfn data-x-href="https://drafts.csswg.org/css-writing-modes/#unicode-bidi">'unicode-bidi'</dfn> property</li>
<li>The <dfn data-x-href="https://drafts.csswg.org/css-writing-modes/#propdef-writing-mode">'writing-mode'</dfn> property</li>
<li>The <dfn data-x-href="https://drafts.csswg.org/css-writing-modes/#block-flow-direction">block flow direction</dfn>,
<li>The <dfn data-x-href="https://drafts.csswg.org/css-writing-modes/#writing-mode">writing
mode</dfn>,
<dfn data-x-href="https://drafts.csswg.org/css-writing-modes/#block-flow-direction">block flow direction</dfn>,
<dfn data-x-href="https://drafts.csswg.org/css-writing-modes/#block-axis">block axis</dfn>,
<dfn data-x-href="https://drafts.csswg.org/css-writing-modes/#inline-axis">inline axis</dfn>,
<dfn data-x-href="https://drafts.csswg.org/css-writing-modes/#block-size">block size</dfn>,
Expand Down Expand Up @@ -79781,9 +79790,10 @@ dictionary <dfn dictionary>ToggleEventInit</dfn> : <span>EventInit</span> {
<hr>

<p>A node is a <dfn>focus navigation scope owner</dfn> if it is a <code>Document</code>, a
<span>shadow host</span>, a <span>slot</span>, or an element in the <span
<span>shadow host</span>, a <span>slot</span>, an element in the <span
data-x="popover-showing-state">popover showing state</span> which also has a <span>popover
invoker</span> set.</p>
invoker</span> set, a <span>reading flow container scope owner</span> or a <span
data-x="reading-flow-item">reading flow item</span>.</p>

<p>Each <span>focus navigation scope owner</span> has a <dfn>focus navigation scope</dfn>, which
is a list of elements. Its contents are determined as follows:</p>
Expand All @@ -79807,6 +79817,9 @@ dictionary <dfn dictionary>ToggleEventInit</dfn> : <span>EventInit</span> {
<li><p>If <var>element</var> is in the <span data-x="popover-showing-state">popover showing
state</span> and has a <span>popover invoker</span> set, then return <var>element</var>.</p></li>

<li><p>If <var>element</var> is a <span>reading flow container scope owner</span> or a <span
data-x="reading-flow-item">reading flow item</span>, then return <var>element</var>.</p></li>

<li><p>Return <var>element</var>'s parent's <span>associated focus navigation owner</span>.</p></li>
</ol>

Expand All @@ -79816,8 +79829,9 @@ dictionary <dfn dictionary>ToggleEventInit</dfn> : <span>EventInit</span> {

<p class="note">The order of elements within a <span>focus navigation scope</span> does not impact
any of the algorithms in this specification. Ordering only becomes important for the
<span>tabindex-ordered focus navigation scope</span> and <span>flattened tabindex-ordered focus
navigation scope</span> concepts defined below.</p>
<span>tabindex-ordered focus navigation scope</span>, <span>flattened tabindex-ordered focus
navigation scope</span> and <span>reading-flow-ordered focus navigation scope</span> concepts
defined below.</p>

<p>A <dfn>tabindex-ordered focus navigation scope</dfn> is a list of <span data-x="focusable
area">focusable areas</span> and <span data-x="focus navigation scope owner">focus navigation
Expand All @@ -79837,7 +79851,11 @@ dictionary <dfn dictionary>ToggleEventInit</dfn> : <span>EventInit</span> {
</ul>

dizhang168 marked this conversation as resolved.
Show resolved Hide resolved
<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>
element's <span>tabindex value</span>.</p>

<p>A <dfn>reading-flow-ordered focus navigation scope</dfn> is a <span>tabindex-ordered focus
navigation scope</span> whose <span>focus navigation scope owner</span> is a <span>reading flow
container scope owner</span>. Its order is determined by the <span>reading flow order</span>.</p>

<p class="note">The rules there do not give a precise ordering, as they are composed mostly of
"<!--non-normative-->should" statements and relative orderings.</p>
Expand Down Expand Up @@ -80067,6 +80085,84 @@ dictionary <dfn dictionary>ToggleEventInit</dfn> : <span>EventInit</span> {
</div>


<div w-nodev>

<h4>The reading flow</h4>

<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
dizhang168 marked this conversation as resolved.
Show resolved Hide resolved
container</dfn> that has the <span>'reading-flow'</span> CSS property set to
<span>'flex-visual'</span> or <span>'flex-flow'</span>.</p></li>
dizhang168 marked this conversation as resolved.
Show resolved Hide resolved

<li><p>a <dfn data-x-href="https://drafts.csswg.org/css-grid-2/#grid-container">grid
container</dfn> that has the <span>'reading-flow'</span> CSS property set to
dizhang168 marked this conversation as resolved.
Show resolved Hide resolved
<span>'grid-rows'</span>, <span>'grid-columns'</span> or <span>'grid-order'</span>.</p></li>
</ul>

<p>A <dfn>reading flow container scope owner</dfn> is either:</p>

<ul>
<li><p>a <span>reading flow container</span>.</p></li>

<li><p>an element <span>delegating its rendering to its children</span> whose <span>parent
element</span> is a <span>reading flow container</span>.</p></li>
</ul>
dizhang168 marked this conversation as resolved.
Show resolved Hide resolved

dizhang168 marked this conversation as resolved.
Show resolved Hide resolved
<p>A <dfn data-x="reading-flow-item">reading flow item</dfn> is an element whose <span>parent
element</span> is a <span>reading flow container scope owner</span>.</p>

dizhang168 marked this conversation as resolved.
Show resolved Hide resolved
<p>A <dfn data-x="non-participating-reading-flow-item">non-participating reading flow item</dfn> is

dizhang168 marked this conversation as resolved.
Show resolved Hide resolved
a <span data-x="reading-flow-item">reading flow item</span> whose computed value of the
<span>'display'</span> property is 'contents' or whose computed value of the
<span>'position'</span> property is 'fixed' or 'absolute'.</p>

<p>A <dfn data-x="participating-reading-flow-item">participating reading flow item</dfn> is a <span
data-x="reading-flow-item">reading flow item</span> that is not a <span
dizhang168 marked this conversation as resolved.
Show resolved Hide resolved
dizhang168 marked this conversation as resolved.
Show resolved Hide resolved
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
dizhang168 marked this conversation as resolved.
Show resolved Hide resolved
determined by the scope owner's computed value of the <span>'reading-flow'</span> property:

domfarolino marked this conversation as resolved.
Show resolved Hide resolved
<ul>
dizhang168 marked this conversation as resolved.
Show resolved Hide resolved
<li><p>For <span>'flex-visual'</span>: follows the order defined by sorting the <span
dizhang168 marked this conversation as resolved.
Show resolved Hide resolved
data-x="participating-reading-flow-item">participating reading flow items</span> in the visual
reading order of flex items and taking the <span>writing mode</span> into account, followed by
<span data-x="non-participating-reading-flow-item">non-participating reading flow items</span>
in <span>tree order</span>.</p></li>

<li><p>For <span>'flex-flow'</span>: follows the order defined by sorting the <span
dizhang168 marked this conversation as resolved.
Show resolved Hide resolved
data-x="participating-reading-flow-item">participating reading flow items</span> using the
<span>'flex-flow'</span> direction, followed by <span
data-x="non-participating-reading-flow-item">non-participating reading flow items</span> in
dizhang168 marked this conversation as resolved.
Show resolved Hide resolved
<span>tree order</span>.</p></li>

<li><p>For <span>'grid-rows'</span>: follows the order defined by sorting the <span
dizhang168 marked this conversation as resolved.
Show resolved Hide resolved
data-x="participating-reading-flow-item">participating reading flow items</span> first by their
visual row order, and then by their visual column order, taking the <span>writing mode</span>
into account, followed by <span data-x="non-participating-reading-flow-item">non-participating
reading flow items</span> in <span>tree order</span>.</p></li>

<li><p>For <span>'grid-columns'</span>: follows the order defined by sorting the <span
data-x="participating-reading-flow-item">participating reading flow items</span> first by their
visual column order, and then by their visual row order, taking the <span>writing mode</span>
into account, followed by <span data-x="non-participating-reading-flow-item">non-participating
reading flow items</span> in <span>tree order</span>.</p></li>
dizhang168 marked this conversation as resolved.
Show resolved Hide resolved

<li><p>For <span>'grid-order'</span>: follows the order defined by sorting the <span
dizhang168 marked this conversation as resolved.
Show resolved Hide resolved
data-x="participating-reading-flow-item">participating reading flow items</span> in
<span>order-modified document order</span>, followed by <span
data-x="non-participating-reading-flow-item">non-participating reading flow items</span> in
<span>tree order</span>.</p></li>
</ul>

<p>If a <span data-x="reading-flow-item">reading flow item</span> has a <span>tabindex value</span>
greater than zero, then let its value be readjusted to zero.</p>

dizhang168 marked this conversation as resolved.
Show resolved Hide resolved
dizhang168 marked this conversation as resolved.
Show resolved Hide resolved
</div>

<div w-nodev>

dizhang168 marked this conversation as resolved.
Show resolved Hide resolved
<h4 id="focus-processing-model"><span id="processing-model-5"></span>Processing model</h4>
Expand Down Expand Up @@ -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>
dizhang168 marked this conversation as resolved.
Show resolved Hide resolved

<ol>
dizhang168 marked this conversation as resolved.
Show resolved Hide resolved
<li><p>Let <var>reading flow items</var> be the list of <span
data-x="reading-flow-item">reading flow items</span> owned by <var>scope</var>, sorted in
<span>reading flow order</span>.</p></li>

<li><p>If <var>direction</var> is <i>forward</i>, then let <var>candidate</var> be the item
that comes after <var>starting point</var> in <var>reading flow items</var>.</p></li>

<li><p>Otherwise, let <var>candidate</var> be the item that comes before <var>starting
point</var> in <var>reading flow items</var>.</p></li>
</ol>
</li>

<li>
<p>If <var>candidate</var> is a <span>navigable container</span> with a non-null <span>content
navigable</span>, then:</p>
Expand Down