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

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';
 
@@ -534,7 +535,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';
@@ -271,7 +273,32 @@ describe('MatStepper', () => {
       expect(stepHeaderEl.focus).not.toHaveBeenCalled();
     });
 
-    it('should focus next step header if focus is inside the stepper', () => {
+    fit('should focus next step header if focus is inside the stepper', () => {
+      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 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 =
@@ -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);
 }