From 9a771648f6cd942d04e99bf78b36c989b8a822a3 Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@users.noreply.github.com>
Date: Tue, 5 Mar 2019 20:29:57 +0100
Subject: [PATCH] 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).
---
 src/lib/stepper/stepper-horizontal.html |  1 +
 src/lib/stepper/stepper-vertical.html   |  1 +
 src/lib/stepper/stepper.scss            | 11 ++++++++---
 src/lib/stepper/stepper.spec.ts         | 17 +++++++++++++++++
 4 files changed, 27 insertions(+), 3 deletions(-)

diff --git a/src/lib/stepper/stepper-horizontal.html b/src/lib/stepper/stepper-horizontal.html
index 9f9935264af..142df9aa03a 100644
--- a/src/lib/stepper/stepper-horizontal.html
+++ b/src/lib/stepper/stepper-horizontal.html
@@ -27,6 +27,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)"
diff --git a/src/lib/stepper/stepper-vertical.html b/src/lib/stepper/stepper-vertical.html
index 7d830fd2a7e..43c634ea45e 100644
--- a/src/lib/stepper/stepper-vertical.html
+++ b/src/lib/stepper/stepper-vertical.html
@@ -23,6 +23,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)"
diff --git a/src/lib/stepper/stepper.scss b/src/lib/stepper/stepper.scss
index 5351f070e43..2c2b1b312c0 100644
--- a/src/lib/stepper/stepper.scss
+++ b/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 {
diff --git a/src/lib/stepper/stepper.spec.ts b/src/lib/stepper/stepper.spec.ts
index e25f3f8a1e6..488fc705c40 100644
--- a/src/lib/stepper/stepper.spec.ts
+++ b/src/lib/stepper/stepper.spec.ts
@@ -361,6 +361,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', () => {