feat(aria/spinbutton): Add spinbutton primitive for value selection within discrete ranges
- Lenguaje dominante
- TypeScript
- Estrellas
- 25k
- Forks
- 6.8k
- Merge medio
- 1 d 8 h
- PR fusionados (30 d)
- 91
Descripción
### Feature Description
Angular Aria currently lacks a spinbutton primitive.
The [APG Spinbutton Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/spinbutton/) defines it as an input widget that restricts its value to a set or range of discrete values.
### Keyboard Interaction (per APG)
| Key | Function |
|-----|----------|
| Up Arrow | Increases the value |
| Down Arrow | Decreases the value |
| Home | Sets value to minimum (if defined) |
| End | Sets value to maximum (if defined) |
| Page Up | Increases value by larger step (optional) |
| Page Down | Decreases value by larger step (optional) |
### Required ARIA Attributes
- `role="spinbutton"` on the focusable element
- `aria-valuenow` - Current value
- `aria-valuemin` / `aria-valuemax` - Min/max allowed values
- `aria-valuetext` - User-friendly string (e.g., "Monday" instead of "1")
- `aria-labelledby` or `aria-label` - Accessible name
- `aria-invalid="true"` - When value is outside allowed range
### References
**APG Specification**
- [Spinbutton Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/spinbutton/)
- [Quantity Spin Button
Example](https://www.w3.org/WAI/ARIA/apg/patterns/spinbutton/examples/quantity-spinbutton/)
- [Toolbar Example](https://www.w3.org/WAI/ARIA/apg/patterns/toolbar/examples/toolbar/) (includes font size
spinbutton)
**React Aria Prior Art**
React Aria uses spinbuttons internally for date/time segment navigation:
- [TimeField](https://react-spectrum.adobe.com/react-aria/TimeField.html)
- [DateField](https://react-spectrum.adobe.com/react-aria/DateField.html)
- [DateRangePicker](https://react-spectrum.adobe.com/react-aria/DateRangePicker.html)
### Implementation
PR: https://github.com/angular/components/pull/32663
### Use Case
1. **Quantity Selection** - Hotel booking, shopping carts, product pages
2. **Time Input** - Time pickers with hours, minutes, seconds segments
3. **Date Picker Components** - Date range selectors using spinbuttons for date segments
4. **Toolbar Controls** - Font size and property controls in text editors
5. **Numeric Input with Constraints** - Any value selection within a min/max range
Guía de contribución
Evaluación
Este issue todavía no se ha evaluado.