Skip to content

Commit

Permalink
Example wording
Browse files Browse the repository at this point in the history
  • Loading branch information
@domfarolino
domfarolino committed Dec 20, 2024
1 parent 1d6b374 commit da9d18b
Showing 1 changed file with 73 additions and 76 deletions.
149 changes: 73 additions & 76 deletions source
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80236,151 +80236,148 @@ dictionary <dfn dictionary>ToggleEventInit</dfn> : <span>EventInit</span> {
<p><img src="/images/reading-flow-order-example.svg" width="500" height="350" alt=""
class="darkmode-aware"></p>

<p>In this example, <code data-x="">wrapper</code> is the <span>focus navigation scope owner</span>
of a <span>reading-flow-ordered focus navigation scope</span> and a <span>reading flow
container</span>. Its <span>reading flow order</span> is computed as follows:</p>
<p>In this example, <code data-x="">wrapper</code> is a <span>reading-flow-ordered scope
owner</span>, and thus has a <span>reading-flow-ordered focus navigation scope</span>. Its
<span>reading flow order</span> is computed as follows:</p>

<ul>
<li><p>Per step 4, we get <code data-x="">wrapper</code>'s <span>rendering-defined sibling
reading flow</span> <var>items</var> as « <code data-x="">A</code>, <code data-x="">F</code>,
<code data-x="">C</code>, <code data-x="">H</code> ».</p></li>
<li><p>First, we get <code data-x="">wrapper</code>'s <span>rendering-defined sibling reading
flow</span> <var>items</var> as « <code data-x="">A</code>, <code data-x="">F</code>, <code
data-x="">C</code>, <code data-x="">H</code> ».</p></li>

<li>
<p>Per step 5, we loop through <var>items</var>:</p>
<p>Next, we loop through <var>items</var>:</p>

<ul>
<li><p><code data-x="">A</code>'s <span>focus navigation scope owner</span> is <code
data-x="">wrapper</code>, it is added to <var>output</var>.</p></li>
<li><p><code data-x="">A</code> is in <var>scope</var>, so it's added to
<var>output</var>.</p></li>

<li>
<p><code data-x="">F</code>'s <span>focus navigation scope owner</span> is <code
data-x="">DC</code>.</p>
<p><code data-x="">F</code> is not in <var>scope</var>; its <span>associated focus navigation
owner</span> is <code data-x="">DC</code>.</p>

<ul>
<li><p>Set <var>item</var> to be <code data-x="">F</code>'s parent element within the
<span>flat tree</span>, <code data-x="">DC</code>.</p></li>
<li><p>Set <var>item</var> to <code data-x="">F</code>'s parent element within the
<span>flat tree</span>, which is <code data-x="">DC</code>.</p></li>

<li><p><code data-x="">DC</code>'s <span>focus navigation scope owner</span> is <code
data-x="">wrapper</code>, it is added to <var>output</var>.</p></li>
<li><p><code data-x="">DC</code>'s is in <var>scope</var>, so it's added to
<var>output</var>.</p></li>
</ul>
</li>

<li>
<p><code data-x="">C</code>'s <span>focus navigation scope owner</span> is <code
data-x="">DC</code>.</p>
<p><code data-x="">C</code> is not in <var>scope</var>; it's <span>associated focus
navigation owner</span> is also <code data-x="">DC</code>.</p>

<ul>
<li><p>Set <var>item</var> to be <code data-x="">C</code>'s parent element within the
<span>flat tree</span>, <code data-x="">DC</code>.</p></li>
<li><p>Set <var>item</var> to <code data-x="">C</code>'s parent element within the
<span>flat tree</span>, which is <code data-x="">DC</code>.</p></li>

<li><p><code data-x="">DC</code>'s <span>focus navigation scope owner</span> is <code
data-x="">wrapper</code>, but it is already in <var>output</var>.</p></li>
<li><p><code data-x="">DC</code> is in <var>scope</var>, but it's already in
<var>output</var>, so we do nothing.</p></li>
</ul>
</li>

<li><p><code data-x="">H</code>'s <span>focus navigation scope owner</span> is <code
data-x="">wrapper</code>, it is added to <var>output</var>.</p></li>
<li><p><code data-x="">H</code> is in <var>scope</var>, so it's added to
<var>output</var>.</p></li>

<li><p><var>output</var> is « <code data-x="">A</code>, <code data-x="">DC</code>, <code
<li><p><var>output</var> is now « <code data-x="">A</code>, <code data-x="">DC</code>, <code
data-x="">H</code> ».</p></li>
</ul>
</li>

<li>
<p>Per step 6, we loop through the <span data-x="concept-tree-child">children</span> of <code
data-x="">wrapper</code> in <span>tree order</span>:</p>

<ul>
<li><p><code data-x="">A</code> is already in <var>output</var>.</p></li>

<li><p><code data-x="">DC</code> is already in <var>output</var>.</p></li>

<li><p><code data-x="">PA</code>'s <span>focus navigation scope owner</span> is <code
data-x="">wrapper</code>, it is added to <var>output</var>.</p></li>
<p>Finally, we loop through the <span data-x="concept-tree-child">children</span> of <code
data-x="">wrapper</code> in <span>tree order</span>.</p>

<li><p><code data-x="">H</code> is already in <var>output</var>.</p></li>
<ul>
<li><p>The only child that's in <var>scope</var> but not already in <var>output</var> is
<code data-x="">PA</code>; it gets added to <var>output</var>.</p>

<li><p><var>output</var> is « <code data-x="">A</code>, <code data-x="">DC</code>, <code
data-x="">H</code>, <code data-x="">PA</code> ».</p></li>
</ul>
<li><p><var>output</var> is now « <code data-x="">A</code>, <code data-x="">DC</code>, <code
data-x="">H</code>, <code data-x="">PA</code> ».</p></li>
</ul>
</li>
</ul>

<p>Notice that <code data-x="">DC</code> is the <span>focus navigation scope owner</span> of a
<span>reading-flow-ordered focus navigation scope</span>, but its <span>reading flow
container</span> is still <code data-x="">wrapper</code>. Its <span>reading flow order</span> is
computed as follows:</p>
<p>Notice that <code data-x="">DC</code> is also a <span>reading-flow-ordered scope owner</span>;
the <span>reading flow order</span> of its <span>reading-flow-ordered focus navigation
scope</span> is computed as follows:</p>

<ul>
<li><p>Per step 4, we again get <code data-x="">wrapper</code>'s <span>rendering-defined sibling
<li><p>First, we compute <code data-x="">DC</code>'s <span>reading flow container</span> as
<code data-x="">wrapper</code>.</p></li>

<li><p>Then, we again get <code data-x="">wrapper</code>'s <span>rendering-defined sibling
reading flow</span> <var>items</var> as « <code data-x="">A</code>, <code data-x="">F</code>,
<code data-x="">C</code>, <code data-x="">H</code> ».</p></li>

<li>
<p>Per step 5, we loop through <var>items</var>:</p>
<p>Next, we loop through <var>items</var>:</p>

<ul>
<li>
<p><code data-x="">A</code>'s <span>focus navigation scope owner</span> is <code
data-x="">wrapper</code>.</p>
<p><code data-x="">A</code> is not in <var>scope</var>; its <span>associated focus navigation
owner</span> is <code data-x="">wrapper</code>, not <code data-x="">DC</code>.</p>

<ul>
<li><p>Set <var>item</var> to be <code data-x="">A</code>'s parent element within the
<span>flat tree</span>, <code data-x="">wrapper</code>.</p></li>
<span>flat tree</span>, which is <code data-x="">wrapper</code>.</p></li>

<li><p>While loop ends because <var>item</var> is the <var>container</var>.</p></li>
<li><p>While loop ends because <var>item</var> is <var>container</var>.</p></li>
</ul>
</li>

<li><p><code data-x="">F</code>'s <span>focus navigation scope owner</span> is <code
data-x="">DC</code>, it is added to <var>output</var>.</p></li>
<li><p><code data-x="">F</code> is in <var>scope</var> so it's added to
<var>output</var>.</p></li>

<li><p><code data-x="">C</code>'s <span>focus navigation scope owner</span> is <code
data-x="">DC</code>, it is added to <var>output</var>.</p></li>
<li><p><code data-x="">C</code> is in <var>scope</var> so it's added to
<var>output</var>.</p></li>

<li>
<p><code data-x="">H</code>'s <span>focus navigation scope owner</span> is <code
data-x="">wrapper</code>.</p>
<p><code data-x="">H</code> is not in <var>scope</var>; its <span>associated focus navigation
owner</span> is <code data-x="">wrapper</code>, not <code data-x="">DC</code>.</p>

<ul>
<li><p>Set <var>item</var> to be <code data-x="">H</code>'s parent element within the
<span>flat tree</span>, <code data-x="">wrapper</code>.</p></li>
<span>flat tree</span>, which is <code data-x="">wrapper</code>.</p></li>

<li><p>While loop ends because <var>item</var> is the <var>container</var>.</p></li>
<li><p>While loop ends because <var>item</var> is <var>container</var>.</p></li>
</ul>
</li>

<li><p><var>output</var> is « <code data-x="">F</code>, <code data-x="">C</code> ».</p></li>
<li><p><var>output</var> is now « <code data-x="">F</code>, <code data-x="">C</code>
».</p></li>
</ul>
</li>

<li>
<p>Per step 6, we loop through the <span data-x="concept-tree-child">children</span> of <code
<p>Finally, we loop through the <span data-x="concept-tree-child">children</span> of <code
data-x="">wrapper</code> in <span>tree order</span>:</p>

<ul>
<li><p><code data-x="">C</code> is already in <var>output</var>.</p></li>

<li><p><code data-x="">F</code> is already in <var>output</var>.</p></li>

<li><p><var>output</var> is « <code data-x="">F</code>, <code data-x="">C</code> ».</p></li>
<li><p>There are no <span data-x="concept-tree-child">children</span> that are not already in
<var>output</var>, so we add nothing to <var>output</var>.</p></li>
</ul>
</li>
</ul>

<p><code data-x="">A</code>, <code data-x="">C</code>, <code data-x="">F</code>, <code
data-x="">PA</code> and <code data-x="">H</code> are <span data-x="reading flow item">reading flow
items</span>. Each is the <span>focus navigation scope owner</span> of a <span>tabindex-ordered
focus navigation scope</span> that does not follow the <span>reading flow order</span>. For example,
the <span>focus navigation scope</span> of C will be « <code data-x="">E</code>, <code
data-x="">D</code> » because <code data-x="">E</code> has a higher positive <span>tabindex
value</span> than <code data-x="">D</code>.</p>

<p>Combining everything together, the <span>flattened tabindex-ordered focus navigation scope</span>
for <code data-x="">wrapper</code> is « <code data-x="">wrapper</code>, <code data-x="">A</code>,
<code data-x="">B</code>, <code data-x="">DC</code>, <code data-x="">F</code>, <code
data-x="">C</code>, <code data-x="">E</code>, <code data-x="">D</code>, <code data-x="">H</code>,
<code data-x="">PA</code>, <code data-x="">G</code> ».</p>
<p>Each of <code data-x="">A</code>, <code data-x="">C</code>, <code data-x="">F</code>, <code
data-x="">PA</code>, and <code data-x="">H</code> are <span data-x="reading flow item">reading
flow items</span>, and the <span>focus navigation scope owner</span> of a <span>tabindex-ordered
focus navigation scope</span> that does not follow the <span>reading flow order</span>. For
example, the <span>tabindex-ordered focus navigation scope</span> of <code data-x="">C</code> is
« <code data-x="">E</code>, <code data-x="">D</code> », because <code data-x="">E</code> has a
higher positive <span>tabindex value</span> than <code data-x="">D</code>.</p>

<p>Finally, when computing the <span>flattened tabindex-ordered focus navigation scope</span> of
<code data-x="">wrapper</code>, the two <span data-x="reading-flow-ordered focus navigation
scope">reading-flow-ordered focus navigation scopes</span> we computed above, along with every
ordinary <span>tabindex-ordered focus navigation scope</span> previously mentioned, are all
recursively composed to form the following: « <code data-x="">wrapper</code>, <code
data-x="">A</code>, <code data-x="">B</code>, <code data-x="">DC</code>, <code
data-x="">F</code>, <code data-x="">C</code>, <code data-x="">E</code>, <code data-x="">D</code>,
<code data-x="">H</code>, <code data-x="">PA</code>, <code data-x="">G</code> ».</p>
</div>

<div w-nodev>
Expand Down

0 comments on commit da9d18b

Please sign in to comment.