angular / angular/components

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 Được @ok7sai nhận Xem trên GitHub
area: cdk/a11y feature P3
Ngôn ngữ chính
TypeScript
Star
25k
Fork
6.8k
Merge trung bình
1 ngày 8 giờ
Pull request đã merge (30 ngày)
91

Mô tả

### 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

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Đánh giá

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

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.