fix(cdk/stepper): focus management not working with shadow dom encapsulation (#23047)

The CDK stepper focus management checks against the document to find the focused element which won't work if the stepper is inside the shadow DOM. These changes use our shadow DOM helper to resolve the element instead.

Author: crisbeto

src/cdk/stepper/BUILD.bazel

@@ -15,6 +15,7 @@ ng_module(
         "//src/cdk/bidi",
         "//src/cdk/coercion",
         "//src/cdk/keycodes",
+        "//src/cdk/platform",
         "@npm//@angular/core",
         "@npm//@angular/forms",
         "@npm//rxjs",

src/cdk/stepper/stepper.ts

@@ -40,6 +40,7 @@ import {
   ViewEncapsulation,
   AfterContentInit,
 } from '@angular/core';
+import {_getFocusedElementPierceShadowDom} from '@angular/cdk/platform';
 import {Observable, of as observableOf, Subject} from 'rxjs';
 import {startWith, takeUntil} from 'rxjs/operators';
 
@@ -262,8 +263,6 @@ export class CdkStepper implements AfterContentInit, AfterViewInit, OnDestroy {
   /** Used for managing keyboard focus. */
   private _keyManager: FocusKeyManager<FocusableOption>;
 
-  private _document: Document;
-
   /** Full list of steps inside the stepper, including inside nested steppers. */
   @ContentChildren(CdkStep, {descendants: true}) _steps: QueryList<CdkStep>;
 
@@ -344,9 +343,13 @@ export class CdkStepper implements AfterContentInit, AfterViewInit, OnDestroy {
 
   constructor(
       @Optional() private _dir: Directionality, private _changeDetectorRef: ChangeDetectorRef,
-      private _elementRef: ElementRef<HTMLElement>, @Inject(DOCUMENT) _document: any) {
+      private _elementRef: ElementRef<HTMLElement>,
+      /**
+       * @deprecated No longer in use, to be removed.
+       * @breaking-change 13.0.0
+       */
+      @Inject(DOCUMENT) _document: any) {
     this._groupId = nextId++;
-    this._document = _document;
   }
 
   ngAfterContentInit() {
@@ -534,7 +537,7 @@ export class CdkStepper implements AfterContentInit, AfterViewInit, OnDestroy {
   /** Checks whether the stepper contains the focused element. */
   private _containsFocus(): boolean {
     const stepperElement = this._elementRef.nativeElement;
-    const focusedElement = this._document.activeElement;
+    const focusedElement = _getFocusedElementPierceShadowDom();
     return stepperElement === focusedElement || stepperElement.contains(focusedElement);
   }
 

src/material/stepper/BUILD.bazel

@@ -76,6 +76,7 @@ ng_test_library(
         ":stepper",
         "//src/cdk/bidi",
         "//src/cdk/keycodes",
+        "//src/cdk/platform",
         "//src/cdk/stepper",
         "//src/cdk/testing/private",
         "//src/material/core",

src/material/stepper/stepper.spec.ts

@@ -30,6 +30,7 @@ import {
   ViewChildren,
   QueryList,
   ViewChild,
+  ViewEncapsulation,
 } from '@angular/core';
 import {ComponentFixture, fakeAsync, flush, inject, TestBed} from '@angular/core/testing';
 import {
@@ -45,6 +46,7 @@ import {
 import {MatRipple, ThemePalette} from '@angular/material/core';
 import {By} from '@angular/platform-browser';
 import {NoopAnimationsModule} from '@angular/platform-browser/animations';
+import {_supportsShadowDom} from '@angular/cdk/platform';
 import {merge, Observable, Subject} from 'rxjs';
 import {map, take} from 'rxjs/operators';
 import {MatStepHeader, MatStepperModule} from './index';
@@ -287,6 +289,31 @@ describe('MatStepper', () => {
       expect(stepHeaderEl.focus).toHaveBeenCalled();
     });
 
+    it('should focus next step header if focus is inside the stepper with shadow DOM', () => {
+      if (!_supportsShadowDom()) {
+        return;
+      }
+
+      fixture.destroy();
+      TestBed.resetTestingModule();
+      fixture = createComponent(SimpleMatVerticalStepperApp, [], [], ViewEncapsulation.ShadowDom);
+      fixture.detectChanges();
+
+      const stepperComponent =
+          fixture.debugElement.query(By.directive(MatStepper))!.componentInstance;
+      const stepHeaderEl =
+          fixture.debugElement.queryAll(By.css('mat-step-header'))[1].nativeElement;
+      const nextButtonNativeEl = fixture.debugElement
+          .queryAll(By.directive(MatStepperNext))[0].nativeElement;
+      spyOn(stepHeaderEl, 'focus');
+      nextButtonNativeEl.focus();
+      nextButtonNativeEl.click();
+      fixture.detectChanges();
+
+      expect(stepperComponent.selectedIndex).toBe(1);
+      expect(stepHeaderEl.focus).toHaveBeenCalled();
+    });
+
     it('should only be able to return to a previous step if it is editable', () => {
       const stepperComponent =
           fixture.debugElement.query(By.directive(MatStepper))!.componentInstance;
@@ -1559,7 +1586,8 @@ function asyncValidator(minLength: number, validationTrigger: Subject<void>): As
 
 function createComponent<T>(component: Type<T>,
   providers: Provider[] = [],
-  imports: any[] = []): ComponentFixture<T> {
+  imports: any[] = [],
+  encapsulation?: ViewEncapsulation): ComponentFixture<T> {
   TestBed.configureTestingModule({
     imports: [
       MatStepperModule,
@@ -1572,8 +1600,15 @@ function createComponent<T>(component: Type<T>,
       {provide: Directionality, useFactory: () => dir},
       ...providers
     ],
-  }).compileComponents();
+  });
+
+  if (encapsulation != null) {
+    TestBed.overrideComponent(component, {
+      set: {encapsulation}
+    });
+  }
 
+  TestBed.compileComponents();
   return TestBed.createComponent<T>(component);
 }
 

tools/public_api_guard/cdk/stepper.d.ts

@@ -65,7 +65,8 @@ export declare class CdkStepper implements AfterContentInit, AfterViewInit, OnDe
     set selectedIndex(index: number);
     readonly selectionChange: EventEmitter<StepperSelectionEvent>;
     readonly steps: QueryList<CdkStep>;
-    constructor(_dir: Directionality, _changeDetectorRef: ChangeDetectorRef, _elementRef: ElementRef<HTMLElement>, _document: any);
+    constructor(_dir: Directionality, _changeDetectorRef: ChangeDetectorRef, _elementRef: ElementRef<HTMLElement>,
+    _document: any);
     _getAnimationDirection(index: number): StepContentPositionState;
     _getFocusIndex(): number | null;
     _getIndicatorType(index: number, state?: StepState): StepState;