Add IDs to section headers for improved accessibility in focusgroup demos

Author: captainbrosset

focusgroup/accordion.html

@@ -25,7 +25,7 @@ <h1>Accordion Pattern</h1>
     <!-- Demo 1: Accordion -->
     <!-- ============================================================ -->
     <section class="demo-section">
-      <h2>Accordion with Opt-Out Panels</h2>
+      <h2 id="accordion-with-opt-out-panels">Accordion with Opt-Out Panels</h2>
       <p>
         Up/Down arrows navigate between accordion headers. Panel
         content is <strong>opted out</strong>
@@ -162,7 +162,7 @@ <h3><button type="button" aria-expanded="false" aria-controls="acc-panel4">Secti
     <!-- Demo 2: Long Content Mitigation -->
     <!-- ============================================================ -->
     <section class="demo-section">
-      <h2>Long Content: A Possible Mitigation</h2>
+      <h2 id="long-content-a-possible-mitigation">Long Content: A Possible Mitigation</h2>
       <p>
         Because focusgroup arrow keys jump directly between headers,
         <strong>long panel content
@@ -363,7 +363,7 @@ <h3><button type="button" aria-expanded="false" aria-controls="long-panel3">When
     </section>
 
     <section class="demo-section">
-      <h2>Key Point: <code>focusgroup="none"</code></h2>
+      <h2 id="key-point-focusgroup-none">Key Point: <code>focusgroup="none"</code></h2>
       <p>
         The <code>none</code> value opts an element and its subtree out
         of the ancestor focusgroup.

focusgroup/additional-concepts.html

@@ -24,7 +24,7 @@ <h1>Additional Concepts</h1>
     <!-- Demo 1: Nested Focusgroups -->
     <!-- ============================================================ -->
     <section class="demo-section">
-      <h2>Nested Focusgroups</h2>
+      <h2 id="nested-focusgroups">Nested Focusgroups</h2>
       <p>
         A nested focusgroup creates an independent navigation scope
         within an outer focusgroup.
@@ -88,7 +88,7 @@ <h2>Nested Focusgroups</h2>
     <!-- Demo 2: Opt-out with focusgroup="none" -->
     <!-- ============================================================ -->
     <section class="demo-section">
-      <h2>Opt-Out Segments with <code>focusgroup="none"</code></h2>
+      <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
@@ -147,7 +147,7 @@ <h2>Opt-Out Segments with <code>focusgroup="none"</code></h2>
     <!-- Demo 3: Deep Descendant Discovery -->
     <!-- ============================================================ -->
     <section class="demo-section">
-      <h2>Deep Descendant Discovery</h2>
+      <h2 id="deep-descendant-discovery">Deep Descendant Discovery</h2>
       <p>
         Focusgroup items don't need to be direct children. The browser
         discovers focusable
@@ -201,7 +201,7 @@ <h2>Deep Descendant Discovery</h2>
     <!-- Demo 4: CSS reading-flow Integration -->
     <!-- ============================================================ -->
     <section class="demo-section">
-      <h2>CSS <code>reading-flow</code> Integration</h2>
+      <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>),
@@ -256,7 +256,7 @@ <h2>CSS <code>reading-flow</code> Integration</h2>
     <!-- Demo 5: Feature Detection -->
     <!-- ============================================================ -->
     <section class="demo-section">
-      <h2>Feature Detection</h2>
+      <h2 id="feature-detection">Feature Detection</h2>
       <p>
         Check whether the browser supports <code>focusgroup</code>
         before relying on it.

focusgroup/index.html

@@ -22,7 +22,7 @@ <h1>Focusgroup: Interactive Demos</h1>
             unsupported -->
 
     <section class="demo-section">
-      <h2>What is <code>focusgroup</code>?</h2>
+      <h2 id="what-is-focusgroup">What is <code>focusgroup</code>?</h2>
       <p>
         The <code>focusgroup</code> HTML attribute lets you add
         arrow-key navigation to groups of
@@ -56,7 +56,7 @@ <h2>What is <code>focusgroup</code>?</h2>
     </section>
 
     <section class="demo-section">
-      <h2>Quick Demo: Try It Now</h2>
+      <h2 id="quick-demo-try-it-now">Quick Demo: Try It Now</h2>
       <p>Click on the first button below, then use <kbd>←</kbd>
         <kbd>→</kbd> arrow keys to navigate. Press <kbd>Tab</kbd> to
         exit.
@@ -82,7 +82,7 @@ <h2>Quick Demo: Try It Now</h2>
     </section>
 
     <section class="demo-section">
-      <h2>Explore the Demos</h2>
+      <h2 id="explore-the-demos">Explore the Demos</h2>
       <p>Each demo page showcases a specific UI pattern with interactive
         examples and source code.</p>
       <nav aria-label="Explore the Demos">
@@ -154,7 +154,7 @@ <h3>Additional Concepts</h3>
     </section>
 
     <section class="demo-section">
-      <h2>Resources</h2>
+      <h2 id="resources">Resources</h2>
       <ul>
         <li><a href="https://open-ui.org/components/scoped-focusgroup.explainer/">
             Scoped Focusgroup Explainer
@@ -168,7 +168,7 @@ <h2>Resources</h2>
     </section>
 
     <section class="demo-section">
-      <h2>Browser Support</h2>
+      <h2 id="browser-support">Browser Support</h2>
       <p>
         The <code>focusgroup</code> attribute is an
         <strong>experimental feature</strong>. At the time

focusgroup/listbox.html

@@ -25,7 +25,7 @@ <h1>Listbox Pattern</h1>
     <!-- Demo 1: Basic Listbox -->
     <!-- ============================================================ -->
     <section class="demo-section">
-      <h2>Single-Select Listbox</h2>
+      <h2 id="single-select-listbox">Single-Select Listbox</h2>
       <p>
         A selectable list of options with Up/Down arrow navigation.
         Click or press
@@ -91,7 +91,7 @@ <h2>Single-Select Listbox</h2>
     <!-- Demo 2: Listbox with wrapping -->
     <!-- ============================================================ -->
     <section class="demo-section">
-      <h2>Listbox with Wrapping</h2>
+      <h2 id="listbox-with-wrapping">Listbox with Wrapping</h2>
       <p>Adding <code>wrap</code> allows navigation to wrap from the last
         item back to the first (and vice versa).</p>
       <div class="attr-label">focusgroup="listbox block wrap"</div>

focusgroup/menu.html

@@ -24,7 +24,7 @@ <h1>Menu &amp; Menubar Pattern</h1>
     <!-- Demo 1: Simple Vertical Menu -->
     <!-- ============================================================ -->
     <section class="demo-section">
-      <h2>Simple Vertical Menu</h2>
+      <h2 id="simple-vertical-menu">Simple Vertical Menu</h2>
       <p>A basic vertical menu with Up/Down arrow navigation.</p>
       <div class="attr-label">focusgroup="menu block"</div>
 
@@ -65,7 +65,7 @@ <h2>Simple Vertical Menu</h2>
     <!-- Demo 2: Menubar with Popover Submenus -->
     <!-- ============================================================ -->
     <section class="demo-section">
-      <h2>Menubar with Popover Submenus</h2>
+      <h2 id="menubar-with-popover-submenus">Menubar with Popover Submenus</h2>
       <p>
         A horizontal menubar using <code>inline</code> for Left/Right
         navigation between top-level items.
@@ -161,7 +161,7 @@ <h2>Menubar with Popover Submenus</h2>
     </section>
 
     <section class="demo-section">
-      <h2>Key Point: Independent Nested Scopes</h2>
+      <h2 id="key-points-independent-nested-scopes">Key Point: Independent Nested Scopes</h2>
       <p>
         When a focusgroup is nested inside another, they are
         <strong>completely independent</strong>.

focusgroup/radiogroup.html

@@ -25,7 +25,7 @@ <h1>Radio Group Pattern</h1>
     <!-- Comparison: Native vs. Focusgroup Radio Group -->
     <!-- ============================================================ -->
     <section class="demo-section">
-      <h2>Comparison: Native vs. Focusgroup</h2>
+      <h2 id="comparison-native-vs-focusgroup">Comparison: Native vs. Focusgroup</h2>
       <p>
         Side-by-side comparison showing that a <code>focusgroup</code>
         radio group
@@ -102,7 +102,7 @@ <h3>Focusgroup Radio Group</h3>
     </section>
 
     <section class="demo-section">
-      <h2>Key Point: Navigation ≠ Selection</h2>
+      <h2 id="key-point-navigation-selection">Key Point: Navigation ≠ Selection</h2>
       <p>
         With native <code>&lt;input type="radio"&gt;</code>, moving
         focus with arrows also selects the option.

focusgroup/tablist.html

@@ -24,7 +24,7 @@ <h1>Tablist Pattern</h1>
     <!-- Demo 1: Horizontal Tablist -->
     <!-- ============================================================ -->
     <section class="demo-section">
-      <h2>Horizontal Tablist with Wrapping</h2>
+      <h2 id="horizontal-tablist-with-wrapping">Horizontal Tablist with Wrapping</h2>
       <p>
         A tab control using <code>focusgroup</code> for arrow-key
         navigation. The <code>wrap</code>
@@ -124,7 +124,7 @@ <h3>FAQ</h3>
     <!-- Demo 2: Vertical Tablist -->
     <!-- ============================================================ -->
     <section class="demo-section">
-      <h2>Vertical Tablist</h2>
+      <h2 id="vertical-tablist">Vertical Tablist</h2>
       <p>A vertical tablist using <code>block</code> axis for Up/Down
         arrow navigation.</p>
       <div class="attr-label">focusgroup="tablist block wrap
@@ -198,7 +198,7 @@ <h3>Advanced Settings</h3>
     <!-- Demo 3: Long Content Mitigation -->
     <!-- ============================================================ -->
     <section class="demo-section">
-      <h2>Long Content: A Possible Mitigation</h2>
+      <h2 id="long-content-a-possible-mitigation">Long Content: A Possible Mitigation</h2>
       <p>
         Because tabs use selection-follows-focus, <strong>arrowing
           between tabs instantly
@@ -360,7 +360,7 @@ <h3>When To Use This Pattern</h3>
     </section>
 
     <section class="demo-section">
-      <h2>Key Point: Navigation vs. Selection</h2>
+      <h2 id="key-point-navigation-vs-selection">Key Point: Navigation vs. Selection</h2>
       <p>
         <code>focusgroup</code> handles <strong>keyboard navigation
           only</strong>. It does not manage

focusgroup/toolbar.html

@@ -25,7 +25,7 @@ <h1>Toolbar Pattern</h1>
     <!-- Demo 1: Basic Toolbar -->
     <!-- ============================================================ -->
     <section class="demo-section">
-      <h2>Basic Toolbar</h2>
+      <h2 id="basic-toolbar">Basic Toolbar</h2>
       <p>A simple horizontal toolbar. All buttons are natively focusable
         — <code>focusgroup</code> makes the group a single tab stop
         with arrow-key navigation.</p>
@@ -71,7 +71,7 @@ <h2>Basic Toolbar</h2>
     <!-- Demo 2: No Tabindex Needed -->
     <!-- ============================================================ -->
     <section class="demo-section">
-      <h2>No <code>tabindex</code> Management Needed</h2>
+      <h2 id="no-tabindex-management-needed">No <code>tabindex</code> Management Needed</h2>
       <p>With <code>focusgroup</code>, you don't need to set or manage
         <code>tabindex</code> on any items. The browser automatically
         collapses all focusable children into a single tab stop — no
@@ -122,7 +122,7 @@ <h2>No <code>tabindex</code> Management Needed</h2>
     <!-- Demo 3: Entry Point with focusgroupstart -->
     <!-- ============================================================ -->
     <section class="demo-section">
-      <h2>Entry Point with <code>focusgroupstart</code></h2>
+      <h2 id="entry-point-with-focusgroupstart">Entry Point with <code>focusgroupstart</code></h2>
       <p>The <code>focusgroupstart</code> attribute marks which element
         receives focus when you Tab into the group. Both Tab and
         Shift+Tab land on this element.</p>
@@ -167,7 +167,7 @@ <h2>Entry Point with <code>focusgroupstart</code></h2>
     <!-- Demo 4: Vertical Toolbar -->
     <!-- ============================================================ -->
     <section class="demo-section">
-      <h2>Vertical Toolbar</h2>
+      <h2 id="vertical-toolbar">Vertical Toolbar</h2>
       <p>Use <code>block</code> instead of <code>inline</code> to
         restrict navigation to the vertical axis (Up/Down arrows
         only).</p>