angular / angular/components

bug(mat-calendar): The calendar contains toggle buttons that do not behave like toggle buttons (Accessibility)

Đang mở
#30,190 4 bình luận 0 reaction 0 người được giao Xem trên GitHub
Accessibility area: material/datepicker 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ả

### Is this a regression?

- [ ] Yes, this behavior used to work in the previous version

### The previous version in which this bug was not present was

_No response_

### Description

The mat-calendar component contains a button for each selectable date. When navigating the calendar using a screen reader, each button will be read as "toggle button" indicating that the buttons state should change each time the button is pressed. However the button does not behave like a toggle button. Once the button is toggled it cannot be "untoggled", potentially causing confusion for the user. I believe the `aria-pressed` attribute on the button should be removed to correctly reflect the buttons behaviour.

This was discovered during a recent accessibility evaluation and they provided the following link: https://www.w3.org/WAI/WCAG22/Understanding/name-role-value.html

### Reproduction

Example link: https://material.angular.io/components/datepicker/overview#datepicker-inline-calendar

Steps to reproduce:
1. Use the example link in the browser (I used Chrome)
2. Start the screen reader (I used VoiceOver on MacOS)
3. Navigate to the calendar dates an hear them being read as "toggle button"
4. Realize that you cannot change the pressed state of the toggle button by pressing it multiple times

### Expected Behavior

That the button isn't announced as a toggle button when it doesn't behave like a toggle button.

### Actual Behavior

The button is announced as a toggle button even though it doesn't behave like one.

### Environment

- Angular: 19.0.4
- CDK/Material: 19.0.3
- Browser(s): Chrome (similar result expected in other browsers)
- Operating System: macOS

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

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

Hướng nghiên cứu

Bắt đầu với các nút ngày của mat-calendar được hiển thị trong ví dụ inline-calendar của datepicker và xác định nơi thuộc tính aria-pressed của chúng được áp dụng. Kiểm tra hành vi bằng trình đọc màn hình sau khi thay đổi; được xem là hoàn tất khi các ngày có thể chọn không còn được đọc là các nút chuyển đổi, trong khi hành vi lịch của chúng vẫn được giữ nguyên.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Đánh giá

Công nghệ
angular, typescript
Lĩnh vực
accessibility, frontend
Loại issue
Lỗi
Độ khó
2/5
Thời gian dự kiến
1-3 giờ
Mức độ hoạt động
Đình trệ
Độ rõ ràng
Khá rõ ràng
Mức phù hợp với người mới
48/100

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.