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

JeanMeche · 2026-01-27T08:36:57Z

src/aria/spinbutton/spinbutton.ts

+    afterRenderEffect(() => {
+      if (typeof ngDevMode === 'undefined' || ngDevMode) {
+        const violations = this._pattern.validate();
+        for (const violation of violations) {
+          console.error(violation);
+        }
+      }
+    });


In prod mode this would register an empty effect.
It's better to have it around the afterRenderEffect

Suggested change

afterRenderEffect(() => {

if (typeof ngDevMode === 'undefined' || ngDevMode) {

const violations = this._pattern.validate();

for (const violation of violations) {

console.error(violation);

}

}

});

if (typeof ngDevMode === 'undefined' || ngDevMode) {

afterRenderEffect(() => {

const violations = this._pattern.validate();

for (const violation of violations) {

console.error(violation);

}

});

}

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({

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

goldens/aria/private/index.api.md

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


Does it really belong in the public API?

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 ?

JeanMeche · 2026-01-27T08:49:38Z

src/aria/spinbutton/spinbutton-increment.ts

+  readonly spinButton = inject(SPINBUTTON);
+
+  /** Whether the increment button should be disabled. */
+  readonly _isDisabled = computed(() => {


Suggested change

readonly _isDisabled = computed(() => {

protected readonly _isDisabled = computed(() => {

JeanMeche · 2026-01-27T08:49:48Z

src/aria/spinbutton/spinbutton-increment.ts

+  });
+
+  /** Handles click events on the increment button. */
+  _onClick(): void {


Suggested change

_onClick(): void {

protected _onClick(): void {

JeanMeche · 2026-01-27T08:50:04Z

src/aria/spinbutton/spinbutton-decrement.ts

+  readonly spinButton = inject(SPINBUTTON);
+
+  /** Whether the decrement button should be disabled. */
+  readonly _isDisabled = computed(() => {


Suggested change

readonly _isDisabled = computed(() => {

protected readonly _isDisabled = computed(() => {

JeanMeche · 2026-01-27T08:50:12Z

src/aria/spinbutton/spinbutton-decrement.ts

+  });
+
+  /** Handles click events on the decrement button. */
+  _onClick(): void {


Suggested change

_onClick(): void {

protected _onClick(): void {

JeanMeche · 2026-01-27T09:03:41Z

src/aria/spinbutton/spinbutton-decrement.ts

+    '[attr.aria-controls]': 'spinButton.inputId()',
+    '[attr.aria-disabled]': '_isDisabled() || null',


This is now supported out of the box (since 20.2)

Suggested change

'[attr.aria-controls]': 'spinButton.inputId()',

'[attr.aria-disabled]': '_isDisabled() || null',

'[aria-controls]': 'spinButton.inputId()',

'[aria-disabled]': '_isDisabled() || null',

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 ?

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

JeanMeche reviewed Jan 27, 2026

View reviewed changes

goldens/aria/private/index.api.md

}

// @public

export class SpinButtonPattern {

Copy link

Member

JeanMeche Jan 27, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Does it really belong in the public API?

JeanMeche reviewed Jan 27, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

OmerGronich commented Jan 16, 2026 •

edited

Loading

Uh oh!

JeanMeche Jan 27, 2026

Uh oh!

JeanMeche Jan 27, 2026

Uh oh!

JeanMeche Jan 27, 2026

Uh oh!

JeanMeche Jan 27, 2026

Uh oh!

JeanMeche Jan 27, 2026

Uh oh!

JeanMeche Jan 27, 2026

Uh oh!

JeanMeche Jan 27, 2026

Uh oh!

JeanMeche Jan 27, 2026

Uh oh!

JeanMeche Jan 27, 2026

Uh oh!

JeanMeche Jan 27, 2026

Uh oh!

JeanMeche Jan 27, 2026

Uh oh!

JeanMeche Jan 27, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

	readonly _pattern: SpinButtonPattern = new SpinButtonPattern({
	readonly pattern: SpinButtonPattern = new SpinButtonPattern({

	readonly _isDisabled = computed(() => {
	protected readonly _isDisabled = computed(() => {

		'[attr.aria-controls]': 'spinButton.inputId()',
		'[attr.aria-disabled]': '_isDisabled() \|\| null',

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

Are you sure you want to change the base?

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

Conversation

OmerGronich commented Jan 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

OmerGronich commented Jan 16, 2026 •

edited

Loading