Hacktoberfest 2026 : les issues que les mainteneurs ont marquées pour octobre, ouvertes et accessibles aux débutants. Parcourir les issues Hacktoberfest

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

Ouverte
#32,664 4 commentaires 5 réactions 1 personne assignée Voir sur GitHub

Les mainteneurs répondent en général sous 1 jour

@ok7sai y travaille déjà.

Depuis le 1/4/2026.

Évaluation

Cette issue n'a pas encore été évaluée.

Description

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
Langage dominant
TypeScript
Étoiles
25k
Forks
6.8k
Merge moyen
1 j 7 h
PR mergées (30 j)
69

Préparer son environnement

Par où commencer

  1. Lisez l'issue en entier, puis le guide de contribution du projet.
  2. Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
  3. Forkez le dépôt et travaillez sur une branche.
  4. Ouvrez une pull request qui référence le numéro de l'issue.

Autres issues de angular/components

Toutes les issues de angular/components

Issues similaires

Plus d'issues TypeScript

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.