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

Update sequential focus navigation to include shadow trees #4735

Merged
merged 1 commit into from
Sep 24, 2019
Merged

Update sequential focus navigation to include shadow trees #4735

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
146 changes: 128 additions & 18 deletions source
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3175,8 +3175,8 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
<li><dfn data-x-href="https://dom.spec.whatwg.org/#concept-node-document">node document</dfn> concept</li>
<li><dfn data-x="concept-document-type" data-x-href="https://dom.spec.whatwg.org/#concept-document-type">document type</dfn> concept</li>
<li><dfn data-x="concept-DocumentFragment-host" data-x-href="https://dom.spec.whatwg.org/#concept-documentfragment-host">host</dfn> concept</li>
<li>The <dfn data-x-href="https://dom.spec.whatwg.org/#concept-shadow-root">shadow root</dfn> concept</li>

<li>The <dfn data-x-href="https://dom.spec.whatwg.org/#concept-shadow-root">shadow root</dfn> concept, and its <dfn data-x-href="https://dom.spec.whatwg.org/#shadowroot-delegates-focus">delegates focus</dfn></li>
<li>The <dfn data-x-href="https://dom.spec.whatwg.org/#element-shadow-host">shadow host</dfn> concept</li>
<li><dfn data-x-href="https://dom.spec.whatwg.org/#interface-htmlcollection"><code>HTMLCollection</code></dfn> interface</li>
<li><dfn data-x="dom-HTMLCollection-length" data-x-href="https://dom.spec.whatwg.org/#dom-htmlcollection-length"><code>HTMLCollection.length</code></dfn> attribute</li>
<li><dfn data-x="dom-HTMLCollection-item" data-x-href="https://dom.spec.whatwg.org/#dom-htmlcollection-item"><code>HTMLCollection.item()</code></dfn> method</li>
Expand Down Expand Up @@ -3211,6 +3211,7 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
<li>The <dfn data-x-href="https://dom.spec.whatwg.org/#document-element">document element</dfn> concept</li>
<li>The <dfn data-x-href="https://dom.spec.whatwg.org/#in-a-document-tree">in a document tree</dfn>, <dfn data-x-href="https://dom.spec.whatwg.org/#in-a-document">in a document</dfn> (legacy), and <dfn data-x-href="https://dom.spec.whatwg.org/#connected">connected</dfn> concepts</li>
<li>The <dfn data-x="concept-slot" data-x-href="https://dom.spec.whatwg.org/#concept-slot">slot</dfn> concept, and its <dfn data-x="slot-name" data-x-href="https://dom.spec.whatwg.org/#slot-name">name</dfn> and <dfn data-x-href="https://dom.spec.whatwg.org/#slot-assigned-nodes">assigned nodes</dfn></li>
<li>The <dfn data-x-href="https://dom.spec.whatwg.org/#slotable-assigned-slot">assigned slot</dfn> concept.
<li>The <dfn data-x="finding flattened slotables" data-x-href="https://dom.spec.whatwg.org/#find-flattened-slotables">find flattened slotables</dfn> algorithm</li>
<li>The <dfn data-x-href="https://dom.spec.whatwg.org/#assign-a-slot">assign a slot</dfn> algorithm</li>
<li>The <dfn data-x-href="https://dom.spec.whatwg.org/#concept-node-pre-insert">pre-insert</dfn>, <dfn data-x="concept-node-insert" data-x-href="https://dom.spec.whatwg.org/#concept-node-insert">insert</dfn>, <dfn data-x="concept-node-append" data-x-href="https://dom.spec.whatwg.org/#concept-node-append">append</dfn>, <dfn data-x="concept-node-replace" data-x-href="https://dom.spec.whatwg.org/#concept-node-replace">replace</dfn>, <dfn data-x="concept-node-replace-all" data-x-href="https://dom.spec.whatwg.org/#concept-node-replace-all">replace all</dfn>, <dfn data-x-href="https://dom.spec.whatwg.org/#string-replace-all">string replace all</dfn>, <dfn data-x="concept-node-remove" data-x-href="https://dom.spec.whatwg.org/#concept-node-remove">remove</dfn>, and <dfn data-x="concept-node-adopt" data-x-href="https://dom.spec.whatwg.org/#concept-node-adopt">adopt</dfn> algorithms for nodes</li>
Expand Down Expand Up @@ -73445,7 +73446,9 @@ END:VCARD</pre>
<tbody>
<tr>
<th class="data-header" headers="th-fa-area" id="td-fa-1">
Elements that have their <span>tabindex focus flag</span> set, that are not <span
Elements that have their <span>tabindex focus flag</span> set, that are not a <span>shadow
host</span> or whose <span data-x="concept-element-shadow-root">shadow root</span>'s
<span>delegates focus</span> is false, that are not <span
data-x="concept-element-disabled">actually disabled</span>, that are not <span>expressly
inert</span>, and that are either <span>being rendered</span> or <span>being used as relevant
canvas fallback content</span>. <!-- CANVAS-FOCUS-FALLBACK -->
Expand Down Expand Up @@ -73632,8 +73635,91 @@ END:VCARD</pre>

</ol>

</div>
<hr>

<p>A node is a <dfn>focus navigation scope owner</dfn> if it is a <span>document</span>, a
<span>shadow host</span> or a <span>slot</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>

<p>Every element <var>element</var> has an <dfn>associated focus navigation owner</dfn>, which is
either null or a <span>focus navigation scope owner</span>. It is determined by the following
algorithm:</p>

<ol>
<li><p>If <var>element</var>'s parent is null, then return null.</p></li>

<li><p>If <var>element</var>'s parent is a <span>shadow host</span>, then return
<var>element</var>'s <span>assigned slot</span>.</p></li>

<li><p>If <var>element</var>'s parent is a <span>shadow root</span>, then return the parent's
<span data-x="concept-DocumentFragment-host">host</span>.</p></li>

<li><p>If <var>element</var>'s parent is the <span>document element</span>, then return the
parent's <span>node document</span>.</p></li>

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

<p>Then, the contents of a given <span>focus navigation scope owner</span> <var>owner</var>'s
<span>focus navigation scope</span> are all elements whose <span>associated focus navigation
owner</span> is <var>owner</var>.</p>

<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>

<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
scope owners</span>. Every <span>focus navigation scope owner</span> <var>owner</var> has
<span>tabindex-ordered focus navigation scope</span>, whose contents are determined as
follows:</p>

<ul>
<li><p>It contains all elements in <var>owner</var>'s <span>focus navigation scope</span> that
are themselves <span data-x="focus navigation scope owner">focus navigation scope owners</span>,
except the elements whose <span>tabindex value</span> is a negative integer.</p></li>

<li><p>It contains all of the <span data-x="focusable area">focusable areas</span> whose
<span>DOM anchor</span> is an element in <var>owner</var>'s <span>focus navigation scope</span>,
except the focusable areas whose <span>tabindex value</span> is a negative integer.</p></li>
</ul>

<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 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>

<p>A <dfn>flattened tabindex-ordered focus navigation scope</dfn> is a list of <span
data-x="focusable area">focusable areas</span>. Every <span>focus navigation scope owner</span>
<var>owner</var> owns a distinct <span>flattened tabindex-ordered focus navigation scope</span>,
whose contents are determined by the following algorithm:</p>

<ol>
<li><p>Let <var>result</var> be a <span data-x="list clone">clone</span> of <var>owner</var>'s
<span>tabindex-ordered focus navigation scope</span>.</p></li>

<li>
<p>For each <var>item</var> of <var>result</var>:</p>

<ol>
<li><p>If <var>item</var> is not a <span>focus navigation scope owner</span>, then
<span>continue</span>.</p></li>

<li><p>If <var>item</var> is not a <span>focusable area</span>, then replace <var>item</var>
with all of the items in <var>item</var>'s <span>flattened tabindex-ordered focus navigation
scope</span>.</p></li>

<li><p>Otherwise, insert the contents of <var>item</var>'s <span>flattened tabindex-ordered
focus navigation scope</span> after <var>item</var>.</p></li>
</ol>
</li>
</ol>

</div>

<h4>The <code data-x="attr-tabindex">tabindex</code> attribute</h4>

Expand Down Expand Up @@ -73664,6 +73750,12 @@ END:VCARD</pre>
below. This flag is a factor that contributes towards determining whether an element is a
<span>focusable area</span>, as described in the previous section.</p>

<p>The <dfn>tabindex value</dfn> of an element is the value of its <code
data-x="attr-tabindex">tabindex</code> attribute.</p>

<p>The <span>tabindex value</span> of a <span>focusable area</span> is the <span>tabindex
value</span> of its <span>DOM anchor</span>.</p>

<p>If the <code data-x="attr-tabindex">tabindex</code> attribute is specified on an element, it
must be parsed using the <span>rules for parsing integers</span>. The attribute's values, or lack
thereof, must be interpreted as follows:</p>
Expand All @@ -73678,7 +73770,16 @@ END:VCARD</pre>
<span>tabindex focus flag</span> is set and, if so, whether the element and any <span
data-x="focusable area">focusable areas</span> that have the element as their <span>DOM anchor</span> can
be reached using <span>sequential focus navigation</span>, and if so, what their relative
position in the <span>sequential focus navigation order</span> is to be.</p>
position in its <span>tabindex-ordered focus navigation scope</span> is to be. If the element
is a <span>focus navigation scope owner</span>, it must be included in its
<span>tabindex-ordered focus navigation scope</span> even if its <span>tabindex focus
flag</span> is not set and it may not be reachable using <span>sequential focus
navigation</span>.</p>

<p>The relative ordering within a <span>tabindex-ordered focus navigation scope</span> for
elements and <span>focusable area</span>s that belong to the same <span>focus navigation
scope</span> and whose <span>tabindex value</span> is ommited or parsing the value returns an
error should be in <span>shadow-including tree order</span>.</p>

<p>Modulo platform conventions, it is suggested that for the following elements, the
<span>tabindex focus flag</span> be set:</p>
Expand Down Expand Up @@ -73721,7 +73822,7 @@ END:VCARD</pre>
<dd>

<p>The user agent must set the element's <span>tabindex focus flag</span>, but should omit the
element from the <span>sequential focus navigation order</span>.</p>
element from any <span>tabindex-ordered focus navigation scope</span>.</p>

<p class="note">One valid reason to ignore the requirement that sequential focus navigation not
allow the author to lead to the element would be if the user's only mechanism for moving the
Expand All @@ -73738,9 +73839,12 @@ END:VCARD</pre>

<p>The user agent must set the element's <span>tabindex focus flag</span>, should allow the
element and any <span data-x="focusable area">focusable areas</span> that have the element as their
<span>DOM anchor</span> to be reached using <span>sequential focus navigation</span>, following
platform conventions to determine the element's relative position in the <span>sequential focus
navigation order</span>.</p>
<span>DOM anchor</span> to be reached using <span>sequential focus navigation</span>.</p>

<p>The relative ordering within a <span>tabindex-ordered focus navigation scope</span> for
elements and <span>focusable area</span>s that belong to the same <span>focus navigation
scope</span> and whose <span>tabindex value</span> is zero should be in <span>shadow-including
tree order</span>.</p>

</dd>

Expand All @@ -73752,9 +73856,10 @@ END:VCARD</pre>
element and any <span data-x="focusable area">focusable areas</span> that have the element as their
<span>DOM anchor</span> to be reached using sequential focus navigation, and should place the element
&mdash; referenced as <var>candidate</var> below &mdash; and the aforementioned <span
data-x="focusable area">focusable areas</span> in the <span>sequential focus navigation</span>
order so that, relative to other <span data-x="focusable area">focusable areas</span> in the
<span>sequential focus navigation order</span>, they are:</p>
data-x="focusable area">focusable areas</span> in the <span>tabindex-ordered focus navigation
scope</span> where the element is a part of so that, relative to other elements and <span
data-x="focusable area">focusable areas</span> that belong to the same <span>focus
navigation scope</span>, they are:</p>

<ul>

Expand All @@ -73772,12 +73877,12 @@ END:VCARD</pre>
<li>after any <span>focusable area</span> whose <span>DOM anchor</span> is an element whose <code
data-x="attr-tabindex">tabindex</code> attribute has a value equal to the value of the <code
data-x="attr-tabindex">tabindex</code> attribute on <var>candidate</var> but that is
earlier in the document in <span>tree order</span> than <var>candidate</var>,</li>
located earlier than <var>candidate</var> in <span>shadow-including tree order</span>,</li>

<li>before any <span>focusable area</span> whose <span>DOM anchor</span> is an element whose <code
data-x="attr-tabindex">tabindex</code> attribute has a value equal to the value of the <code
data-x="attr-tabindex">tabindex</code> attribute on <var>candidate</var> but that is
later in the document in <span>tree order</span> than <var>candidate</var>, and</li>
located later than <var>candidate</var> in <span>shadow-including tree order</span>, and</li>

<li>before any <span>focusable area</span> whose <span>DOM anchor</span> is an element whose <code
data-x="attr-tabindex">tabindex</code> attribute has a value greater than the value of the
Expand Down Expand Up @@ -74205,10 +74310,15 @@ END:VCARD</pre>

<p>Each <code>Document</code> has a <dfn>sequential focus navigation order</dfn>, which orders some
or all of the <span data-x="focusable area">focusable areas</span> in the <code>Document</code>
relative to each other. The order in the <span>sequential focus navigation order</span> does not
have to be related to the <span>tree order</span> in the <code>Document</code> itself. If a
<span>focusable area</span> is omitted from the <span>sequential focus navigation order</span>
of its <code>Document</code>, then it is unreachable via <span>sequential focus
relative to each other. Its contents and ordering are given by the <span>flattened
tabindex-ordered focus navigation scope</span> of the <code>Document</code>.</p>

<p class="note">Per the rules defining the <span>flattened tabindex-ordered focus navigation
scope</span>, the ordering is not necessarily related to the <span>tree order</span> of the
<code>Document</code>.</p>

<p>If a <span>focusable area</span> is omitted from the <span>sequential focus navigation
order</span> of its <code>Document</code>, then it is unreachable via <span>sequential focus
navigation</span>.</p>

<p>There can also be a <dfn>sequential focus navigation starting point</dfn>. It is initially
Expand Down