angular / angular/components

bug(mat-select): Focus trap not working as expected in mobile

オープン
#25,756 コメント 3 件 リアクション 0 件 担当者 0 名 GitHub で見る
area: material/select ios 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

When using a screen reader on mobile device such as Voice Over in iOS,
1) on the double tap of the mat-select control, the focus stays on the control instead of focusing on the selected or first element in the panel. Until we manually tab inside the panel. _Please see the attached video 1_.

2) When the focus is inside the panel, on the first option and we swipe backwards (swipe to left), the focus goes to the last element on the page (last element on the footer of the host page). _Please see the attached video 2_.

Though I only documented iOS here, the issue also exists on Android (tested with Pixel 2 + Android 11). In Android swiping in either direction, left when on the first option and right when on the last option, will cause the focus to leave the panel and enter the content behind while the panel is still open.

Video 1:
https://user-images.githubusercontent.com/13901527/193904148-52b7e842-25e5-44d6-835a-83aeaeecec7b.MOV

Video 2:
https://user-images.githubusercontent.com/13901527/193904171-b5c59c89-8e8e-4c63-8bc2-b56db659f993.MOV

### Reproduction

Steps to reproduce:
1. On an iOS Phone, open Safari and visit [https://material.angular.io/components/select/examples](https://material.angular.io/components/select/examples)
2. Turn on Voice Over
3. Use swipes, tab and double tab to interact with one of the mat-select controls and its options panel.

### Expected Behavior

1) With Voice Over turned on, On double tab of the mat-select control, after the drop down panel opens, the selected option or the first option must have being focused.

2) With Voice Over turned on and dropdown panel open, while swaping backwards, the focus must not go into the background content. Focus must either stay in the panel or go to the Safari toolbar (refresh button, back button, etc...).

### Actual Behavior

1) Focus stays on the mat-select control even though the panel has opened.

2) Focus leaves the panel and enters other page content while the panel is still open.

### Environment

- Angular: 14.2.3
- CDK/Material: Mat-Select
- Browser(s): Safari
- Operating System (e.g. Windows, macOS, Ubuntu): iOS 15.7 and iOS 15.6.1

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

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

調査の方向性

まず、iOS の VoiceOver を使用して material.angular.io/components/select/examples の mat-select の例で問題を再現し、その後、Android で報告されている動作と比較します。完了条件は、パネルを開くと選択されたオプションまたは最初のオプションにフォーカスが移動し、パネルが開いたままの状態でどちらかの境界でスワイプしてもページの背景コンテンツにフォーカスが移動しないことです。

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

評価

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

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

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