Update sequential focus navigation to include shadow trees

This defines an explicit list for the document's "sequential focus navigation order", whose contents are defined to include elements in shadow trees. Previously the contents of the sequential focus navigation order were defined mostly implicitly, in the tabindex section. This also expands the ordering requirements for sequential focus navigation order to account for shadow trees and slotted elements. Finally, this has a minor connection to delegatesFocus, in that it excludes elements that are shadow hosts with delegatesFocus = true from being focusable areas. Part of #2013. Tests: web-platform-tests/wpt#17523
whatwg · Sep 24, 2019 · d19d963 · d19d963
1 parent 500f4fe
commit d19d963
Showing 1 changed file with 128 additions and 18 deletions.
diff --git a/source b/source
@@ -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>
@@ -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>
@@ -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 -->
@@ -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>
 
@@ -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>
@@ -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>
@@ -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
@@ -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>
 
@@ -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>
 
@@ -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
@@ -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