angular / angular/components

Controls below the angular material dialog overlay still can be focused by keyboard

オープン
#13,054 コメント 11 件 リアクション 9 件 担当者 1 名 @annieyw が担当を希望しています GitHub で見る
Accessibility area: cdk/overlay area: material/dialog P4
主要言語
TypeScript
スター
25k
フォーク
6.8k
平均マージ
1日 8時間
マージ済み PR(30日)
91

説明

#### Bug, feature request, or proposal:
Bug

#### What is the expected behavior?
The dialog should be completely modal.

#### What is the current behavior?
Controls that are below in z-order of the Angular Material dialog overlay still can be focused by keyboard.

#### What are the steps to reproduce?
- Go to the stock Angular Material Dialog example: https://material.angular.io/components/dialog/examples
- Close the Dev Tools if it been opened earlier (this will just allow less TABs to press later, see below)
- Click on the Pick One button, the dialog pops up
- Click the browser address tab (Chrome on Windows been used for test)
- Start pressing TAB on the keyboard - you will notice that controls underneath the dialog overlay are getting selected, with all keyboard interaction enabled for the selected control. E.g. it's possible to enter new values into text boxes, press buttons etc.

Out of curiosity I also checked Bootstrap Modal - it also got similar problem, but for that one Shift-TAB needs to be pressed to reproduce.

As a suggestion - I understand that the dialog overlay is currently based on cdkTrapFocus directive. This one is suffering from the same problem, I presume it's exactly same problem, so it would be nice to fix it on the level of cdkTrapFocus - because the focus trap is quite useful thing.

![image](https://user-images.githubusercontent.com/5769929/45272711-36d7d580-b4f2-11e8-912a-b375f4694450.png)

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

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

評価

この issue はまだ評価されていません。

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

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