fix(stepper): remove tabindex from content (#16809)

A while ago in #14892 we added a `tabindex` to the content of the current step, however since then we consulted with the a11y team and it looks like adding the `tabindex` there isn't the best approach. Fixes #16692.
angular · Aug 6, 2020 · df7156e · df7156e
1 parent 1b1c31e
commit df7156e
Show file tree

Hide file tree

Showing 3 changed files with 0 additions and 19 deletions.
diff --git a/src/material/stepper/stepper-horizontal.html b/src/material/stepper/stepper-horizontal.html
@@ -27,7 +27,6 @@
 
 <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/material/stepper/stepper-vertical.html b/src/material/stepper/stepper-vertical.html
@@ -23,7 +23,6 @@
 
   <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/material/stepper/stepper.spec.ts b/src/material/stepper/stepper.spec.ts
@@ -377,23 +377,6 @@ describe('MatStepper', () => {
       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');
-    });
-
     it('should have a focus indicator', () => {
       const stepHeaderNativeElements =
           [...fixture.debugElement.nativeElement.querySelectorAll('.mat-vertical-stepper-header')];