fix(cdk/a11y): Make focus-trap behavior consistent across zoneful/zon…

…eless (#29225)

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

@@ -7,12 +7,12 @@
  */
 
 import {DOCUMENT} from '@angular/common';
-import {Inject, Injectable, Optional, NgZone} from '@angular/core';
+import {Inject, Injectable, Injector, NgZone, Optional, inject} from '@angular/core';
 import {InteractivityChecker} from '../interactivity-checker/interactivity-checker';
 import {ConfigurableFocusTrap} from './configurable-focus-trap';
 import {ConfigurableFocusTrapConfig} from './configurable-focus-trap-config';
-import {FOCUS_TRAP_INERT_STRATEGY, FocusTrapInertStrategy} from './focus-trap-inert-strategy';
 import {EventListenerFocusTrapInertStrategy} from './event-listener-inert-strategy';
+import {FOCUS_TRAP_INERT_STRATEGY, FocusTrapInertStrategy} from './focus-trap-inert-strategy';
 import {FocusTrapManager} from './focus-trap-manager';
 
 /** Factory that allows easy instantiation of configurable focus traps. */
@@ -21,6 +21,8 @@ export class ConfigurableFocusTrapFactory {
  private _document: Document;
  private _inertStrategy: FocusTrapInertStrategy;
 
+ private readonly _injector = inject(Injector);
+
  constructor(
  private _checker: InteractivityChecker,
  private _ngZone: NgZone,
@@ -65,6 +67,7 @@ export class ConfigurableFocusTrapFactory {
  this._focusTrapManager,
  this._inertStrategy,
  configObject,
+ this._injector,
  );
  }
 }

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

@@ -6,12 +6,12 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {NgZone} from '@angular/core';
+import {Injector, NgZone} from '@angular/core';
 import {InteractivityChecker} from '../interactivity-checker/interactivity-checker';
+import {ConfigurableFocusTrapConfig} from './configurable-focus-trap-config';
 import {FocusTrap} from './focus-trap';
-import {FocusTrapManager, ManagedFocusTrap} from './focus-trap-manager';
 import {FocusTrapInertStrategy} from './focus-trap-inert-strategy';
-import {ConfigurableFocusTrapConfig} from './configurable-focus-trap-config';
+import {FocusTrapManager, ManagedFocusTrap} from './focus-trap-manager';
 
 /**
  * Class that allows for trapping focus within a DOM element.
@@ -41,8 +41,9 @@ export class ConfigurableFocusTrap extends FocusTrap implements ManagedFocusTrap
  private _focusTrapManager: FocusTrapManager,
  private _inertStrategy: FocusTrapInertStrategy,
  config: ConfigurableFocusTrapConfig,
+ injector?: Injector,
  ) {
- super(_element, _checker, _ngZone, _document, config.defer);
+ super(_element, _checker, _ngZone, _document, config.defer, injector);
  this._focusTrapManager.register(this);
  }
 

src/cdk/a11y/focus-trap/event-listener-inert-strategy.spec.ts

@@ -1,10 +1,10 @@
-import {AfterViewInit, Component, ElementRef, Type, ViewChild, Provider} from '@angular/core';
-import {ComponentFixture, fakeAsync, flush, TestBed} from '@angular/core/testing';
+import {AfterViewInit, Component, ElementRef, Provider, Type, ViewChild} from '@angular/core';
+import {ComponentFixture, TestBed, fakeAsync, flush} from '@angular/core/testing';
 import {patchElementFocus} from '../../testing/private';
 import {
  A11yModule,
- ConfigurableFocusTrapFactory,
  ConfigurableFocusTrap,
+ ConfigurableFocusTrapFactory,
  EventListenerFocusTrapInertStrategy,
  FOCUS_TRAP_INERT_STRATEGY,
 } from '../index';
@@ -31,6 +31,7 @@ describe('EventListenerFocusTrapInertStrategy', () => {
  const fixture = createComponent(SimpleFocusTrap, providers);
  const componentInstance = fixture.componentInstance;
  fixture.detectChanges();
+ flush();
 
  componentInstance.secondFocusableElement.nativeElement.focus();
  flush();
@@ -43,6 +44,7 @@ describe('EventListenerFocusTrapInertStrategy', () => {
  it('should not intercept focus if it moved outside the trap and back in again', fakeAsync(() => {
  const fixture = createComponent(SimpleFocusTrap, providers);
  fixture.detectChanges();
+ flush();
  const {secondFocusableElement, outsideFocusableElement} = fixture.componentInstance;
 
  outsideFocusableElement.nativeElement.focus();

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

@@ -25,7 +25,6 @@ import {
  booleanAttribute,
  inject,
 } from '@angular/core';
-import {take} from 'rxjs/operators';
 import {InteractivityChecker} from '../interactivity-checker/interactivity-checker';
 
 /**
@@ -359,27 +358,11 @@ export class FocusTrap {
 
  /** Executes a function when the zone is stable. */
  private _executeOnStable(fn: () => any): void {
- // 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);
+ // TODO: remove this conditional when injector is required in the constructor.
+ if (this._injector) {
+ afterNextRender(fn, {injector: this._injector});
  } else {
- if (this._injector) {
- afterNextRender(fn, {injector: this._injector});
- } else {
- fn();
- }
+ setTimeout(fn);
  }
  }
 }

tools/public_api_guard/cdk/a11y.md

@@ -127,7 +127,7 @@ export class CdkTrapFocus implements OnDestroy, AfterContentInit, OnChanges, DoC
 
 // @public
 export class ConfigurableFocusTrap extends FocusTrap implements ManagedFocusTrap {
- constructor(_element: HTMLElement, _checker: InteractivityChecker, _ngZone: NgZone, _document: Document, _focusTrapManager: FocusTrapManager, _inertStrategy: FocusTrapInertStrategy, config: ConfigurableFocusTrapConfig);
+ constructor(_element: HTMLElement, _checker: InteractivityChecker, _ngZone: NgZone, _document: Document, _focusTrapManager: FocusTrapManager, _inertStrategy: FocusTrapInertStrategy, config: ConfigurableFocusTrapConfig, injector?: Injector);
  destroy(): void;
  _disable(): void;
  _enable(): void;