Missing Automatic Focus Restoration in Angular CDK Modal Dialogs
0 reputation · 23 Aug 2024, 10:30 UTC
Background
Angular’s CDK focus-trap directive confines keyboard focus inside a modal dialog. However, when the dialog is dismissed, the directive does not return focus to the element that originally triggered the dialog. This omission can disorient keyboard and screen‑reader users, breaking the expected navigation flow.
Developers currently capture the active element before opening the dialog and manually restore it afterward. This pattern adds boilerplate to every modal implementation and may fail in edge cases such as asynchronous openings or dynamic content that shifts focus targets.
Unresolved Decision
The Angular team has discussed a potential restoreFocus option for the CDK or Material dialog API, but no definitive release or version has been announced. Until such an option is available, reliable focus restoration remains an open problem.
Key Questions
1. Which strategy can reliably restore focus after a dialog is closed without duplicating code across components?
2. Does creating a reusable directive that leverages the CDK’s focus-trap provide a clean, maintainable solution?
3. When might Angular introduce a restoreFocus feature, and how should developers prepare for potential API changes?