Hacktoberfest 2026: những issue maintainer đã đánh dấu cho tháng Mười, đang mở và phù hợp người mới. Xem issue Hacktoberfest

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

Đang mở
#32,664 4 bình luận 5 reaction 1 người được giao Xem trên GitHub

Maintainer thường phản hồi trong vòng 1 ngày

@ok7sai đang làm issue này rồi.

Từ ngày 1/4/2026.

Đánh giá

Issue này chưa được đánh giá.

Mô tả

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
Ngôn ngữ chính
TypeScript
Star
25k
Fork
6.8k
Merge trung bình
1 ngày 5 giờ
Pull request đã merge (30 ngày)
67

Chuẩn bị môi trường

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của angular/components

Tất cả issue của angular/components

Issue tương tự

Thêm issue về TypeScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.