bug(datepicker): Focus Not Properly Managed After Selecting Date in Angular Datepicker (VoiceOver, iOS)
- Dominant language
- TypeScript
- Stars
- 25k
- Forks
- 6.8k
- Avg merge
- 1d 8h
- Merged PRs (30d)
- 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.


### 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
Contributor guide
Research direction
Start by reproducing the issue from the Angular Material Datepicker overview on iOS with VoiceOver, using the listed steps. Inspect the datepicker's focus handling after date selection and verify that focus returns to the datepicker input rather than an element behind the calendar; cover the behavior with a regression test if the existing datepicker tests expose it.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- angular, typescript
- Domain
- accessibility, frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 42/100