angular / angular/components

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

Open
#19,402 5 comments 0 reactions 0 assignees View on GitHub
area: cdk/a11y G P4
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
91

Description

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

Contributor guide

Open the contributing guide

Research direction

Start by reproducing the issue in the linked Stackblitz with FocusMonitor and mat-checkbox on Firefox or non-Chromium Edge. Trace how FocusMonitor handles a focused element becoming disabled; done means the disabled checkbox loses its focus classes and later mouse or focus events no longer leave it styled as focused.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
accessibility, frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.