angular / angular/components

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

Aperta
#30,190 4 commenti 0 reazioni 0 assegnatari Vedi su GitHub
Accessibility area: material/datepicker P3
Lingua principale
TypeScript
Stelle
25k
Fork
6.8k
Merge medio
1g 8h
PR unite (30g)
91

Descrizione

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

Guida per i contributori

Apri la guida per i contributori

Direzione di ricerca

Inizia con i pulsanti delle date di mat-calendar mostrati nell’esempio di inline-calendar di datepicker e individua dove viene applicato il loro attributo aria-pressed. Verifica il comportamento con uno screen reader dopo la modifica; il lavoro è completato quando le date selezionabili non vengono più annunciate come pulsanti di attivazione, mentre il loro comportamento nel calendario rimane intatto.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Valutazione

Stack tecnologico
angular, typescript
Ambito
accessibility, frontend
Tipo di issue
Bug
Difficoltà
2/5
Tempo stimato
1-3 ore
Stato di attività
Ferma
Chiarezza
Abbastanza chiara
Idoneità per principianti
48/100

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.