apg/spinbutton-redesign generated by aria-practices

ARIA/apg/index/index.md

@@ -214,7 +214,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
                 <li><a href="../patterns/listbox/examples/listbox-grouped/">Listbox  with Grouped Options</a></li>
                 <li><a href="../patterns/menubar/examples/menubar-editor/">Editor Menubar</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
                 <li><a href="../patterns/slider/examples/slider-color-viewer/">Color Viewer Slider</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
-                <li><a href="../patterns/spinbutton/examples/datepicker-spinbuttons/">Date Picker Spin Button</a></li>
+                <li><a href="../patterns/spinbutton/examples/datepicker-spinbuttons/">(Deprecated) Date Picker Spin Button</a></li>
                 <li><a href="../patterns/switch/examples/switch-button/">Switch  Using HTML Button</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
                 <li><a href="../patterns/treeview/examples/treeview-1a/">File Directory Treeview  Using Computed Properties</a></li>
                 <li><a href="../patterns/treeview/examples/treeview-1b/">File Directory Treeview  Using Declared Properties</a></li>
@@ -409,7 +409,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
             <td><code>spinbutton</code></td>
             <td>
               <ul>
-                <li><a href="../patterns/spinbutton/examples/datepicker-spinbuttons/">Date Picker Spin Button</a></li>
+                <li><a href="../patterns/spinbutton/examples/datepicker-spinbuttons/">(Deprecated) Date Picker Spin Button</a></li>
+                <li><a href="../patterns/spinbutton/examples/quantity-spinbutton/">Quantity Spin Button</a></li>
                 <li><a href="../patterns/toolbar/examples/toolbar/">Toolbar</a></li>
               </ul>
             </td>
@@ -583,6 +584,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
                 <li><a href="../patterns/menu-button/examples/menu-button-actions-active-descendant/">Actions Menu Button  Using aria-activedescendant</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
                 <li><a href="../patterns/menu-button/examples/menu-button-actions/">Actions Menu Button  Using element.focus()</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
                 <li><a href="../patterns/menu-button/examples/menu-button-links/">Navigation Menu Button</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
+                <li><a href="../patterns/spinbutton/examples/quantity-spinbutton/">Quantity Spin Button</a></li>
                 <li><a href="../patterns/tabs/examples/tabs-automatic/">Tabs with Automatic Activation</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
                 <li><a href="../patterns/tabs/examples/tabs-manual/">Tabs with Manual Activation</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
                 <li><a href="../patterns/toolbar/examples/toolbar/">Toolbar</a></li>
@@ -620,10 +622,15 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
               <ul>
                 <li><a href="../patterns/alertdialog/examples/alertdialog/">Alert Dialog</a></li>
                 <li><a href="../patterns/menubar/examples/menubar-editor/">Editor Menubar</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
+                <li><a href="../patterns/spinbutton/examples/quantity-spinbutton/">Quantity Spin Button</a></li>
                 <li><a href="../patterns/toolbar/examples/toolbar/">Toolbar</a></li>
               </ul>
             </td>
           </tr>
+          <tr>
+            <td><code>aria-errormessage</code></td>
+            <td><a href="../patterns/spinbutton/examples/quantity-spinbutton/">Quantity Spin Button</a></td>
+          </tr>
           <tr>
             <td><code>aria-expanded</code></td>
             <td>
@@ -684,7 +691,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
                 <li><a href="../patterns/slider/examples/slider-rating/">Rating Slider</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
                 <li><a href="../patterns/slider/examples/slider-seek/">Media Seek Slider</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
                 <li><a href="../patterns/slider/examples/slider-temperature/">Vertical Temperature Slider</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
-                <li><a href="../patterns/spinbutton/examples/datepicker-spinbuttons/">Date Picker Spin Button</a></li>
+                <li><a href="../patterns/spinbutton/examples/datepicker-spinbuttons/">(Deprecated) Date Picker Spin Button</a></li>
+                <li><a href="../patterns/spinbutton/examples/quantity-spinbutton/">Quantity Spin Button</a></li>
                 <li><a href="../patterns/switch/examples/switch-button/">Switch  Using HTML Button</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
                 <li><a href="../patterns/switch/examples/switch-checkbox/">Switch  Using HTML Checkbox Input</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
                 <li><a href="../patterns/switch/examples/switch/">Switch</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
@@ -693,6 +701,10 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
               </ul>
             </td>
           </tr>
+          <tr>
+            <td><code>aria-invalid</code></td>
+            <td><a href="../patterns/spinbutton/examples/quantity-spinbutton/">Quantity Spin Button</a></td>
+          </tr>
           <tr>
             <td><code>aria-label</code></td>
             <td>
@@ -710,7 +722,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
                 <li><a href="../patterns/menubar/examples/menubar-navigation/">Navigation Menubar</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
                 <li><a href="../patterns/radio/examples/radio-rating/">Rating Radio Group</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
                 <li><a href="../patterns/slider-multithumb/examples/slider-multithumb/">Horizontal Multi-Thumb Slider</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
-                <li><a href="../patterns/spinbutton/examples/datepicker-spinbuttons/">Date Picker Spin Button</a></li>
+                <li><a href="../patterns/spinbutton/examples/datepicker-spinbuttons/">(Deprecated) Date Picker Spin Button</a></li>
                 <li><a href="../patterns/table/examples/table/">Table</a></li>
                 <li><a href="../patterns/toolbar/examples/toolbar/">Toolbar</a></li>
                 <li><a href="../patterns/treegrid/examples/treegrid-1/">Treegrid Email Inbox</a></li>
@@ -749,7 +761,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
                 <li><a href="../patterns/slider/examples/slider-rating/">Rating Slider</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
                 <li><a href="../patterns/slider/examples/slider-seek/">Media Seek Slider</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
                 <li><a href="../patterns/slider/examples/slider-temperature/">Vertical Temperature Slider</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
-                <li><a href="../patterns/spinbutton/examples/datepicker-spinbuttons/">Date Picker Spin Button</a></li>
+                <li><a href="../patterns/spinbutton/examples/datepicker-spinbuttons/">(Deprecated) Date Picker Spin Button</a></li>
                 <li><a href="../patterns/switch/examples/switch-button/">Switch  Using HTML Button</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
                 <li><a href="../patterns/tabs/examples/tabs-automatic/">Tabs with Automatic Activation</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
                 <li><a href="../patterns/tabs/examples/tabs-manual/">Tabs with Manual Activation</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
@@ -908,7 +920,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
                 <li><a href="../patterns/slider/examples/slider-rating/">Rating Slider</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
                 <li><a href="../patterns/slider/examples/slider-seek/">Media Seek Slider</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
                 <li><a href="../patterns/slider/examples/slider-temperature/">Vertical Temperature Slider</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
-                <li><a href="../patterns/spinbutton/examples/datepicker-spinbuttons/">Date Picker Spin Button</a></li>
+                <li><a href="../patterns/spinbutton/examples/datepicker-spinbuttons/">(Deprecated) Date Picker Spin Button</a></li>
+                <li><a href="../patterns/spinbutton/examples/quantity-spinbutton/">Quantity Spin Button</a></li>
                 <li><a href="../patterns/toolbar/examples/toolbar/">Toolbar</a></li>
               </ul>
             </td>
@@ -923,7 +936,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
                 <li><a href="../patterns/slider/examples/slider-rating/">Rating Slider</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
                 <li><a href="../patterns/slider/examples/slider-seek/">Media Seek Slider</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
                 <li><a href="../patterns/slider/examples/slider-temperature/">Vertical Temperature Slider</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
-                <li><a href="../patterns/spinbutton/examples/datepicker-spinbuttons/">Date Picker Spin Button</a></li>
+                <li><a href="../patterns/spinbutton/examples/datepicker-spinbuttons/">(Deprecated) Date Picker Spin Button</a></li>
+                <li><a href="../patterns/spinbutton/examples/quantity-spinbutton/">Quantity Spin Button</a></li>
                 <li><a href="../patterns/toolbar/examples/toolbar/">Toolbar</a></li>
               </ul>
             </td>
@@ -938,7 +952,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
                 <li><a href="../patterns/slider/examples/slider-rating/">Rating Slider</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
                 <li><a href="../patterns/slider/examples/slider-seek/">Media Seek Slider</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
                 <li><a href="../patterns/slider/examples/slider-temperature/">Vertical Temperature Slider</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
-                <li><a href="../patterns/spinbutton/examples/datepicker-spinbuttons/">Date Picker Spin Button</a></li>
+                <li><a href="../patterns/spinbutton/examples/datepicker-spinbuttons/">(Deprecated) Date Picker Spin Button</a></li>
+                <li><a href="../patterns/spinbutton/examples/quantity-spinbutton/">Quantity Spin Button</a></li>
                 <li><a href="../patterns/toolbar/examples/toolbar/">Toolbar</a></li>
               </ul>
             </td>
@@ -950,7 +965,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
                 <li><a href="../patterns/slider/examples/slider-rating/">Rating Slider</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
                 <li><a href="../patterns/slider/examples/slider-seek/">Media Seek Slider</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
                 <li><a href="../patterns/slider/examples/slider-temperature/">Vertical Temperature Slider</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
-                <li><a href="../patterns/spinbutton/examples/datepicker-spinbuttons/">Date Picker Spin Button</a></li>
+                <li><a href="../patterns/spinbutton/examples/datepicker-spinbuttons/">(Deprecated) Date Picker Spin Button</a></li>
                 <li><a href="../patterns/toolbar/examples/toolbar/">Toolbar</a></li>
               </ul>
             </td>

ARIA/apg/patterns/spinbutton/examples/datepicker-spinbuttons.md

@@ -1,6 +1,6 @@
 ---
 # This file was generated by scripts/pre-build/library/formatForJekyll.js
-title: "Date Picker Spin Button Example"
+title: "(Deprecated) Date Picker Spin Button Example"
 ref: /ARIA/apg/patterns/spinbutton/examples/datepicker-spinbuttons/
 
 github:
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/spinbutton/examples/datepicker-spinbuttons/
 
 sidebar: true
 
-footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/orgs/w3c/projects/143'>View issues related to this example</a></p>        <p>Page last updated: 12 August 2025</p>      </div>    "
+footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/orgs/w3c/projects/143'>View issues related to this example</a></p>        <p>Page last updated: 8 September 2025</p>      </div>    "
 
 # Context here: https://github.com/w3c/wai-aria-practices/issues/31
 type_of_guidance: APG
@@ -21,7 +21,7 @@ lang: en
 ---
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-<title>Date Picker Spin Button Example</title>
+<title>(Deprecated) Date Picker Spin Button Example</title>
 
 <script src="../../../../../../content-assets/wai-aria-practices/shared/js/examples.js"></script>
 <script src="../../../../../../content-assets/wai-aria-practices/shared/js/highlight.pack.js"></script>
@@ -99,6 +99,13 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
 
       <section>
         <h2>About This Example</h2>
+        <div class="advisement">
+          <h3>Deprecation Warning</h3>
+          <p>
+            This pattern has been deprecated, and will be removed in a future version of the ARIA Authoring Practices.
+            The <a href="../quantity-spinbutton/">Quantity Spin Button</a> should be used as an alternative to this pattern.
+          </p>
+        </div>
         <img alt class="example-page-example-icon" src="../../../../../../content-images/wai-aria-practices/images/pattern-spinbutton.svg">
         <p>
           The following example uses the <a href="../../">Spin Button Pattern</a> to implement a date picker.