angular / angular/components

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

Open
#31,473 1 comment 0 reactions 0 assignees View on GitHub
P2
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.

![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

Contributor guide

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.