Skip to content

apg/spinbutton-redesign generated by aria-practices #424

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
w3cgruntbot wants to merge 20 commits into from
Closed

apg/spinbutton-redesign generated by aria-practices #424

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
20 commits
Select commit Hold shift + click to select a range
3c74836
chore: Update branch with latest `spinbutton-redesign` changes and su…
w3cgruntbot Aug 5, 2025
ac87b83
chore: Update branch with latest `spinbutton-redesign` changes and su…
w3cgruntbot Aug 5, 2025
6a36817
chore: Update branch with latest `spinbutton-redesign` changes and su…
w3cgruntbot Aug 5, 2025
065d2cd
chore: Update branch with latest `spinbutton-redesign` changes and su…
w3cgruntbot Aug 5, 2025
d674097
chore: Update branch with latest `spinbutton-redesign` changes and su…
w3cgruntbot Aug 5, 2025
135f65f
chore: Update branch with latest `spinbutton-redesign` changes and su…
w3cgruntbot Aug 5, 2025
386e21f
chore: Update branch with latest `spinbutton-redesign` changes and su…
w3cgruntbot Aug 5, 2025
1e3c536
chore: Update branch with latest `spinbutton-redesign` changes and su…
w3cgruntbot Aug 8, 2025
c8db311
chore: Update branch with latest `spinbutton-redesign` changes and su…
w3cgruntbot Aug 8, 2025
e2d27dc
chore: Update branch with latest `spinbutton-redesign` changes and su…
w3cgruntbot Aug 9, 2025
3c47a76
chore: Update branch with latest `spinbutton-redesign` changes and su…
w3cgruntbot Sep 10, 2025
6a5d635
chore: Update branch with latest `spinbutton-redesign` changes and su…
w3cgruntbot Sep 10, 2025
fd3fcfc
chore: Update branch with latest `spinbutton-redesign` changes and su…
w3cgruntbot Sep 10, 2025
2ad8f86
chore: Update branch with latest `spinbutton-redesign` changes and su…
w3cgruntbot Sep 16, 2025
b521864
chore: Update branch with latest `spinbutton-redesign` changes and su…
w3cgruntbot Sep 16, 2025
a3286ae
chore: Update branch with latest `spinbutton-redesign` changes and su…
w3cgruntbot Sep 16, 2025
9fd1f8e
chore: Update branch with latest `spinbutton-redesign` changes and su…
w3cgruntbot Sep 16, 2025
ae39880
chore: Update branch with latest `spinbutton-redesign` changes and su…
w3cgruntbot Sep 16, 2025
a7f2e9b
chore: Update branch with latest `spinbutton-redesign` changes and su…
w3cgruntbot Sep 17, 2025
c391b72
chore: Update branch with latest `spinbutton-redesign` changes and su…
w3cgruntbot Sep 18, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
chore: Update branch with latest spinbutton-redesign changes and su… 
…bmodule updates
  • Loading branch information
@w3cgruntbot
w3cgruntbot committed Sep 18, 2025
commit 1e3c536703c3eddfe5a5c89cccda094ab2207972
18 changes: 13 additions & 5 deletions ARIA/apg/index/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -214,6 +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/">(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>
Expand All @@ -240,10 +241,6 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
</ul>
</td>
</tr>
<tr>
<td><code>log</code></td>
<td><a href="../patterns/spinbutton/examples/quantity-spinbutton/">Quantity Spin Button</a></td>
</tr>
<tr>
<td><code>main</code></td>
<td><a href="../patterns/landmarks/examples/main.html">Main Landmark</a></td>
Expand Down Expand Up @@ -412,11 +409,16 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
<td><code>spinbutton</code></td>
<td>
<ul>
<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>
</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>
Expand Down Expand Up @@ -689,6 +691,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/">(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>
Expand All @@ -715,6 +718,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/">(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>
Expand Down Expand Up @@ -753,6 +757,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/">(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>
Expand Down Expand Up @@ -786,7 +791,6 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
<li><a href="../patterns/carousel/examples/carousel-2-tablist/">Auto-Rotating Image Carousel with Tabs for Slide Control</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
<li><a href="../patterns/combobox/examples/combobox-datepicker/">Date Picker Combobox</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
<li><a href="../patterns/dialog-modal/examples/datepicker-dialog/">Date Picker Dialog</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
<li><a href="../patterns/spinbutton/examples/quantity-spinbutton/">Quantity Spin Button</a></li>
</ul>
</td>
</tr>
Expand Down Expand Up @@ -912,6 +916,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/">(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>
Expand All @@ -927,6 +932,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/">(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>
Expand All @@ -942,6 +948,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/">(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>
Expand All @@ -954,6 +961,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/">(Deprecated) Date Picker Spin Button</a></li>
<li><a href="../patterns/toolbar/examples/toolbar/">Toolbar</a></li>
</ul>
</td>
Expand Down
76 changes: 38 additions & 38 deletions ARIA/apg/patterns/spinbutton/examples/quantity-spinbutton.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/spinbutton/examples/quantity-spinbutton/

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: 5 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 August 2025</p> </div> "

# Context here: https://github.com/w3c/wai-aria-practices/issues/31
type_of_guidance: APG
Expand Down Expand Up @@ -152,12 +152,10 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
<span aria-hidden="true">&plus;</span>
</button>
</div>
<output for="adults"
role="log"
aria-live="polite"
aria-relevant="additions"
class="visually-hidden">
</output>
<div role="status"
for="adults"
data-self-destruct="2000"
class="visually-hidden"></div>
</div>
<div class="spinner-field">
<label for="kids">
Expand Down Expand Up @@ -193,7 +191,10 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
<span aria-hidden="true">&plus;</span>
</button>
</div>
<output for="kids" role="log" aria-live="polite" aria-relevant="additions" class="visually-hidden"></output>
<div role="status"
for="kids"
data-self-destruct="2000"
class="visually-hidden"></div>
</div>
<div class="spinner-field">
<label for="animals">
Expand Down Expand Up @@ -229,7 +230,10 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
<span aria-hidden="true">&plus;</span>
</button>
</div>
<output for="animals" role="log" aria-live="polite" aria-relevant="additions" class="visually-hidden"></output>
<div role="status"
for="animals"
data-self-destruct="2000"
class="visually-hidden"></div>
</div>
</div>
</fieldset>
Expand All @@ -248,7 +252,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
<li>
The spin button input and its adjacent buttons are visually
presented as a singular form field containing an editable value, an
increase operation, and a decrease operation.
<span data-test-id="increment-button">increment button</span>, and a
<span data-test-id="decrement-button">decrement button</span>.
</li>
<li>
When either the spin button input or its adjacent buttons have
Expand All @@ -260,7 +265,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
focus indicator appears with subtle animation to draw attention.
</li>
<li>
The increase and decrease buttons:
The increment and decrement buttons:
<ul>
<li>
Are generously sized for ease of use.
Expand Down Expand Up @@ -327,6 +332,15 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
<th><kbd>End</kbd></th>
<td>Increases to maximum value.</td>
</tr>
<tr data-test-id="standard-single-line-editing-keys">
<th>Standard single line text editing keys</th>
<td>
<ul>
<li>Keys used for cursor movement and text manipulation, such as <kbd>Delete</kbd> and <kbd>Shift</kbd> + <kbd>Right Arrow</kbd>.</li>
<li>An HTML <code>input</code> with <code>type="text"</code> is used for the spin button so the browser will provide platform-specific editing keys.</li>
</ul>
</td>
</tr>
</tbody>
</table></div>
</section>
Expand Down Expand Up @@ -370,18 +384,13 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
<td></td>
<th scope="row"><code>aria-valuemax="NUMBER"</code></th>
<td><code>input[type="text"]</code></td>
<td>
<ul>
<li>Indicates the maximum allowed value for the spin button.</li>
<li>For the <q>Day</q> spin button, this property is updated based on the value of the <q>Month</q> spin button.</li>
</ul>
</td>
<td>Indicates the maximum allowed value for the spin button.</td>
</tr>
<tr data-test-id="button-title">
<td></td>
<th scope="row"><code>title="NAME_STRING"</code></th>
<td><code>button</code></td>
<td>Defines the accessible name for each increase and decrease button (<q>Remove adult</q>, <q>Add adult</q>, <q>Remove kid</q>, <q>Add kid</q>, <q>Remove animal</q>, and <q>Add animal</q>).</td>
<td>Defines the accessible name for each increment and decrement button (<q>Remove adult</q>, <q>Add adult</q>, <q>Remove kid</q>, <q>Add kid</q>, <q>Remove animal</q>, and <q>Add animal</q>).</td>
</tr>
<tr data-test-id="button-aria-controls">
<td></td>
Expand All @@ -395,15 +404,15 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
<td></td>
<th scope="row"><code>tabindex="-1"</code></th>
<td><code>button</code></td>
<td>Removes the decrease and increase buttons from the page <kbd>Tab</kbd> sequence while keeping them focusable so they can be accessed with touch-based and voice-based assistive technologies.</td>
<td>Removes the increment and decrement buttons from the page <kbd>Tab</kbd> sequence while keeping them focusable so they can be accessed with touch-based and voice-based assistive technologies.</td>
</tr>
<tr data-test-id="button-aria-disabled">
<tr>
<td></td>
<th scope="row"><code>aria-disabled="true"</code></th>
<td><code>button</code></td>
<td>Set when the minimum or maximum value has been reached to inform assistive technologies that the button has been disabled.</td>
</tr>
<tr data-test-id="button-aria-disabled">
<tr>
<td></td>
<th scope="row"><code>aria-disabled="false"</code></th>
<td><code>button</code></td>
Expand All @@ -413,27 +422,18 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
<td></td>
<th scope="row"><code>aria-hidden="true"</code></th>
<td><code>span</code></td>
<td>For assistive technology users, hides the visible minus and plus characters in the decrease and increase buttons since they are symbolic of the superior button labels provided by the <code>title</code> attribute.</td>
</tr>
<tr data-test-id="log-role">
<th scope="row"><code>log</code></th>
<td></td>
<td><code>output</code></td>
<td>Identifies the invisible <code>output</code> element as a <code>log</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="log-aria-live">
<tr data-test-id="status-role">
<th scope="row"><code>status</code></th>
<td></td>
<th scope="row">
<code>aria-live="polite"</code>
</th>
<td>
<code>output</code>
</td>
<td><code>div</code></td>
<td>
<ul>
<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 increase or decrease button is pressed, the current value of the spin button is injected into the <code>output</code> element.</li>
<li>In keeping with the <code>log</code> role of the <code>output</code>, its contents are emptied 3 seconds after injection.</li>
<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>Its contents are emptied 2000 milliseconds after injection.</li>
</ul>
</td>
</tr>
Expand Down
Loading