Add “Quantity Spin Button” pattern example

[adampage]

Resolves #3261.

Also resolves #2241, #2238, #1837, #1655, and #1188.

---

WAI Preview Link (Last built on Sat, 09 Aug 2025 01:22:28 GMT).

Mobile review - Siri
Visual design review - Arie

[adampage]

Heya @mcking65, just putting this preliminary draft PR on your radar.

I still have some linting errors to investigate and tests to write, but I think we could start doing some peer reviews on the premise, design, and approach of the Quantity Spin Button example itself.

[css-meeting-bot]

The ARIA Authoring Practices (APG) Task Force just discussed PR 3328: Add Quantity Spin Button.

The full IRC log of that discussion

<jugglinmike> Topic: PR 3328: Add Quantity Spin Button
<jugglinmike> github: https://github.com//pull/3328
<jugglinmike> Adam_Page: So this kicked off a couple weeks ago when someone filed an issue. They challenged us on a WCAG-non-conforming target size with our spin button date picker example. And they also pointed out that the ARIA text suggests the use of text input
<jugglinmike> Adam_Page: We decided to replace the example IT's a very traditional spin button that is a numeric field which captures an integer and includes "plus" and "minus" buttons to increment and decrement. It satisfies target size. A keyboard can tab into it and type in a value directly I took care to make sure that voice control works well. The "plus" and "minus" buttons are omitted from the document tab flow, but they are still present in t
<jugglinmike> he accessibility tree
<jugglinmike> Adam_Page: Also a little bit of high-contrast mode finesse
<jugglinmike> Adam_Page: I think that covers it! I also updated the "accessibility features"
<jugglinmike> Matt_King: So you also replaced the date-picker spin button on the "patterns" page
<jugglinmike> Matt_King: With collapsible listbox, we deprecated an example. So we have an editorial precedent for deprecating examples.
<jugglinmike> Matt_King: We could deprecate this or delete it entirely
<jugglinmike> Matt_King: We deprecated that listbox example because we thought people might be using it
<jugglinmike> Matt_King: In this case, though, I don't know if there's value in deprecating versus just deleting
<jugglinmike> Matt_King: The only way to get to that deprecated listbox is via the index
<jugglinmike> Matt_King: We changed the title to say "deprecated" so that the deprecation is apparent even when it appears in the index
<jugglinmike> Matt_King: But the other option is just to remove
<jugglinmike> Matt_King: I don't know which is better in this case
<jugglinmike> Adam_Page: Me neither. I'm just learning about this deprecation pattern
<jugglinmike> Matt_King: I kind of like having a record of deprecation even if we don't think people are using it
<jugglinmike> Matt_King: It's not like we have a lot of deprecated content like this which is acting like baggage...
<jugglinmike> Adam_Page: Yeah, that sounds good to me. I will restore it and add the deprecation message
<jugglinmike> Matt_King: We'll review informally while you make that change, and assign formal reviews next time
<jugglinmike> Adam_Page: Sounds good
<jugglinmike> Matt_King: This is awesome. You delivered quickly and very comprehensively Thank you, Adam_Page!

[css-meeting-bot]

The ARIA Authoring Practices (APG) Task Force just discussed PR 3328: Add Quantity Spin Button.

The full IRC log of that discussion

<jugglinmike> Topic: PR 3328: Add Quantity Spin Button
<jugglinmike> github: https://github.com//pull/3328
<jugglinmike> Adam_Page: After we chatted about this last week, I restored the "date picker" example and put a deprecation warning on it (and ensured that the depcration warning appears on the index page)
<Jem> https://deploy-preview-424--aria-practices.netlify.app/aria/apg/patterns/spinbutton/examples/quantity-spinbutton/#example
<jugglinmike> Adam_Page: I also wrote a whole bunch of tests. I would be very grateful for a review from someone who knows what they are doing because I haven't written many of this kind of Selenium test
<jugglinmike> Matt_King: Did you write tests on roles and states and properties?
<jugglinmike> Adam_Page: Yes
<jugglinmike> jongund: I can review the tests
<jugglinmike> Adam_Page: Awesome, thank you!
<jugglinmike> howard-e: I can review, as well
<jugglinmike> Adam_Page: What about content? Should I do an editorial review?
<jugglinmike> Adam_Page: Yes, please. I haven't made any changes to copy since last week, but my initial push included a lot of copy
<jugglinmike> Matt_King: Do you want to take it out of the "draft" state?
<jugglinmike> Adam_Page: Sure
<jugglinmike> Jem: How do I get the focus on the minus and plus?
<jugglinmike> Adam_Page: You don't
<jugglinmike> Adam_Page: It's because the inputs themselves are focusable. A sighted user would bring focus to the inputs and know that they could either type numbers or use their arrow keys
<jugglinmike> Adam_Page: The minus and plus buttons are present more for mouse users and especially for touch users
<jugglinmike> jongund: That's consistent with the previous example
<jugglinmike> Matt_King: Doesn't the spec say something about not focusing the plus and minus buttons?
<jugglinmike> Adam_Page: It does! I can't remember if it's phrased as "authors MUST" or "authors SHOULD"

[howard-e]

@adampage great stuff, tests look good! Very clear and covering the cases I'd expect. No major blockers here.

I've left a few inline comments below.

[css-meeting-bot]

The ARIA Authoring Practices (APG) Task Force just discussed PR 3328: Add Quantity Spin Button.

The full IRC log of that discussion

<jugglinmike> Topic: PR 3328: Add Quantity Spin Button
<jugglinmike> github: https://github.com//pull/3328
<jugglinmike> Matt_King: We want to get reviewers assigned
<jugglinmike> Adam_Page: I've addressed the failing tests
<jugglinmike> Matt_King: I'm assigned as a reviewer, but we don't have anybody else looking at the code or the visual design
<jugglinmike> Adam_Page: howard-e just gave me a review, but it would be great to have more reviewers
<jugglinmike> arigilmore: I can do a review of the visual design
<jugglinmike> Adam_Page: Thanks, arigilmore
<jugglinmike> Jem: I've assigned arigilmore
<jugglinmike> siri: You can add me, too
<jugglinmike> Matt_King: Great. Siri, if you want to test it on mobile
<jugglinmike> siri: I will try to do it over the weekend
<jugglinmike> Adam_Page: I'm going on vacation starting Wednesday of next week, so if we want to have this ready for the next publication, then I will need review feedback by Tuesday
<jugglinmike> Jem: I'll add a link directly to the example

[shirsha]

https://deploy-preview-424--aria-practices.netlify.app/aria/apg/patterns/spinbutton/examples/quantity-spinbutton/#example - preview link

[ariellalgilmore]

LGTM! Thanks for the update!

[howard-e]

Tests and js updates are good to me! Thanks for this great work!

[shirsha]

With VO on iPhone 16:

• Only for the first input field, SR conveys to the user to use swipe up/down to change the number.

• As user changes number, along with number change it also announces the percentage. For example, when number is changed to 3, SR narrates 3, 33.5 percent.

• When the user selects any number from the on-screen keyboard, always number 8 is selected.

With Talk back on Andriod pixel:

• When the user selects any number from the on-screen keyboard, always number 8 is selected.
• When focus is placed on the input field, it is narrated as 6 adults spin button, but when user swipe up/down number , number doesn't change