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

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;