Update key-conflict element behavior.

Author: janewman

source

@@ -90235,13 +90235,17 @@ dictionary <dfn dictionary>DragEventInit</dfn> : <span>MouseEventInit</span> {
    <ol>
     <li><p>Let <var>direction</var> be "forward" if the user pressed <kbd>Tab</kbd>, or "backward" if the user pressed <kbd>Shift</kbd>+<kbd>Tab</kbd>.</p></li>
 
-    <li><p>Let <var>items</var> be all <span data-x="focusgroup item">focusgroup items</span> in the same <span data-x="focusgroup scope">focusgroup scope</span> as the current <span data-x="key conflict element">key conflict element</span>, in <span>tree order</span>.</p></li>
+    <li><p>Let <var>keyConflictElement</var> be the current <span data-x="key conflict element">key conflict element</span>.</p></li>
 
-    <li><p>If <var>direction</var> is "forward", let <var>target</var> be the first item in <var>items</var> that follows the current <span data-x="key conflict element">key conflict element</span> in <span>tree order</span> and is <span>focusable</span>.</p></li>
+    <li><p>Let <var>candidates</var> be all <span data-x="focusgroup item">focusgroup items</span> in the same <span data-x="focusgroup scope">focusgroup scope</span> as <var>keyConflictElement</var>, excluding <var>keyConflictElement</var> itself.</p></li>
 
-    <li><p>If <var>direction</var> is "backward", let <var>target</var> be the last item in <var>items</var> that precedes the current <span data-x="key conflict element">key conflict element</span> in <span>tree order</span> and is <span>focusable</span>.</p></li>
+    <li><p>If <var>direction</var> is "forward", let <var>eligibleItems</var> be all items in <var>candidates</var> that follow <var>keyConflictElement</var> in <span>tree order</span>.</p></li>
 
-    <li><p>If <var>target</var> is not null, <span>move the focus</span> to <var>target</var>. The focusgroup's <span data-x="last focused item">last focused item</span> must not be considered during this process, though the <code data-x="attr-tabindex">tabindex</code> ordering continues to apply as in normal <span>sequential focus navigation</span>.</p></li>
+    <li><p>If <var>direction</var> is "backward", let <var>eligibleItems</var> be all items in <var>candidates</var> that precede <var>keyConflictElement</var> in <span>tree order</span>.</p></li>
+
+    <li><p>Among <var>eligibleItems</var>, let <var>target</var> be the first item that would be focused according to the following priority order: first, the lowest positive <code data-x="attr-tabindex">tabindex</code> value; then elements with <code data-x="attr-tabindex">tabindex="0"</code> or implicit focusability; and finally, as the lowest priority, elements with <code data-x="attr-tabindex">tabindex="-1"</code>. Within each priority level, order by <span>tree order</span>.</p></li>
+
+    <li><p>If <var>target</var> is not null, <span>move the focus</span> to <var>target</var>. The focusgroup's <span data-x="last focused item">last focused item</span> must not be considered during this process.</p></li>
 
     <li><p>Otherwise, follow the normal <span>sequential focus navigation</span> rules.</p></li>
    </ol>
@@ -90270,6 +90274,29 @@ dictionary <dfn dictionary>DragEventInit</dfn> : <span>MouseEventInit</span> {
    </ul>
   </div>
 
+  <div class="example">
+   <p>This example shows how authors can control escape behavior using <code data-x="attr-tabindex">tabindex</code> values:</p>
+
+   <pre><code class="html">&lt;div focusgroup="toolbar" aria-label="Text formatting"&gt;
+  &lt;button type="button" tabindex="-1"&gt;Bold&lt;/button&gt;
+  &lt;button type="button" tabindex="-1"&gt;Italic&lt;/button&gt;
+  &lt;div&gt;
+    &lt;input type="text" placeholder="Search" /&gt; &lt;!-- Key conflict element --&gt;
+    &lt;button tabindex="1"&gt;Go&lt;/button&gt; &lt;!-- Higher priority --&gt;
+  &lt;/div&gt;
+  &lt;button type="button" tabindex="-1"&gt;Save&lt;/button&gt; &lt;!-- Lowest priority --&gt;
+  &lt;button type="button" tabindex="2"&gt;Print&lt;/button&gt; &lt;!-- Lower priority --&gt;
+&lt;/div&gt;</code></pre>
+
+   <p>In this modified example, the priority order for escape behavior is:</p>
+   <ul>
+    <li>Pressing <kbd>Tab</kbd> from within the search input moves focus to the "Go" button (highest priority due to <code data-x="attr-tabindex">tabindex="1"</code>)</li>
+    <li>If the "Go" button wasn't present, <kbd>Tab</kbd> would move to the "Print" button (medium priority due to <code data-x="attr-tabindex">tabindex="2"</code>)</li>
+    <li>If neither positive <code data-x="attr-tabindex">tabindex</code> elements were present, <kbd>Tab</kbd> would move to the "Save" button (lowest priority due to <code data-x="attr-tabindex">tabindex="-1"</code>)</li>
+    <li>Elements with <code data-x="attr-tabindex">tabindex="-1"</code> are considered as the fallback option when no higher-priority elements are available</li>
+   </ul>
+  </div>
+
   <h6>Directional Navigation</h6>
 
   <div algorithm>