Initial commit

Author: janewman

source

@@ -12539,6 +12539,7 @@ interface <dfn interface>HTMLElement</dfn> : <span>Element</span> {
   [<span>CEReactions</span>, <span data-x="xattr-ReflectSetter">ReflectSetter</span>] attribute DOMString <span data-x="dom-writingSuggestions">writingSuggestions</span>;
   [<span>CEReactions</span>, <span data-x="xattr-ReflectSetter">ReflectSetter</span>] attribute DOMString <span data-x="dom-autocapitalize">autocapitalize</span>;
   [<span>CEReactions</span>] attribute boolean <span data-x="dom-autocorrect">autocorrect</span>;
+  [<span>CEReactions</span>, <span data-focusitem_descendantsx="xattr-Reflect">Reflect</span>] attribute DOMString <dfn attribute for="HTMLElement" data-x="dom-focusgroup">focusgroup</dfn>;
 
   [<span>CEReactions</span>] attribute [<span>LegacyNullToEmptyString</span>] DOMString <span data-x="dom-innerText">innerText</span>;
   [<span>CEReactions</span>] attribute [<span>LegacyNullToEmptyString</span>] DOMString <span data-x="dom-outerText">outerText</span>;
@@ -12625,6 +12626,7 @@ interface <dfn interface>HTMLUnknownElement</dfn> : <span>HTMLElement</span> {
 
   [<span>CEReactions</span>, <span data-x="xattr-Reflect">Reflect</span>] attribute boolean <dfn attribute for="HTMLOrSVGElement" data-x="dom-fe-autofocus">autofocus</dfn>;
   [<span>CEReactions</span>, <span data-x="xattr-ReflectSetter">ReflectSetter</span>] attribute long <span data-x="dom-tabindex">tabIndex</span>;
+  [<span>CEReactions</span>, <span data-x="xattr-Reflect">Reflect</span>] attribute DOMString <dfn attribute for="HTMLOrSVGElement" data-x="dom-focusgroup">focusgroup</dfn>;
   undefined <span data-x="dom-focus">focus</span>(optional <span>FocusOptions</span> options = {});
   undefined <span data-x="dom-blur">blur</span>();
 };</code></pre>
@@ -13896,6 +13898,7 @@ https://software.hixie.ch/utilities/js/live-dom-viewer/?%3C%21DOCTYPE%20HTML%3E%
    <li><code data-x="attr-dir">dir</code></li>
    <li><code data-x="attr-draggable">draggable</code></li>
    <li><code data-x="attr-enterkeyhint">enterkeyhint</code></li>
+   <li><code data-x="attr-focusgroup">focusgroup</code></li>
    <li><code data-x="attr-headingoffset">headingoffset</code></li>
    <li><code data-x="attr-headingreset">headingreset</code></li>
    <li><code data-x="attr-hidden">hidden</code></li>
@@ -90131,6 +90134,135 @@ dictionary <dfn dictionary>DragEventInit</dfn> : <span>MouseEventInit</span> {
 
 
 
+  <h4>The <code data-x="attr-focusgroup">focusgroup</code> attribute</h4>
+
+  <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>
+
+  <p>The attribute's value is a string of space-separated tokens. The first token must be a
+  <dfn>behavior token</dfn>, which defines the primary interaction pattern. Subsequent tokens are
+  optional <dfn>modifier tokens</dfn>. The exception is the `none` token, which must be used
+  alone.</p>
+
+  <table>
+   <thead>
+    <tr>
+     <th>Token
+     <th>Type
+     <th>Description
+   <tbody>
+    <tr>
+     <td><dfn data-x="attr-focusgroup-toolbar">`toolbar`</dfn>
+     <td>Behavior
+     <td>Indicates a toolbar pattern. Infers a `toolbar` role.
+    <tr>
+     <td><dfn data-x="attr-focusgroup-tablist">`tablist`</dfn>
+     <td>Behavior
+     <td>Indicates a tablist pattern. Infers a `tablist` role for the owner and a `tab` role for items.
+    <tr>
+     <td><dfn data-x="attr-focusgroup-radiogroup">`radiogroup`</dfn>
+     <td>Behavior
+     <td>Indicates a radiogroup pattern. Infers a `radiogroup` role for the owner and a `radio` role for items.
+    <tr>
+     <td><dfn data-x="attr-focusgroup-listbox">`listbox`</dfn>
+     <td>Behavior
+     <td>Indicates a listbox pattern. Infers a `listbox` role for the owner and an `option` role for items.
+    <tr>
+     <td><dfn data-x="attr-focusgroup-menu">`menu`</dfn>
+     <td>Behavior
+     <td>Indicates a menu pattern. Infers a `menu` role for the owner and a `menuitem` role for items.
+    <tr>
+     <td><dfn data-x="attr-focusgroup-menubar">`menubar`</dfn>
+     <td>Behavior
+     <td>Indicates a menubar pattern. Infers a `menubar` role for the owner and a `menuitem` role for items.
+    <tr>
+     <td><dfn data-x="attr-focusgroup-wrap">`wrap`</dfn>
+     <td>Modifier
+     <td>Enables navigation to wrap from the last item to the first, and vice-versa.
+    <tr>
+     <td><dfn data-x="attr-focusgroup-inline">`inline`</dfn>
+     <td>Modifier
+     <td>Restricts arrow key navigation to the inline axis (e.g., left/right arrows).
+    <tr>
+     <td><dfn data-x="attr-focusgroup-block">`block`</dfn>
+     <td>Modifier
+     <td>Restricts arrow key navigation to the block axis (e.g., up/down arrows).
+    <tr>
+     <td><dfn data-x="attr-focusgroup-no-memory">`no-memory`</dfn>
+     <td>Modifier
+     <td>Disables the "last focused item" memory when re-entering the focus group.
+    <tr>
+     <td><dfn data-x="attr-focusgroup-none">`none`</dfn>
+     <td>Behavior
+     <td>Opts the element and its descendants out of any ancestor focus group.
+  </table>
+
+  <h5>Concepts</h5>
+
+  <p>A <dfn>focusgroup owner</dfn> is an element with the <code data-x="attr-focusgroup">focusgroup</code> attribute specified.</p>
+
+  <p>The <dfn>focusgroup scope</dfn> of a focusgroup owner is the owner itself and all of its <span>shadow-inclusive descendants</span>, excluding any descendants that are themselves focusgroup owners 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="focusgroup-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 `<div>` or `<span>`) and does not have an explicit <code data-x="attr-aria-role">role</code> attribute.</p>
+
+  <p>For example, `<div focusgroup="toolbar">` would be exposed with a `toolbar` role. However, if the element has existing semantics (e.g., `<nav focusgroup="toolbar">`) or an explicit role (e.g., `<div focusgroup="toolbar" role="navigation">`), the existing role is preserved and only the focus navigation behavior is applied.</p>
+
+  <p class="note">Role inference never overrides explicit author-defined roles or meaningful native-element semantics. It also does not infer variant roles like `menuitemcheckbox`; such roles must be specified explicitly by the author.</p>
+
+  <h5>Focus Handling</h5>
+
+  <h6>Directional Navigation</h6>
+  <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 perform the following steps:</p>
+  <ol>
+    <li>Let <var>owner</var> be the <span data-x="focusgroup owner">focusgroup owner</span>.</li>
+    <li>Let <var>currentItem</var> be the currently focused element.</li>
+    <li>Let <var>items</var> be all <span data-x="focusgroup item">focusgroup items</span> in <span data-x="tree order">tree order</span>.</li>
+    <li>Determine the <var>nextItem</var> by finding the geometrically nearest item in the direction of the arrow key, respecting the owner's <span>writing mode</span> and <span>direction</span>.
+        <ul class="brief">
+          <li>If the <code data-x="attr-focusgroup-inline">inline</code> token is present, only consider items on the inline axis.</li>
+          <li>If the <code data-x="attr-focusgroup-block">block</code> token is present, only consider items on the block axis.</li>
+        </ul>
+    </li>
+    <li>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.</li>
+    <li>If a <var>nextItem</var> is identified, move focus to it. This must not affect the sequential focus navigation order.</li>
+  </ol>
+
+  <h6>Sequential Navigation and Guaranteed Tab Stop</h6>
+  <p>A focus group must have a <dfn>guaranteed tab stop</dfn>. When a user navigates into a focus group using <kbd>Tab</kbd> or <kbd>Shift</kbd>+<kbd>Tab</kbd>, the user agent must identify the target item by applying the following rules:</p>
+  <ol>
+   <li>If the focus group has a <dfn>last focused item</dfn> and the <code data-x="attr-focusgroup-no-memory">no-memory</code> token is not present, the target is the last focused item.</li>
+   <li>Otherwise, if an item is <span>sequentially focusable</span> (e.g., has `tabindex="0"`), the target is the first such item.</li>
+   <li>Otherwise, the target is the first <span data-x="focusgroup item">focusgroup item</span> in <span>tree order</span>.</li>
+  </ol>
+  <p>Once the target item is identified, focus is moved to it. All other <span data-x="focusgroup item">focusgroup items</span> must be removed from the sequential focus navigation order (e.g., by treating their `tabindex` as -1).</p>
+
+  <div class="example">
+   <p>This example shows a tablist with manual activation, wrap-around navigation, and disabled memory:</p>
+
+   <pre><code class="html">&lt;div focusgroup="tablist inline wrap no-memory" aria-label="Common Operating Systems"&gt;
+  &lt;button id="tab-1" aria-selected="false" aria-controls="tabpanel-1" tabindex="-1"&gt;macOS&lt;/button&gt;
+  &lt;button id="tab-2" aria-selected="true" aria-controls="tabpanel-2" tabindex="0"&gt;Windows&lt;/button&gt;
+  &lt;button id="tab-3" aria-selected="false" aria-controls="tabpanel-3" tabindex="-1"&gt;Linux&lt;/button&gt;
+&lt;/div&gt;
+&lt;div id="tabpanel-1" role="tabpanel" tabindex="0" aria-labelledby="tab-1" hidden&gt; … &lt;/div&gt;
+&lt;div id="tabpanel-2" role="tabpanel" tabindex="0" aria-labelledby="tab-2"&gt; … &lt;/div&gt;
+&lt;div id="tabpanel-3" role="tabpanel" tabindex="0" aria-labelledby="tab-3" hidden&gt; … &lt;/div&gt;</code></pre>
+
+   <p>The <code data-x="attr-focusgroup-inline">inline</code> token restricts navigation to
+   horizontal arrow keys only, <code data-x="attr-focusgroup-wrap">wrap</code> enables
+   wrap-around navigation, and <code data-x="attr-focusgroup-no-memory">no-memory</code> ensures
+   that focus always returns to the explicitly selected tab (with <code data-x="attr-tabindex">tabindex="0"</code>)
+   rather than the last focused tab.</p>
+  </div>
+
+
+
   <h4>The <code data-x="attr-draggable">draggable</code> attribute</h4>
 
   <p>All <span>HTML elements</span> may have the <dfn element-attr for="html-global"><code