Quantity spinbutton

Built with: input type=number · role=spinbutton · aria-valuetext

Overview

Do NOT follow the APG pattern. Just follow my solution because it works on all browsers and screen readers..

How it works

The native solution is input type="number" with min, max and step, which already supports Up and Down arrows and swipe. Add role="spinbutton" anyway: WebKit exposes the input as a textbox without it. Add aria-valuetext too, or screen readers announce the value as a percentage. Strip the native spinners with appearance: textfield and the ::-webkit-spin-button pseudo-elements.

It was tested with Chrome 148 and VoiceOver on macOS, with Chrome and VoiceOver on iOS, and with Chrome and NVDA on Windows 11. The post links the bug reports opened for Android and for Apple.

Live example

Add Product B to Bag

0 to 10

Usage

This section is still in progress.

Accessibility

Keyboard

Up Arrow: increase by the step.
Down Arrow: decrease by the step.
Home: set the minimum, if there is one.
End: set the maximum, if there is one.
On Apple keyboards with no End key: Command or Fn with Left or Right Arrow.