Skip to content

Conversation

@OmerGronich
Copy link

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, ngSpinButtonIncrement, ngSpinButtonDecrement, ngSpinButtonGroup
  • 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, aria-required
  • Indeterminate state support (omits aria-valuenow when value is undefined)
  • Development mode validation warnings
  • Two example implementations:
    • Quantity picker 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)

@google-cla
Copy link

google-cla bot commented Jan 16, 2026

Thanks for your pull request! It looks like this may be your first contribution to a Google open source project. Before we can look at your pull request, you'll need to sign a Contributor License Agreement (CLA).

View this failed invocation of the CLA check for more information.

For the most up to date status, view the checks section at the bottom of the pull request.

Adds a new `ngSpinButton` primitive for the ARIA spinbutton pattern following
the W3C APG specification. The component provides keyboard navigation (Arrow
keys, Page Up/Down, Home/End), value constraints (min/max/step), wrapping
mode, and accessible auto-repeat on stepper buttons.

Includes:
- SpinButtonPattern and SpinButtonStepperPattern in private API
- SpinButton, SpinButtonInput, SpinButtonGroup, SpinButtonIncrement,
  and SpinButtonDecrement directives
- Example implementations including APG quantity picker and time field
- Dev app demo page
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

detected: feature PR contains a feature commit

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant