Update focusgroup examples to follow the latest version of the API. (#121)

* Update focusgroup examples to follow the latest version of the API.

* focusgroup: phase 12 consensus fixes

- tablist: vertical tablist missing wrap (block overrides inline wrap default)
  - focusgroup="tablist block nomemory" → "tablist block wrap nomemory"
  - Updated attr-label, live HTML, snippet, try-it, and notice
- tablist: add click handler so re-click on already-focused tab selects it
- tablist: improve Demo 1/2 snippet class attrs and try-it instructions
- accordion: fix remaining Tab→Shift+Tab in intro paragraph
- accordion: add class="accordion" and class="accordion accordion-focus-into"
  to Demo 1/2 source snippets; fix JS selector to "h3 button[aria-controls]"
- menu: add e.preventDefault() to Escape handler; rename triggerId→popoverId
- menu: correct backwards child-role-inference claim in notice
- menu: rewrite "Add JS" notice to direct voice
- listbox: rewrite Home/End parenthetical (remove misleading fallback note)
- toolbar: "Click the first button" → "Tab to the toolbar"; improve nomemory
  try-it to mention focusgroupstart explicitly
- additional-concepts: fix embedded newlines in aria-label in two snippets
- additional-concepts: add opacity:0.6 to opted-out buttons in snippet
- additional-concepts: simplify nested-focusgroup attr-label text
- index + additional-concepts: add aria-hidden="true" to all div.attr-label
- index: fix role= → role in prose
- README: Menu → Menu & Menubar

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

* Additional fixup.

* additional fixup.

* update snippet to match.

* remove inline style for easier to read HTML.

* remove explicit role where it isn't needed.

* Remove redundant aria explanation.

---------

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Author: janewman

focusgroup/README.md

@@ -2,18 +2,20 @@
 
 ➡️ **[Open the demo](https://microsoftedge.github.io/Demos/focusgroup/)** ⬅️
 
-Interactive demos for the HTML `focusgroup` attribute, which provides declarative
-arrow-key keyboard navigation for composite widgets by implementing the _roving tabindex_ pattern natively without JavaScript.
+Interactive demos for the HTML `focusgroup` attribute, which lets you add arrow-key navigation to composite widgets (the roving tabindex pattern) without JavaScript.
 
 ## Demos
 
-- [Toolbar](https://microsoftedge.github.io/Demos/focusgroup/toolbar.html) — Horizontal/vertical toolbar with arrow-key navigation
-- [Tablist](https://microsoftedge.github.io/Demos/focusgroup/tablist.html) — Tab control with inline wrapping and no-memory
-- [Menu](https://microsoftedge.github.io/Demos/focusgroup/menu.html) — Vertical menu and menubar with nested submenus
-- [Radio Group](https://microsoftedge.github.io/Demos/focusgroup/radiogroup.html) — Radio button group navigation
-- [Listbox](https://microsoftedge.github.io/Demos/focusgroup/listbox.html) — Selectable list navigation
-- [Accordion](https://microsoftedge.github.io/Demos/focusgroup/accordion.html) — Accordion with block-axis navigation and opt-out panels
-- [Additional Concepts](https://microsoftedge.github.io/Demos/focusgroup/additional-concepts.html) — Nested focusgroups, opt-out, shadow DOM, reading-flow
+> **Note:** The `focusgroup` behavior token maps a minimum ARIA role to generic containers (e.g., a plain `<div>`) and can infer child roles (e.g., `tab` on `<button>` inside a `tablist`). These demos rely on that automatic mapping. Explicit `role` attributes are only used for intentional overrides (e.g., `role="group"` on the accordion to prevent the `toolbar` role).
+
+- [Index](https://microsoftedge.github.io/Demos/focusgroup/index.html): Overview page with a quick-demo toolbar and navigation to all demos
+- [Toolbar](https://microsoftedge.github.io/Demos/focusgroup/toolbar.html): Toolbar demos using inline and block navigation
+- [Tablist](https://microsoftedge.github.io/Demos/focusgroup/tablist.html): Tab control using the `tablist` behavior token (which defaults to inline + wrap), with `nomemory` to reset focus position on re-entry
+- [Menu & Menubar](https://microsoftedge.github.io/Demos/focusgroup/menu.html): Vertical menu and horizontal menubar with nested submenus
+- [Radio Group](https://microsoftedge.github.io/Demos/focusgroup/radiogroup.html): Radio button group navigation
+- [Listbox](https://microsoftedge.github.io/Demos/focusgroup/listbox.html): Selectable list navigation
+- [Accordion](https://microsoftedge.github.io/Demos/focusgroup/accordion.html): Accordion with block-axis arrow key navigation using `focusgroup="toolbar block"` and `role="group"`
+- [Additional Concepts](https://microsoftedge.github.io/Demos/focusgroup/additional-concepts.html): Nested focusgroups, opt-out, deep descendants, CSS `reading-flow` integration, feature detection
 
 ## Learn more
 
@@ -22,4 +24,4 @@ arrow-key keyboard navigation for composite widgets by implementing the _roving
 
 ## Requirements
 
-May require enabling the **Experimental Web Platform features** flag at `about://flags` in Microsoft Edge or another Chromium-based browser.
+These demos use the scoped-focusgroup variant of the spec and require enabling the **Experimental Web Platform features** flag at `about://flags` in Microsoft Edge or another Chromium-based browser. The feature is experimental and not yet enabled by default in stable builds. See the [Open UI explainer](https://open-ui.org/components/scoped-focusgroup.explainer/) for the spec status.

focusgroup/accordion.html

@@ -1,5 +1,5 @@
 /* ============================================================
-   Focusgroup Demo — Accordion
+   Focusgroup Demo - Accordion
    ============================================================
    focusgroup handles arrow-key navigation between headers.
    This file handles the remaining application logic:
@@ -12,7 +12,7 @@
    focusable scrollable region (tabindex="0") with
    focusgroup="none", so arrow keys scroll its content.
 
-   Requires shared.js to be loaded first.
+   Load after shared.js for the focusgroup-support warning banner.
    ============================================================ */
 
 (function () {

focusgroup/accordion.js

@@ -3,7 +3,6 @@
 
 <head>
   <meta charset="UTF-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Focusgroup: Additional Concepts</title>
   <link rel="icon" type="image/png" href="https://edgestatic.azureedge.net/welcome/static/favicon.png">
@@ -29,24 +28,23 @@ <h2 id="nested-focusgroups">Nested Focusgroups</h2>
         A nested focusgroup creates an independent navigation scope
         within an outer focusgroup.
         Each group has its own axis, wrapping, memory, and entry point.
-        <kbd>Tab</kbd> moves between groups;
-        arrows navigate within.
+        Each focusgroup is its own tab stop; arrows navigate within the active group.
       </p>
-      <div class="attr-label">focusgroup="toolbar inline" (outer) +
-        focusgroup="toolbar inline wrap" (inner)</div>
+      <div class="attr-label" aria-hidden="true">focusgroup="toolbar" (outer) + focusgroup="toolbar" + role="group" (inner)</div>
 
       <div class="try-it">
-        <strong>Try it:</strong> Use <kbd>→</kbd> in the outer toolbar.
-        When focus reaches the nested group, press <kbd>Tab</kbd>
-        to enter it. Use arrows inside, then <kbd>Tab</kbd> to exit
-        back to the outer toolbar.
+        <strong>Try it:</strong> Use <kbd>→</kbd> to navigate the outer
+        toolbar; the nested group counts as a <strong>single stop</strong>;
+        arrows land on it as a whole. Press <kbd>Tab</kbd>
+        to move focus inside the nested group; once inside, use
+        arrows. Press <kbd>Tab</kbd> again to exit.
       </div>
 
       <div class="demo-container">
-        <div focusgroup="toolbar inline" aria-label="Main toolbar" class="toolbar-horizontal">
+        <div focusgroup="toolbar" aria-label="Main toolbar" class="toolbar-horizontal">
           <button type="button">Save</button>
-          <button type="button" focusgroupstart>Print</button>
-          <div focusgroup="toolbar inline wrap" aria-label="Text formatting" class="nested-toolbar">
+          <button type="button">Print</button>
+          <div role="group" focusgroup="toolbar" tabindex="0" aria-label="Text formatting" class="nested-toolbar">
             <button type="button">Bold</button>
             <button type="button">Italic</button>
             <button type="button">Underline</button>
@@ -57,23 +55,24 @@ <h2 id="nested-focusgroups">Nested Focusgroups</h2>
       </div>
 
       <ul class="notice-list">
-        <li>The nested toolbar is an <strong>independent scope</strong>
-          inside the outer toolbar</li>
-        <li><kbd>Tab</kbd> moves between the outer and inner
-          focusgroups</li>
+        <li>Each focusgroup is a separate tab stop in the page's tab order</li>
         <li>Arrow keys navigate within whichever group currently has
           focus</li>
-        <li>Each group can have its own wrapping/memory/axis
-          settings</li>
+        <li>Sub-groups within a toolbar use <code>role="group"</code>
+          rather than another <code>role="toolbar"</code>, as nesting
+          toolbars is architecturally unsound. Arrow-key navigation
+          works on the inner group regardless of which
+          explicit <code>role</code> it carries.</li>
       </ul>
 
       <details class="source-code">
         <summary>View source</summary>
-        <pre><code>&lt;div focusgroup="toolbar inline" aria-label="Main
-     toolbar"&gt;
+        <pre><code>&lt;div focusgroup="toolbar" aria-label="Main toolbar"
+     class="toolbar-horizontal"&gt;
     &lt;button type="button"&gt;Save&lt;/button&gt;
-    &lt;button type="button" focusgroupstart&gt;Print&lt;/button&gt;
-    &lt;div focusgroup="toolbar inline wrap" aria-label="Text formatting"&gt;
+    &lt;button type="button"&gt;Print&lt;/button&gt;
+    &lt;div role="group" focusgroup="toolbar" tabindex="0" aria-label="Text formatting"
+         class="nested-toolbar"&gt;
         &lt;button type="button"&gt;Bold&lt;/button&gt;
         &lt;button type="button"&gt;Italic&lt;/button&gt;
         &lt;button type="button"&gt;Underline&lt;/button&gt;
@@ -90,11 +89,11 @@ <h2 id="nested-focusgroups">Nested Focusgroups</h2>
     <section class="demo-section">
       <h2 id="opt-out-segments-with-focusgroup-none">Opt-Out Segments with <code>focusgroup="none"</code></h2>
       <p>
-        Use <code>focusgroup="none"</code> to exclude specific elements
-        from arrow navigation
-        while keeping them tabbable. Arrow keys skip right over them.
+        Use <code>focusgroup="none"</code> to exclude a subtree's focusable
+        descendants from arrow navigation while keeping them reachable
+        via <kbd>Tab</kbd>.
       </p>
-      <div class="attr-label">focusgroup="toolbar inline"</div>
+      <div class="attr-label" aria-hidden="true">focusgroup="toolbar"</div>
 
       <div class="try-it">
         <strong>Try it:</strong> Use <kbd>→</kbd> to navigate through
@@ -104,13 +103,13 @@ <h2 id="opt-out-segments-with-focusgroup-none">Opt-Out Segments with <code>focus
       </div>
 
       <div class="demo-container">
-        <div focusgroup="toolbar inline" aria-label="Segmented toolbar" class="toolbar-horizontal">
+        <div focusgroup="toolbar" aria-label="Segmented toolbar" class="toolbar-horizontal">
           <button type="button">New</button>
           <button type="button">Open</button>
           <button type="button">Save</button>
-          <span focusgroup="none" style="display: contents;">
-            <button type="button" style="opacity: 0.6;">Help</button>
-            <button type="button" style="opacity: 0.6;">Shortcuts</button>
+          <span focusgroup="none">
+            <button type="button" class="opted-out-button">Help</button>
+            <button type="button" class="opted-out-button">Shortcuts</button>
           </span>
           <button type="button">Close</button>
           <button type="button">Exit</button>
@@ -128,14 +127,14 @@ <h2 id="opt-out-segments-with-focusgroup-none">Opt-Out Segments with <code>focus
 
       <details class="source-code">
         <summary>View source</summary>
-        <pre><code>&lt;div focusgroup="toolbar inline"
-     aria-label="Segmented toolbar"&gt;
+        <pre><code>&lt;div focusgroup="toolbar"
+     aria-label="Segmented toolbar" class="toolbar-horizontal"&gt;
     &lt;button type="button"&gt;New&lt;/button&gt;
     &lt;button type="button"&gt;Open&lt;/button&gt;
     &lt;button type="button"&gt;Save&lt;/button&gt;
     &lt;span focusgroup="none"&gt;
-        &lt;button type="button"&gt;Help&lt;/button&gt;
-        &lt;button type="button"&gt;Shortcuts&lt;/button&gt;
+        &lt;button type="button" class="opted-out-button"&gt;Help&lt;/button&gt;
+        &lt;button type="button" class="opted-out-button"&gt;Shortcuts&lt;/button&gt;
     &lt;/span&gt;
     &lt;button type="button"&gt;Close&lt;/button&gt;
     &lt;button type="button"&gt;Exit&lt;/button&gt;
@@ -144,27 +143,27 @@ <h2 id="opt-out-segments-with-focusgroup-none">Opt-Out Segments with <code>focus
     </section>
 
     <!-- ============================================================ -->
-    <!-- Demo 3: Deep Descendant Discovery -->
+    <!-- Demo 3: Deep Descendants -->
     <!-- ============================================================ -->
     <section class="demo-section">
-      <h2 id="deep-descendant-discovery">Deep Descendant Discovery</h2>
+      <h2 id="deep-descendant-discovery">Deep Descendants</h2>
       <p>
         Focusgroup items don't need to be direct children. The browser
         discovers focusable
         descendants at any depth (unless they are inside a nested
         focusgroup or <code>focusgroup="none"</code>).
       </p>
-      <div class="attr-label">focusgroup="toolbar inline"</div>
+      <div class="attr-label" aria-hidden="true">focusgroup="toolbar"</div>
 
       <div class="try-it">
-        <strong>Try it:</strong> Use <kbd>→</kbd> <kbd>←</kbd> — arrow
-        navigation works even though buttons are deeply nested
+        <strong>Try it:</strong> Use <kbd>→</kbd> <kbd>←</kbd> to
+        navigate. Arrow navigation works even though buttons are deeply nested
         inside <code>&lt;div&gt;</code> and
         <code>&lt;span&gt;</code> wrappers.
       </div>
 
       <div class="demo-container">
-        <div focusgroup="toolbar inline" aria-label="Nested wrappers" class="toolbar-horizontal">
+        <div focusgroup="toolbar" aria-label="Nested wrappers" class="toolbar-horizontal">
           <div>
             <span><button type="button">Alpha</button></span>
             <span><button type="button">Beta</button></span>
@@ -174,24 +173,18 @@ <h2 id="deep-descendant-discovery">Deep Descendant Discovery</h2>
       </div>
 
       <ul class="notice-list">
-        <li>Buttons are nested inside
-          <code>&lt;div&gt;&lt;span&gt;</code> wrappers
-        </li>
-        <li>Focusgroup discovers them at any depth in the DOM tree</li>
-        <li>No flat list requirement — wrapper elements for styling are
+        <li>No flat list requirement; wrapper elements for styling are
           fine</li>
       </ul>
 
       <details class="source-code">
         <summary>View source</summary>
-        <pre><code>&lt;div focusgroup="toolbar inline"
-     aria-label="Nested wrappers"&gt;
+        <pre><code>&lt;div focusgroup="toolbar"
+     aria-label="Nested wrappers" class="toolbar-horizontal"&gt;
     &lt;div&gt;
-        &lt;span&gt;&lt;button
-             type="button"&gt;Alpha&lt;/button&gt;&lt;/span&gt;
+        &lt;span&gt;&lt;button type="button"&gt;Alpha&lt;/button&gt;&lt;/span&gt;
         &lt;span&gt;&lt;button type="button"&gt;Beta&lt;/button&gt;&lt;/span&gt;
-        &lt;span&gt;&lt;button
-             type="button"&gt;Gamma&lt;/button&gt;&lt;/span&gt;
+        &lt;span&gt;&lt;button type="button"&gt;Gamma&lt;/button&gt;&lt;/span&gt;
     &lt;/div&gt;
 &lt;/div&gt;</code></pre>
       </details>
@@ -203,14 +196,12 @@ <h2 id="deep-descendant-discovery">Deep Descendant Discovery</h2>
     <section class="demo-section">
       <h2 id="css-reading-flow-integration">CSS <code>reading-flow</code> Integration</h2>
       <p>
-        When CSS changes the visual order (e.g., <code>flex-direction:
-                    row-reverse</code>),
-        <code>reading-flow: flex-visual</code> tells the focusgroup to
-        follow the <strong>visual</strong>
-        order rather than the DOM source order.
+        When <code>reading-flow: flex-visual</code> is set, the browser
+        uses the visual flex order for all focus navigation,
+        including <code>focusgroup</code> arrow keys, rather than
+        DOM source order.
       </p>
-      <div class="attr-label">focusgroup="toolbar" + reading-flow:
-        flex-visual</div>
+      <div class="attr-label" aria-hidden="true">focusgroup="toolbar" + reading-flow: flex-visual</div>
 
       <div class="try-it">
         <strong>Try it:</strong> Use <kbd>→</kbd> to navigate. With
@@ -220,31 +211,26 @@ <h2 id="css-reading-flow-integration">CSS <code>reading-flow</code> Integration<
       </div>
 
       <div class="demo-container">
-        <div focusgroup="toolbar" aria-label="Visual order" style="display: flex; flex-direction: row-reverse;
-                         reading-flow: flex-visual; gap: 0.35rem;">
+        <div focusgroup="toolbar" aria-label="Visual order" class="reading-flow-toolbar">
           <button type="button">A (DOM first)</button>
           <button type="button">B (DOM second)</button>
           <button type="button">C (DOM third)</button>
         </div>
       </div>
 
       <ul class="notice-list">
-        <li>DOM order: A, B, C — but <code>flex-direction:
-                    row-reverse</code> visually renders C, B, A</li>
-        <li><code>reading-flow: flex-visual</code> tells focusgroup to
-          follow visual order</li>
+        <li><code>reading-flow: flex-visual</code> makes the browser use
+          visual flex order for focus navigation (Tab and arrow keys)</li>
         <li>Right arrow from C goes to B, then A (visual
           left-to-right)</li>
-        <li>Without <code>reading-flow</code>, arrow keys would follow
-          DOM order (A → B → C), which is visually backwards</li>
+        <li>Without <code>reading-flow</code>, arrow keys follow
+          DOM order (A → B → C)</li>
       </ul>
 
       <details class="source-code">
         <summary>View source</summary>
-        <pre><code>&lt;div focusgroup="toolbar" aria-label="Visual
-     order"
-     style="display: flex; flex-direction: row-reverse;
-            reading-flow: flex-visual;"&gt;
+        <pre><code>&lt;div focusgroup="toolbar" aria-label="Visual order"
+     class="reading-flow-toolbar"&gt;
     &lt;button type="button"&gt;A (DOM first)&lt;/button&gt;
     &lt;button type="button"&gt;B (DOM second)&lt;/button&gt;
     &lt;button type="button"&gt;C (DOM third)&lt;/button&gt;
@@ -265,17 +251,17 @@ <h2 id="feature-detection">Feature Detection</h2>
       </p>
 
       <div class="demo-container">
-        <div id="feature-detect-result" style="padding: 0.75rem; border-radius: 4px;"></div>
+        <div id="feature-detect-result"></div>
       </div>
 
       <details class="source-code">
         <summary>View source</summary>
         <pre><code>&lt;script&gt;
 if ('focusgroup' in HTMLElement.prototype) {
-    // focusgroup is supported — use it!
+    // focusgroup is supported - use it!
     console.log('focusgroup is supported');
 } else {
-    // Not supported — fall back to JS roving tabindex
+    // Not supported - fall back to JS roving tabindex
     console.log('focusgroup is NOT supported');
 }
 &lt;/script&gt;</code></pre>
@@ -291,13 +277,11 @@ <h2 id="feature-detection">Feature Detection</h2>
       var result = document.getElementById("feature-detect-result");
       if (!result) return;
       if ("focusgroup" in HTMLElement.prototype) {
-        result.textContent = "✅ focusgroup IS supported in this
-        browser.";
+        result.textContent = "✅ focusgroup IS supported in this browser.";
         result.style.background = "var(--accent-light)";
         result.style.color = "var(--success)";
       } else {
-        result.textContent = "❌ focusgroup is NOT supported in this
-        browser.Enable experimental flags to try these demos.";
+        result.textContent = "❌ focusgroup is NOT supported in this browser. Enable experimental flags to try these demos.";
         result.style.background = "var(--warning-bg)";
         result.style.color = "var(--warning-text)";
       }