angular / angular/components

bug(datepicker): VoiceOver on iOS Fails to Announce Day of Week in Angular Material Datepicker, Violating WCAG 1.3.1

Abierto
#31,480 1 comentario 0 reacciones 0 asignados Ver en GitHub
P2
Lenguaje dominante
TypeScript
Estrellas
25k
Forks
6.8k
Merge medio
1 d 8 h
PR fusionados (30 d)
91

Descripción

### 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 Angular Material Datepicker does not announce the day of the week (which is present in the table header) when using VoiceOver on iOS. Currently, VoiceOver reads the selected date as “July 3rd, 2025, row X, column X,” but omits the associated day of the week.

This behavior does not meet [WCAG 2.1 Success Criterion 1.3.1: Info and Relationships (Level A)](https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships.html), as the relationship between the date and its corresponding day of the week is not conveyed to assistive technologies.

### Reproduction

Steps to Reproduce

1. Enable VoiceOver via Settings > Accessibility > VoiceOver
2. Open Safari on an iOS device.
3. Navigate to the Angular Material Datepicker demo page:https://material.angular.dev/components/datepicker/overview
4. Open the datepicker by selecting any of the date input fields.
5. Use VoiceOver to navigate through the calendar and select a date.
6. The VoiceOver does not read the Day of the Week.

![Image](https://github.com/user-attachments/assets/a2238c7b-40e8-4956-b879-486c1616ad32)

### Expected Behavior

VoiceOver should announce the full date, including the day of the week.

### Actual Behavior

VoiceOver only reads the date and position (e.g., "July 3rd, 2025, row X, column X") but does not announce the day of the week, which is visually present in the table header.

### Environment

- Angular: 18, 20
- CDK/Material: 18, 20
- Browser(s): Safari
- Operating System (e.g. Windows, macOS, Ubuntu): iOS

Guía de contribución

Abrir la guía de contribución

Línea de trabajo

Comienza con la demostración general del datepicker de Angular Material y reproduce el problema usando VoiceOver en Safari en iOS. Rastrea el comportamiento de accesibilidad del datepicker para las celdas del calendario y los encabezados de tabla; después, verifica que VoiceOver anuncie el día de la semana junto con la fecha seleccionada sin perder la información existente de filas y columnas.

Escrito por el modelo de indexación a partir del texto del issue.

Evaluación

Stack tecnológico
angular, typescript
Área
accessibility, frontend
Tipo de issue
Error
Dificultad
3/5
Tiempo estimado
1-2 días
Estado de actividad
Estancado
Claridad
Bastante claro
Aptitud para principiantes
42/100

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.