angular / angular/components

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

オープン
#31,473 コメント 1 件 リアクション 0 件 担当者 0 名 GitHub で見る
P2
主要言語
TypeScript
スター
25k
フォーク
6.8k
平均マージ
1日 8時間
マージ済み PR(30日)
91

説明

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

コントリビューションガイド

コントリビューションガイドを開く

調査の方向性

まず、記載されている手順を使用して、iOS 上で VoiceOver を有効にし、Angular Material Datepicker の概要にある問題を再現します。日付選択後の datepicker のフォーカス処理を調査し、カレンダーの背後にある要素ではなく datepicker の入力にフォーカスが戻ることを確認します。既存の datepicker テストでこの問題を確認できる場合は、回帰テストでこの動作をカバーします。

索引モデルが issue の本文から書いたものです。

評価

技術スタック
angular, typescript
領域
accessibility, frontend
issue の種類
バグ
難易度
3/5
見積もり時間
1〜2日
活発さ
停滞
明瞭さ
おおむね明確
初心者へのやさしさ
42/100

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。