fix(stepper): unable to tab to step content (#14892)

Along the same line as #14808. Fixes not being able to reach the content of a step if it doesn't have focusable content already. Based on the [tabs example from the accessibility guidelines](https://www.w3.org/TR/wai-aria-practices-1.1/examples/tabs/tabs-2/tabs.html).

Author: crisbeto

src/lib/stepper/stepper-horizontal.html

@@ -26,6 +26,7 @@
 
 <div class="mat-horizontal-content-container">
   <div *ngFor="let step of steps; let i = index"
+       [attr.tabindex]="selectedIndex === i ? 0 : null"
        class="mat-horizontal-stepper-content" role="tabpanel"
        [@stepTransition]="_getAnimationDirection(i)"
        (@stepTransition.done)="_animationDone.next($event)"

src/lib/stepper/stepper-vertical.html

@@ -22,6 +22,7 @@
 
   <div class="mat-vertical-content-container" [class.mat-stepper-vertical-line]="!isLast">
     <div class="mat-vertical-stepper-content" role="tabpanel"
+         [attr.tabindex]="selectedIndex === i ? 0 : null"
          [@stepTransition]="_getAnimationDirection(i)"
          (@stepTransition.done)="_animationDone.next($event)"
          [id]="_getStepContentId(i)"

src/lib/stepper/stepper.scss

@@ -124,9 +124,13 @@ $mat-stepper-line-gap: 8px !default;
   }
 }
 
-.mat-horizontal-stepper-content[aria-expanded='false'] {
-  height: 0;
-  overflow: hidden;
+.mat-horizontal-stepper-content {
+  outline: 0;
+
+  &[aria-expanded='false'] {
+    height: 0;
+    overflow: hidden;
+  }
 }
 
 .mat-horizontal-content-container {
@@ -162,6 +166,7 @@ $mat-stepper-line-gap: 8px !default;
 
 .mat-vertical-stepper-content {
   overflow: hidden;
+  outline: 0;
 }
 
 .mat-vertical-content {

src/lib/stepper/stepper.spec.ts

@@ -360,6 +360,23 @@ describe('MatStepper', () => {
       const stepHeaders = fixture.debugElement.queryAll(By.css('.mat-vertical-stepper-header'));
       assertSelectKeyWithModifierInteraction(fixture, stepHeaders, 'vertical', SPACE);
     });
+
+    it('should set the proper tabindex', () => {
+      let stepContents = fixture.debugElement.queryAll(By.css(`.mat-vertical-stepper-content`));
+      let stepperComponent = fixture.debugElement.query(By.directive(MatStepper)).componentInstance;
+      let firstStepContentEl = stepContents[0].nativeElement;
+      let secondStepContentEl = stepContents[1].nativeElement;
+
+      expect(firstStepContentEl.getAttribute('tabindex')).toBe('0');
+      expect(secondStepContentEl.getAttribute('tabindex')).toBeFalsy();
+
+      stepperComponent.selectedIndex = 1;
+      fixture.detectChanges();
+
+      expect(firstStepContentEl.getAttribute('tabindex')).toBeFalsy();
+      expect(secondStepContentEl.getAttribute('tabindex')).toBe('0');
+    });
+
   });
 
   describe('basic stepper when attempting to set the selected step too early', () => {