Skip to content

Commit df7156e

Browse files
authored
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.
1 parent 1b1c31e commit df7156e

File tree

3 files changed

+0
-19
lines changed

3 files changed

+0
-19
lines changed

src/material/stepper/stepper-horizontal.html

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,6 @@
2727

2828
<div class="mat-horizontal-content-container">
2929
<div *ngFor="let step of steps; let i = index"
30-
[attr.tabindex]="selectedIndex === i ? 0 : null"
3130
class="mat-horizontal-stepper-content" role="tabpanel"
3231
[@stepTransition]="_getAnimationDirection(i)"
3332
(@stepTransition.done)="_animationDone.next($event)"

src/material/stepper/stepper-vertical.html

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,6 @@
2323

2424
<div class="mat-vertical-content-container" [class.mat-stepper-vertical-line]="!isLast">
2525
<div class="mat-vertical-stepper-content" role="tabpanel"
26-
[attr.tabindex]="selectedIndex === i ? 0 : null"
2726
[@stepTransition]="_getAnimationDirection(i)"
2827
(@stepTransition.done)="_animationDone.next($event)"
2928
[id]="_getStepContentId(i)"

src/material/stepper/stepper.spec.ts

Lines changed: 0 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -377,23 +377,6 @@ describe('MatStepper', () => {
377377
assertSelectKeyWithModifierInteraction(fixture, stepHeaders, 'vertical', SPACE);
378378
});
379379

380-
it('should set the proper tabindex', () => {
381-
let stepContents = fixture.debugElement.queryAll(By.css(`.mat-vertical-stepper-content`));
382-
let stepperComponent =
383-
fixture.debugElement.query(By.directive(MatStepper))!.componentInstance;
384-
let firstStepContentEl = stepContents[0].nativeElement;
385-
let secondStepContentEl = stepContents[1].nativeElement;
386-
387-
expect(firstStepContentEl.getAttribute('tabindex')).toBe('0');
388-
expect(secondStepContentEl.getAttribute('tabindex')).toBeFalsy();
389-
390-
stepperComponent.selectedIndex = 1;
391-
fixture.detectChanges();
392-
393-
expect(firstStepContentEl.getAttribute('tabindex')).toBeFalsy();
394-
expect(secondStepContentEl.getAttribute('tabindex')).toBe('0');
395-
});
396-
397380
it('should have a focus indicator', () => {
398381
const stepHeaderNativeElements =
399382
[...fixture.debugElement.nativeElement.querySelectorAll('.mat-vertical-stepper-header')];

0 commit comments

Comments
 (0)