angular / angular/components

Explore replacing cdk focus trap with native HTML inert

Open
#24,868 1 comment 2 reactions 0 assignees View on GitHub
Accessibility area: cdk/a11y P3 refactoring
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
91

Description

The new HTML `inert` attribute is a native solution to the very manual focus trapping we employ today. We should explore whether we can drop the entire focus trap subpackage in favor of people directly using `inert`. It will be some time until browsers fully support this, but it's on track for all of Chromium/Firefox/Safari.

See
https://developer.chrome.com/blog/inert/
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert
https://caniuse.com/mdn-api_htmlelement_inert

Contributor guide

Open the contributing guide

Research direction

Start with the CDK focus trap subpackage and compare its current manual trapping behavior with the native HTML inert API described in the linked browser documentation. Check the stated Chromium, Firefox, and Safari support, then determine whether the subpackage can be replaced without breaking existing component usage; done means a documented feasibility decision and migration scope.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, html, typescript
Domain
accessibility, frontend
Issue type
Refactor
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.