Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

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

Abierto
#32,664 4 comentarios 5 reacciones 1 asignado Ver en GitHub

Los mantenedores suelen responder en 1 día

@ok7sai ya está trabajando en esto.

Desde el 1/4/2026.

Evaluación

Este issue todavía no se ha evaluado.

Descripción

area: cdk/a11y feature P3
Feature Description

Angular Aria currently lacks a spinbutton primitive.
The APG Spinbutton Pattern 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

React Aria Prior Art

React Aria uses spinbuttons internally for date/time segment navigation:

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
Lenguaje dominante
TypeScript
Estrellas
25k
Forks
6.8k
Merge medio
2 d 19 h
PR fusionados (30 d)
82

Preparar el entorno

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de angular/components

Todos los issues de angular/components

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.