Hacktoberfest 2026: die Issues, die Maintainer für den Oktober markiert haben – offen und einsteigerfreundlich. Hacktoberfest-Issues durchsuchen

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

Offen
  • Stimmt etwas nicht?
#32,664 4 Kommentare 5 Reaktionen 1 zugewiesene Person Auf GitHub ansehen

Maintainer antworten meist innerhalb von 1 Tag

@ok7sai arbeitet bereits daran.

Seit 01.4.2026.

Bewertung

Dieses Issue wurde noch nicht bewertet.

Beschreibung

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
Vorherrschende Sprache
TypeScript
Sterne
25k
Forks
6.8k
Ø Merge
2 T. 19 Std.
Gemergte PRs (30 T.)
82

Entwicklungsumgebung

Erste Schritte

  1. Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
  3. Forken Sie das Repository und arbeiten Sie in einem Branch.
  4. Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.

Mehr aus angular/components

Alle Issues in angular/components

Ähnliche Issues

Weitere Issues zu TypeScript

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.