Clarifications and reorganizing.

Author: janewman

source

@@ -90166,75 +90166,92 @@ dictionary <dfn dictionary>DragEventInit</dfn> : <span>MouseEventInit</span> {
 
   <p>The <dfn element-attr for="html-global"><code data-x="attr-focusgroup">focusgroup</code></dfn>
   content attribute provides declarative focus navigation for a group of related focusable
-  elements. When applied to an element, it enables directional arrow key navigation among its
-  focusable descendants, forming a <dfn>focus group</dfn>.</p>
+  elements. When applied to an element, it enables <dfn>Directional Navigation</dfn> among its
+  focusable descendants, forming a <dfn>focus group</dfn>. <span>Directional Navigation</span> is navigation by spatial direction (such as up, down, left, or right), as determined by the user agent and input device (for example, arrow keys, gamepad, remote control, etc.). In contrast, <span>Sequential focus navigation</span> refers to navigation in the order defined by the <span>sequential focus navigation order</span> (see <a href="#sequential-focus-navigation">definition</a>), often via <kbd>Tab</kbd> and <kbd>Shift+Tab</kbd>.</p>
+
+  <h5>Concepts</h5>
 
   <p>The attribute's value is a string of space-separated tokens. The first token must either be a
   <dfn>behavior token</dfn>, which defines the primary interaction pattern, or the special token
   <code data-x="attr-focusgroup-none">none</code> which is used alone to opt out of focusgroup behavior. If a behavior token is
   specified, <dfn>modifier tokens</dfn> can be provided subsequently.</p>
 
-  <h5>Concepts</h5>
-
-  <p>A <dfn>focusgroup owner</dfn> is an element with a valid <code data-x="attr-focusgroup">focusgroup</code> attribute specified, where the attribute value contains a <span data-x="behavior token">behavior token</span> (not <code data-x="attr-focusgroup-none">none</code>).</p>
+  <p><span data-x="behavior token">Behavior tokens</span> define the <dfn>interaction pattern</dfn>, which refers to how the directional navigation inputs are used to move focus between focusgroup items.</p>
 
-  <p>The <dfn>focusgroup scope</dfn> of a focusgroup owner is the owner itself and all of its <span data-x="shadow-including descendant">shadow-including descendants</span>, excluding any descendants that are in a different <span data-x="focusgroup scope">focusgroup scope</span> or have opted out with <code data-x="attr-focusgroup-none">focusgroup="none"</code>.</p>
+  <p>The following interaction patterns are defined:</p>
 
-  <p>A <dfn>focusgroup item</dfn> is any <span>focusable</span> element within the focusgroup scope.</p>
+  <ul>
+   <li><p><dfn data-x="linear interaction pattern">Linear</dfn>: Enables sequential navigation forwards and backwards through a set of focusable items. In a <span data-x="linear interaction pattern">linear interaction pattern</span>, even when both directional input axes are allowed (such as when neither <code data-x="attr-focusgroup-inline">inline</code> nor <code data-x="attr-focusgroup-block">block</code> modifiers are specified), navigation follows the document order of the items rather than spatial positioning.</p></li>
+  </ul>
 
   <table>
    <thead>
     <tr>
      <th>Token
      <th>Type
+     <th><span data-x="interaction pattern">Interaction</span>
      <th>Description
    <tbody>
     <tr>
      <td><dfn data-x="attr-focusgroup-toolbar"><code>toolbar</code></dfn>
-     <td>Behavior
-     <td>Indicates a toolbar pattern. Infers a <code data-x="attr-focusgroup-toolbar">toolbar</code> role.
+     <td><span data-x="behavior token">Behavior</span>
+     <td><span data-x="linear interaction pattern">Linear</span>
+     <td>Indicates a toolbar pattern. Infers a <code data-x="attr-aria-role-toolbar">toolbar</code> role.
     <tr>
      <td><dfn data-x="attr-focusgroup-tablist"><code>tablist</code></dfn>
-     <td>Behavior
+     <td><span data-x="behavior token">Behavior</span>
+     <td><span data-x="linear interaction pattern">Linear</span>
      <td>Indicates a tablist pattern. Infers a <code data-x="attr-aria-role-tablist">tablist</code> role for the owner and a <code data-x="attr-aria-role-tab">tab</code> role for items.
     <tr>
      <td><dfn data-x="attr-focusgroup-radiogroup"><code>radiogroup</code></dfn>
-     <td>Behavior
+     <td><span data-x="behavior token">Behavior</span>
+     <td><span data-x="linear interaction pattern">Linear</span>
      <td>Indicates a radiogroup pattern. Infers a <code data-x="attr-aria-role-radiogroup">radiogroup</code> role for the owner and a <code data-x="attr-aria-role-radio">radio</code> role for items.
     <tr>
      <td><dfn data-x="attr-focusgroup-listbox"><code>listbox</code></dfn>
-     <td>Behavior
+     <td><span data-x="behavior token">Behavior</span>
+     <td><span data-x="linear interaction pattern">Linear</span>
      <td>Indicates a listbox pattern. Infers a <code data-x="attr-aria-role-listbox">listbox</code> role for the owner and an <code data-x="attr-aria-role-option">option</code> role for items.
     <tr>
      <td><dfn data-x="attr-focusgroup-menu"><code>menu</code></dfn>
-     <td>Behavior
+     <td><span data-x="behavior token">Behavior</span>
+     <td><span data-x="linear interaction pattern">Linear</span>
      <td>Indicates a menu pattern. Infers a <code data-x="attr-aria-role-menu">menu</code> role for the owner and a <code data-x="attr-aria-role-menuitem">menuitem</code> role for items.
     <tr>
      <td><dfn data-x="attr-focusgroup-menubar"><code>menubar</code></dfn>
-     <td>Behavior
+     <td><span data-x="behavior token">Behavior</span>
+     <td><span data-x="linear interaction pattern">Linear</span>
      <td>Indicates a menubar pattern. Infers a <code data-x="attr-aria-role-menubar">menubar</code> role for the owner and a <code data-x="attr-aria-role-menuitem">menuitem</code> role for items.
     <tr>
      <td><dfn data-x="attr-focusgroup-wrap"><code>wrap</code></dfn>
-     <td>Modifier
+     <td><span data-x="modifier tokens">Modifier</span>
+     <td>
      <td>Enables navigation to wrap from the last item to the first, and vice-versa.
     <tr>
      <td><dfn data-x="attr-focusgroup-inline"><code>inline</code></dfn>
-     <td>Modifier
+     <td><span data-x="modifier tokens">Modifier</span>
+     <td>
      <td>Restricts arrow key navigation to the inline axis (e.g., left/right arrows).
     <tr>
      <td><dfn data-x="attr-focusgroup-block"><code>block</code></dfn>
-     <td>Modifier
+     <td><span data-x="modifier tokens">Modifier</span>
+     <td>
      <td>Restricts arrow key navigation to the block axis (e.g., up/down arrows).
     <tr>
      <td><dfn data-x="attr-focusgroup-no-memory"><code>no-memory</code></dfn>
-     <td>Modifier
+     <td><span data-x="modifier tokens">Modifier</span>
+     <td>
      <td>Disables the "last focused item" memory when re-entering the focus group.
     <tr>
      <td><dfn data-x="attr-focusgroup-none"><code>none</code></dfn>
      <td>Special
+     <td>
      <td>Opts the element and its descendants out of any ancestor focus group. Must be used alone.
   </table>
 
+  <p>A <dfn>focusgroup owner</dfn> is an element with a valid <code data-x="attr-focusgroup">focusgroup</code> attribute specified, where the attribute value contains a <span data-x="behavior token">behavior token</span> (not <code data-x="attr-focusgroup-none">none</code>).</p>
+  <p>The <dfn>focusgroup scope</dfn> of a focusgroup owner is all of its <span data-x="shadow-including descendant">shadow-including descendants</span>, excluding any descendants that are a <span>focusgroup owner</span> themselves or are are in a different <span data-x="focusgroup scope">focusgroup scope</span> or have opted out with <code data-x="attr-focusgroup-none">focusgroup="none"</code>.</p>
+  <p>A <dfn>focusgroup item</dfn> is any <span>focusable</span> element within the focusgroup scope.</p>
   <h5>ARIA Role Inference</h5>
 
   <p>When a <span data-x="behavior token">behavior token</span> is used, the user agent may infer a corresponding ARIA role for the <span data-x="focusgroup owner">focusgroup owner</span> and its <span data-x="focusgroup item">items</span>. This inference must only occur if the element would otherwise have a generic role (such as a <code>div</code> or <code>span</code>) and does not have an explicit <code data-x="attr-aria-role">role</code> attribute.</p>
@@ -90249,16 +90266,16 @@ dictionary <dfn dictionary>DragEventInit</dfn> : <span>MouseEventInit</span> {
   <h6>Directional Navigation</h6>
 
   <div algorithm>
-   <p>When a user presses an arrow key and focus is within a <span data-x="focusgroup scope">focusgroup scope</span>, the user agent must run these steps:</p>
+   <p>When a user requests <span>Directional Navigation</span> and focus is within a <span data-x="focusgroup scope">focusgroup scope</span>, the user agent must run these steps:</p>
 
    <ol>
-    <li>If the arrow key pressed is not in an allowed axis given the focusgroup owners's modifiers, do nothing, and do not consume the arrow key event.</li>
-    <li>Let <var>direction</var> be "forwards" or "backwards" corresponding to the arrow key pressed and the document's direction.</li>
+    <li>If the navigation request is not in an allowed axis given the focusgroup owner's modifiers, do nothing.</li>
+    <li>Let <var>direction</var> be the spatial direction requested (e.g., up, down, left, right) as determined by the user agent and input device.</li>
     <li>Let <var>owner</var> be the <span>focusgroup owner</span>.</li>
     <li><p>Let <var>currentItem</var> be the currently focused <span>focusgroup item</span>.</p></li>
     <li><p>Let <var>items</var> be all <span data-x="focusgroup item">focusgroup items</span> in <span>tree order</span>.</p></li>
-    <li><p>Determine the <var>nextItem</var> by finding the nearest item in tree order in the <var>direction</var>. </p></li>
-    <li><p>If no <var>nextItem</var> is found and the <code data-x="attr-focusgroup-wrap">wrap</code> token is present, wrap to the first item in the specified direction. Otherwise, do nothing, do not consume the arrow key event.</p></li>
+    <li><p>Determine the <var>nextItem</var> by finding the nearest item in tree order in the <var>direction</var>.</p></li>
+    <li><p>If no <var>nextItem</var> is found and the <code data-x="attr-focusgroup-wrap">wrap</code> token is present, wrap to the first item in the specified direction. Otherwise, do nothing.</p></li>
     <li><p>If a <var>nextItem</var> is identified, run the <span>focusing steps</span> for it.</p></li>
    </ol>
   </div>
@@ -90267,12 +90284,12 @@ dictionary <dfn dictionary>DragEventInit</dfn> : <span>MouseEventInit</span> {
 
   <p>A <span data-x="focus group">focus group</span> must have at least one <dfn>guaranteed tab stop</dfn>. When elements opt-out of a focusgroup using <code data-x="attr-focusgroup-none">focusgroup="none"</code>, they divide the focusgroup for <span>sequential focus navigation</span> purposes, creating one tab stop per focusgroup segment.</p>
   <div algorithm>
-   <p>When a user navigates into a <span data-x="focus group">focus group</span> using <kbd>Tab</kbd> or <kbd>Shift</kbd>+<kbd>Tab</kbd>, the user agent must run these steps:</p>
+   <p>When a user requests <span>sequential focus navigation</span> into a <span data-x="focus group">focus group</span>, the user agent must run these steps:</p>
 
    <ol>
-    <li><p>Let <var>direction</var> be "forward" for <kbd>Tab</kbd> and "backward" for <kbd>Shift</kbd>+<kbd>Tab</kbd>.</p></li>
+    <li><p>Let <var>direction</var> be "forward" or "backward" as determined by the user agent and input device (for example, <kbd>Tab</kbd> or <kbd>Shift</kbd>+<kbd>Tab</kbd>).</p></li>
 
-    <li><p>Let <var>entryElement</var> be the element from which focus is entering the focusgroup (the element with focus before the tab key was pressed).</p></li>
+    <li><p>Let <var>entryElement</var> be the element from which focus is entering the focusgroup.</p></li>
 
     <li><p>Let <var>focusgroupSegment</var> be the set of <span data-x="focusgroup item">focusgroup items</span> in the nearest focusgroup scope that are reachable without crossing any opted-out elements in <span>tree order</span> from <var>entryElement</var> in the direction of navigation.</p></li>