angular / angular/components

bug(datepicker): Focus Not Properly Managed After Selecting Date in Angular Datepicker (VoiceOver, iOS)

Ouverte
#31,473 1 commentaire 0 réactions 0 personnes assignées Voir sur GitHub
P2
Langage dominant
TypeScript
Étoiles
25k
Forks
6.8k
Merge moyen
1 j 8 h
PR mergées (30 j)
91

Description

### 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 date picker doesn't properly focus on the selected date when using VoiceOver on iOS. When I try to select a date, the calendar opens as expected, and I double-tap to choose a date using VoiceOver. However, after the date is selected, the double-tap also triggers a selection on whatever element is behind the calendar.

### Reproduction

Steps to reproduce:
1. Enable VoiceOver on iOS.
2. Navigate to [Angular Material Datepicker](https://material.angular.dev/components/datepicker/overview).
3. Open the datepicker; the calendar overlay appears.
4. Using VoiceOver, double-tap to select a date.
5. After the double-tap, focus unexpectedly shifts to an element behind the calendar instead of remaining within the datepicker.

![Image](https://github.com/user-attachments/assets/11398383-94a4-460f-9dee-f95fc38168d8)
![Image](https://github.com/user-attachments/assets/30798904-31a7-4d81-9442-4743afa04e8b)

### Expected Behavior

After selecting a date using VoiceOver, the focus should return to the datepicker input, not shift to elements behind the calendar.

### Actual Behavior

After selecting a date with VoiceOver, the focus shifts to an element behind the calendar instead of returning to the datepicker input.

### Environment

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

Guide de contribution

Ouvrir le guide de contribution

Piste de recherche

Commencez par reproduire le problème décrit dans la vue d’ensemble de Angular Material Datepicker sur iOS avec VoiceOver, en suivant les étapes indiquées. Examinez la gestion du focus du datepicker après la sélection d’une date et vérifiez que le focus revient sur le champ de saisie du datepicker plutôt que sur un élément situé derrière le calendrier ; couvrez ce comportement avec un test de régression si les tests existants du datepicker le mettent en évidence.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Évaluation

Stack technique
angular, typescript
Domaine
accessibility, frontend
Type d'issue
Bug
Difficulté
3/5
Temps estimé
1-2 jours
Activité
À l'abandon
Clarté
Plutôt claire
Accessibilité débutants
42/100

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.