angular / angular/components

bug(FocusMonitor): If a focused element becomes [disabled], attached FocusMonitor still reports the element as focused (FF, non-Chromium Edge).

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

説明

#### Reproduction

Stackblitz: https://stackblitz.com/edit/angular-atdzsd

*Steps to reproduce:*

1. Open the Stackblitz above on either FF or non-Chromium Edge. The Stackblitz contains a `mat-checkbox` that disables itself when activated.
2. Activate the `mat-checkbox` with space. Observe that the `mat-checkbox` is now indeed disabled.

---

#### Expected Behavior

I'd expect that the `mat-checkbox` loses its focus styles (and essentially all of the issues in "Actual Behavior" don't occur).

#### Actual Behavior

Observe the following after activating the `mat-checkbox` with space:

1. The `mat-checkbox` still has the classes `.cdk-focused` and `.cdk-keyboard-focused`.
2. As a result, the `mat-checkbox` still has focus styles.
3. If you query for the `document.activeElement`, it returns the `mat-checkbox`.
4. Subsequent mouse clicks & focus events on the page do not cause the `mat-checkbox` to lose its focus styles (i.e. it looks focused essentially forever).

All of the above are unexpected.

#### What's Happening

On FF and non-Chromium Edge, when a focused element is `[disabled]` it (1) remains the `document.activeElement` and (2) consequently no `blur` event is emitted. These appear to be browser bugs. As a result of this behavior, the attached `FocusMonitor` on `mat-checkbox` (and other components like `mat-button`) never receives a `blur` event to remove the `.cdk-focused` and `.cdk-keyboard-focused` classes on the element.

#### Potential Solution

We could add some work-around logic to `FocusMonitor` to listen if a monitored element becomes `[disabled]`, and if so, do the same thing we'd do if the element was actually blurred.

#### Environment

- Angular: Latest
- CDK/Material: Latest
- Browser(s): FF, non-Chromium Edge
- Operating System (e.g. Windows, macOS, Ubuntu): macOS

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

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

調査の方向性

まず、Firefox または Chromium ベースではない Edge で、リンク先の Stackblitz にある FocusMonitor と mat-checkbox を使って問題を再現します。フォーカスされている要素が無効化されたときに FocusMonitor がどのように処理するかを追跡します。無効化されたチェックボックスからフォーカスクラスが失われ、その後のマウスイベントまたはフォーカスイベントによってフォーカス中のスタイルが残らなくなれば完了です。

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

評価

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

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

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