refactor(cdk/a11y): make focus-trap zoneless compatible (angular#29031)

Author: mmalerba

src/cdk/a11y/focus-trap/focus-trap.ts

@@ -11,15 +11,17 @@ import {DOCUMENT} from '@angular/common';
 import {
   AfterContentInit,
   Directive,
+  DoCheck,
   ElementRef,
   Inject,
   Injectable,
+  Injector,
   Input,
   NgZone,
+  OnChanges,
   OnDestroy,
-  DoCheck,
   SimpleChanges,
-  OnChanges,
+  afterNextRender,
   booleanAttribute,
   inject,
 } from '@angular/core';
@@ -62,6 +64,8 @@ export class FocusTrap {
     readonly _ngZone: NgZone,
     readonly _document: Document,
     deferAnchors = false,
+    /** @breaking-change 20.0.0 param to become required */
+    readonly _injector?: Injector,
   ) {
     if (!deferAnchors) {
       this.attachAnchors();
@@ -355,10 +359,27 @@ export class FocusTrap {
 
   /** Executes a function when the zone is stable. */
   private _executeOnStable(fn: () => any): void {
-    if (this._ngZone.isStable) {
-      fn();
-    } else {
+    // TODO(mmalerba): Make this behave consistently across zonefull / zoneless.
+    if (!this._ngZone.isStable) {
+      // Subscribing `onStable` has slightly different behavior than `afterNextRender`.
+      // `afterNextRender` does not wait for state changes queued up in a Promise
+      // to avoid change after checked errors. In most cases we would consider this an
+      // acceptable behavior change, the dialog at least made its best effort to focus the
+      // first element. However, this is particularly problematic when combined with the
+      // current behavior of the mat-radio-group, which adjusts the tabindex of its child
+      // radios based on the selected value of the group. When the selected value is bound
+      // via `[(ngModel)]` it hits this "state change in a promise" edge-case and can wind up
+      // putting the focus on a radio button that is not supposed to be eligible to receive
+      // focus. For now, we side-step this whole sequence of events by continuing to use
+      // `onStable` in zonefull apps, but it should be noted that zoneless apps can still
+      // suffer from this issue.
       this._ngZone.onStable.pipe(take(1)).subscribe(fn);
+    } else {
+      if (this._injector) {
+        afterNextRender(fn, {injector: this._injector});
+      } else {
+        fn();
+      }
     }
   }
 }
@@ -369,6 +390,7 @@ export class FocusTrap {
 @Injectable({providedIn: 'root'})
 export class FocusTrapFactory {
   private _document: Document;
+  private _injector = inject(Injector);
 
   constructor(
     private _checker: InteractivityChecker,
@@ -392,6 +414,7 @@ export class FocusTrapFactory {
       this._ngZone,
       this._document,
       deferCaptureElements,
+      this._injector,
     );
   }
 }

src/cdk/dialog/dialog-container.ts

@@ -31,16 +31,13 @@ import {
   ElementRef,
   EmbeddedViewRef,
   Inject,
-  Injector,
   NgZone,
   OnDestroy,
   Optional,
   ViewChild,
   ViewEncapsulation,
-  afterNextRender,
   inject,
 } from '@angular/core';
-import {take} from 'rxjs/operators';
 import {DialogConfig} from './dialog-config';
 
 export function throwDialogContentAlreadyAttachedError() {
@@ -105,8 +102,6 @@ export class CdkDialogContainer<C extends DialogConfig = DialogConfig>
 
   protected readonly _changeDetectorRef = inject(ChangeDetectorRef);
 
-  private _injector = inject(Injector);
-
   constructor(
     protected _elementRef: ElementRef,
     protected _focusTrapFactory: FocusTrapFactory,
@@ -271,33 +266,13 @@ export class CdkDialogContainer<C extends DialogConfig = DialogConfig>
         break;
       case true:
       case 'first-tabbable':
-        const doFocus = () => {
-          const focusedSuccessfully = this._focusTrap?.focusInitialElement();
-          // If we weren't able to find a focusable element in the dialog, then focus the
-          // dialog container instead.
+        this._focusTrap?.focusInitialElementWhenReady().then(focusedSuccessfully => {
+          // If we weren't able to find a focusable element in the dialog, then focus the dialog
+          // container instead.
           if (!focusedSuccessfully) {
             this._focusDialogContainer();
           }
-        };
-
-        // TODO(mmalerba): Make this behave consistently across zonefull / zoneless.
-        if (!this._ngZone.isStable) {
-          // Subscribing `onStable` has slightly different behavior than `afterNextRender`.
-          // `afterNextRender` does not wait for state changes queued up in a Promise
-          // to avoid change after checked errors. In most cases we would consider this an
-          // acceptable behavior change, the dialog at least made its best effort to focus the
-          // first element. However, this is particularly problematic when combined with the
-          // current behavior of the mat-radio-group, which adjusts the tabindex of its child
-          // radios based on the selected value of the group. When the selected value is bound
-          // via `[(ngModel)]` it hits this "state change in a promise" edge-case and can wind up
-          // putting the focus on a radio button that is not supposed to be eligible to receive
-          // focus. For now, we side-step this whole sequence of events by continuing to use
-          // `onStable` in zonefull apps, but it should be noted that zoneless apps can still
-          // suffer from this issue.
-          this._ngZone.onStable.pipe(take(1)).subscribe(doFocus);
-        } else {
-          afterNextRender(doFocus, {injector: this._injector});
-        }
+        });
         break;
       case 'first-heading':
         this._focusByCssSelector('h1, h2, h3, h4, h5, h6, [role="heading"]');

tools/public_api_guard/cdk/a11y.md

@@ -219,7 +219,8 @@ export type FocusOrigin = 'touch' | 'mouse' | 'keyboard' | 'program' | null;
 
 // @public
 export class FocusTrap {
-    constructor(_element: HTMLElement, _checker: InteractivityChecker, _ngZone: NgZone, _document: Document, deferAnchors?: boolean);
+    constructor(_element: HTMLElement, _checker: InteractivityChecker, _ngZone: NgZone, _document: Document, deferAnchors?: boolean,
+    _injector?: Injector | undefined);
     attachAnchors(): boolean;
     destroy(): void;
     // (undocumented)
@@ -239,6 +240,7 @@ export class FocusTrap {
     focusLastTabbableElement(options?: FocusOptions): boolean;
     focusLastTabbableElementWhenReady(options?: FocusOptions): Promise<boolean>;
     hasAttached(): boolean;
+    readonly _injector?: Injector | undefined;
     // (undocumented)
     readonly _ngZone: NgZone;
     // (undocumented)

tslint.json

@@ -188,8 +188,7 @@
         // Tests may need to verify behavior with zones.
         "**/*.spec.ts",
         // TODO(mmalerba): following files to be cleaned up and removed from this list:
-        "**/cdk/a11y/focus-trap/focus-trap.ts",
-        "**/cdk/dialog/dialog-container.ts"
+        "**/cdk/a11y/focus-trap/focus-trap.ts"
       ]
     ]
   },