feat(aria/spinbutton): add aria spinbutton component #32663

OmerGronich · 2026-01-16T21:36:37Z

This PR implements the ARIA spinbutton pattern based on WAI-ARIA guidelines.

WAI-ARIA Pattern Reference:
https://www.w3.org/WAI/ARIA/apg/patterns/spinbutton/

Completed:

Four new directives: ngSpinButton, ngSpinButtonInput, ngSpinButtonIncrement, ngSpinButtonDecrement
Full keyboard navigation:
- Arrow Up/Down: increment/decrement by step
- Page Up/Down: increment/decrement by large step (configurable)
- Home/End: jump to min/max values
Value wrapping support (max→min and min→max)
Proper ARIA attributes: aria-valuenow, aria-valuetext, aria-valuemin, aria-valuemax, aria-disabled, aria-readonly, aria-invalid
Support for both native input elements and span elements
Development mode validation warnings
Two example implementations:
- Guest counter with increment/decrement buttons
- Time field with hour/minute/period spinbuttons
Comprehensive test coverage

Future Enhancements:

Documentation guide
Additional examples (date picker fields, numeric stepper)
Indeterminate state support (undefined value)
aria-required attribute support

Implements a spinbutton ARIA primitive as a compound component following the W3C APG spinbutton pattern. The implementation includes: - SpinButtonPattern class with value management, keyboard handling, and wrap/clamp behavior - SpinButton parent directive for container and state management - SpinButtonInput directive for the focusable element (supports both input and span elements) - SpinButtonIncrement/Decrement button directives - Comprehensive test coverage - Two dev-app examples: APG hotel guest counter and time field segments

src/aria/spinbutton/spinbutton.ts

JeanMeche · 2026-01-27T08:39:22Z

src/aria/spinbutton/spinbutton.ts

+      if (!this._hasFocused()) {
+        this._pattern.setDefaultState();
+      }


What's the purpose of this ? setDefaultState is empty

JeanMeche · 2026-01-27T08:41:19Z

src/aria/spinbutton/spinbutton.ts

+  private _hasFocused = signal(false);
+
+  /** The UI pattern instance for this spinbutton. */
+  readonly _pattern: SpinButtonPattern = new SpinButtonPattern({


Since it's not private

Suggested change

readonly _pattern: SpinButtonPattern = new SpinButtonPattern({

readonly pattern: SpinButtonPattern = new SpinButtonPattern({

I noticed that all other angular aria primitives use readonly _pattern. Should I keep _pattern here for consistency?

JeanMeche · 2026-01-27T08:42:00Z

goldens/aria/private/index.api.md

+}
+
+// @public
+export class SpinButtonPattern {


Does it really belong in the public API?

The other pattern classes also exported in the private API golden, I assumed this one should be exported too

JeanMeche · 2026-01-27T08:45:55Z

src/aria/spinbutton/spinbutton.ts

+  }
+
+  /** Called when the input receives focus. */
+  _onFocus(): void {


Is this supposed to be private ?

JeanMeche · 2026-01-27T08:47:55Z

src/aria/private/spinbutton/spinbutton.ts

+  }
+
+  /** Handles pointerdown events for the spinbutton. */
+  onPointerdown(_event: PointerEvent): void {


should this be protected ?

Looking at the other pattern classes, onPointerdown is public everywhere. Happy to add protected if you'd like to start that convention here, just wanted to flag the inconsistency.

src/aria/spinbutton/spinbutton-increment.ts

src/aria/spinbutton/spinbutton-decrement.ts

JeanMeche · 2026-01-27T09:19:34Z

src/aria/private/spinbutton/spinbutton.ts

+  }
+
+  /** Sets the spinbutton to its default initial state. */
+  setDefaultState(): void {}


Is an implementation missing here ?

I think setDefaultState() is expected as a core method, see UI Pattern rules. For SpinButton, the state is fully determined by signal inputs (value, min, max), so no additional initialization is needed. Other patterns (e.g., Listbox, Tree) use this to set a default active item from dynamic children.

I saw that a few other patterns leave it as a noop too

components/src/aria/private/listbox/combobox-listbox.ts

Line 59 in 82a51f3

override setDefaultState(): void {}

components/src/aria/private/tree/combobox-tree.ts

Line 60 in 82a51f3

override setDefaultState(): void {}

Not sure if I should leave it like this or remove it entirely.

Co-authored-by: Matthieu Riegler <kyro38@gmail.com>

- Remove unnecessary setDefaultState effect and related code - Clarify setDefaultState JSDoc is intentionally empty - Use native ARIA binding syntax in increment and input - Update API golden

angular-robot bot added detected: feature PR contains a feature commit labels Jan 16, 2026

OmerGronich force-pushed the ng-aria-spin-button branch from 8f419d2 to 19a53fd Compare January 16, 2026 21:43

OmerGronich mentioned this pull request Jan 16, 2026

feat(aria/spinbutton): Add spinbutton primitive for value selection within discrete ranges #32664

Open

OmerGronich force-pushed the ng-aria-spin-button branch 7 times, most recently from 249c6f2 to 76f3abf Compare January 20, 2026 06:53

OmerGronich force-pushed the ng-aria-spin-button branch from 76f3abf to 8a1a79f Compare January 20, 2026 06:59

OmerGronich marked this pull request as ready for review January 20, 2026 18:11

pullapprove bot requested a review from crisbeto January 20, 2026 18:11

angular deleted a comment from google-cla bot Jan 27, 2026