Can Angular dynamically loaded components maintain focus trapping for screen readers?
0 reputation · 21 Aug 2023, 21:24 UTC
Goal
To ensure that when a component is injected into the DOM via ViewContainerRef, keyboard focus is automatically trapped within that component and returned to the original trigger when the component is removed.
Constraints
Angular Material dialogs provide automatic focus trapping, but custom components lack a built‑in mechanism. The OnPush change‑detection strategy can delay updates to aria-live regions, and reordering elements with ngFor may disrupt the tab order.
Unresolved Decision
There is no documented, generic service that applies focus trapping and live‑region announcements to arbitrary dynamically loaded components. Developers must decide whether to implement custom ARIA attributes, use the LiveAnnouncer service, or rely on third‑party libraries.
Questions
1. What is the recommended approach to automatically trap focus when using ViewContainerRef to load a custom component?
2. How can we ensure that focus is restored to the triggering element after the component is destroyed?
3. Does Angular provide a built‑in service for managing live‑region announcements when components are added dynamically?
