chore: Update branch with latest spinbutton-redesign changes and su…

…bmodule updates

ARIA/apg/index/index.md

@@ -415,10 +415,6 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
               </ul>
             </td>
           </tr>
-          <tr>
-            <td><code>status</code></td>
-            <td><a href="../patterns/spinbutton/examples/quantity-spinbutton/">Quantity Spin Button</a></td>
-          </tr>
           <tr>
             <td><code>switch</code></td>
             <td>

ARIA/apg/patterns/spinbutton/examples/quantity-spinbutton.md

@@ -152,10 +152,9 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
                       <span aria-hidden="true">&plus;</span>
                     </button>
                   </div>
-                  <div role="status"
-                    for="adults"
+                  <output for="adults"
                     data-self-destruct="2000"
-                    class="visually-hidden"></div>
+                    class="visually-hidden"></output>
                 </div>
                 <div class="spinner-field">
                   <label for="kids">
@@ -191,10 +190,9 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
                       <span aria-hidden="true">&plus;</span>
                     </button>
                   </div>
-                  <div role="status"
-                    for="kids"
+                  <output for="kids"
                     data-self-destruct="2000"
-                    class="visually-hidden"></div>
+                    class="visually-hidden"></output>
                 </div>
                 <div class="spinner-field">
                   <label for="animals">
@@ -230,10 +228,9 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
                       <span aria-hidden="true">&plus;</span>
                     </button>
                   </div>
-                  <div role="status"
-                    for="animals"
+                  <output for="animals"
                     data-self-destruct="2000"
-                    class="visually-hidden"></div>
+                    class="visually-hidden"></output>
                 </div>
               </div>
             </fieldset>
@@ -424,15 +421,15 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
               <td><code>span</code></td>
               <td>For assistive technology users, hides the visible minus and plus characters in the increment and decrement buttons since they are symbolic of the superior button labels provided by the <code>title</code> attribute.</td>
             </tr>
-            <tr data-test-id="status-role">
-              <th scope="row"><code>status</code></th>
+            <tr data-test-id="output">
               <td></td>
-              <td><code>div</code></td>
+              <td></td>
+              <td><code>output</code></td>
               <td>
                 <ul>
-                  <li>Identifies the invisible <code>div</code> as a <code>status</code> element with an implicit <code>aria-live</code> value of <code>polite</code>.</li>
-                  <li>Triggers a screen reader announcement of the <code>status</code> element’s updated content at the next graceful opportunity.</li>
-                  <li>When either the increment or decrement button is pressed, the current value of the spin button is injected into the <code>status</code> element.</li>
+                  <li>An element with an implicit role of <code>status</code> and an implicit <code>aria-live</code> value of <code>polite</code>.</li>
+                  <li>Triggers a screen reader announcement of the <code>output</code> element’s updated content at the next graceful opportunity.</li>
+                  <li>When either the increment or decrement button is pressed, the current value of the spin button is injected into the <code>output</code> element.</li>
                   <li>Its contents are emptied 2000 milliseconds after injection.</li>
                 </ul>
               </td>

content-assets/wai-aria-practices/about/coverage-and-quality/role-coverage.csv

@@ -63,7 +63,7 @@
 "separator","0","1","Example: Editor Menubar"
 "slider","2","5","Guidance: Slider (Multi-Thumb) Pattern","Guidance: Slider Pattern","Example: Horizontal Multi-Thumb Slider","Example: Color Viewer Slider","Example: Rating Slider","Example: Media Seek Slider","Example: Vertical Temperature Slider"
 "spinbutton","1","3","Guidance: Spinbutton Pattern","Example: (Deprecated) Date Picker Spin Button","Example: Quantity Spin Button","Example: Toolbar"
-"status","0","1","Example: Quantity Spin Button"
+"status","0","0"
 "switch","1","3","Guidance: Switch Pattern","Example: Switch  Using HTML Button","Example: Switch  Using HTML Checkbox Input","Example: Switch"
 "tab","1","4","Guidance: Keyboard Navigation Between Components (The Tab Sequence)","Example: Auto-Rotating Image Carousel with Tabs for Slide Control","Example: Experimental  Tabs with Action Buttons","Example: Tabs with Automatic Activation","Example: Tabs with Manual Activation"
 "table","2","1","Guidance: Table Pattern","Guidance: Grid and Table Properties","Example: Table"

content-assets/wai-aria-practices/patterns/spinbutton/examples/js/quantity-spinbutton.js

@@ -14,7 +14,7 @@ class SpinButton {
     this.controls = Array.from(
       document.querySelectorAll(`button[aria-controls="${this.id}"]`)
     );
-    this.status = document.querySelector(`[role="status"][for="${this.id}"]`);
+    this.output = document.querySelector(`output[for="${this.id}"]`);
     this.timer = null;
     this.setBounds();
     el.addEventListener('input', () => this.setValue(el.value));
@@ -72,13 +72,13 @@ class SpinButton {
   }
 
   announce() {
-    if (!this.status) return;
-    this.status.textContent = this.el.value;
+    if (!this.output) return;
+    this.output.textContent = this.el.value;
     clearTimeout(this.timer);
     this.timer = setTimeout(() => {
-      this.status.textContent = '';
+      this.output.textContent = '';
       this.timer = null;
-    }, this.status.dataset.selfDestruct || 1000);
+    }, this.output.dataset.selfDestruct || 1000);
   }
 
   handleKey(e) {