bug(mat-calendar): The calendar contains toggle buttons that do not behave like toggle buttons (Accessibility)
- Vorherrschende Sprache
- TypeScript
- Sterne
- 25k
- Forks
- 6.8k
- Ø Merge
- 1 T. 8 Std.
- Gemergte PRs (30 T.)
- 91
Beschreibung
### 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
Beitragsleitfaden
Rechercherichtung
Beginne mit den Datumsschaltflächen von mat-calendar, die im Beispiel für den inline-calendar von datepicker angezeigt werden, und ermittle, wo ihr aria-pressed-Attribut gesetzt wird. Überprüfe das Verhalten nach der Änderung mit einem Screenreader; abgeschlossen ist die Aufgabe, wenn auswählbare Daten nicht mehr als Umschaltflächen angekündigt werden, während ihr Kalenderverhalten intakt bleibt.
Vom Indexierungsmodell aus dem Issue-Text verfasst.
Bewertung
- Tech-Stack
- angular, typescript
- Bereich
- accessibility, frontend
- Issue-Typ
- Bug
- Schwierigkeit
- 2/5
- Geschätzter Aufwand
- 1-3 Stunden
- Aktivitätsstatus
- Veraltet
- Klarheit
- Größtenteils klar
- Anfängerfreundlichkeit
- 48/100