diff --git a/src/cdk/stepper/step-header.ts b/src/cdk/stepper/step-header.ts index f0709e3f9878..26ebcbbcb0f7 100644 --- a/src/cdk/stepper/step-header.ts +++ b/src/cdk/stepper/step-header.ts @@ -12,7 +12,7 @@ import {FocusableOption} from '../a11y'; @Directive({ selector: '[cdkStepHeader]', host: { - 'role': 'tab', + 'role': 'button', }, }) export class CdkStepHeader implements FocusableOption { diff --git a/src/material/stepper/step-header.ts b/src/material/stepper/step-header.ts index 998e5d3610ad..705c90a7fdfd 100644 --- a/src/material/stepper/step-header.ts +++ b/src/material/stepper/step-header.ts @@ -35,7 +35,7 @@ import {_CdkPrivateStyleLoader, _VisuallyHiddenLoader} from '@angular/cdk/privat host: { 'class': 'mat-step-header', '[class]': '"mat-" + (color || "primary")', - 'role': 'tab', + 'role': 'button', }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, diff --git a/src/material/stepper/stepper.html b/src/material/stepper/stepper.html index 0f75e58c012b..d90a5304f0a8 100644 --- a/src/material/stepper/stepper.html +++ b/src/material/stepper/stepper.html @@ -10,7 +10,7 @@ @switch (orientation) { @case ('horizontal') { -
+
@for (step of steps; track step) { - -
-
-
- +
+ @for (step of steps; track step) { +
+ +
+
+
+ +
-
- } + } +
} } @@ -74,13 +76,15 @@ (keydown)="_onKeydown($event)" [tabIndex]="_getFocusIndex() === step.index() ? 0 : -1" [id]="_getStepLabelId(step.index())" - [attr.aria-posinset]="step.index() + 1" - [attr.aria-setsize]="steps.length" [attr.aria-controls]="_getStepContentId(step.index())" - [attr.aria-selected]="step.isSelected()" + [attr.aria-expanded]="orientation === 'vertical' ? step.isSelected() : undefined" + [attr.aria-current]="step.isSelected() ? 'step' : undefined" + [attr.aria-pressed]="step.isSelected()" [attr.aria-label]="step.ariaLabel || null" [attr.aria-labelledby]="(!step.ariaLabel && step.ariaLabelledby) ? step.ariaLabelledby : null" [attr.aria-disabled]="step.isNavigable() ? null : true" + [attr.aria-owns]="_getStepContentId(step.index())" + [attr.mat-step-index]="step.index()" [index]="step.index()" [state]="step.indicatorType()" [label]="step.stepLabel || step.label" diff --git a/src/material/stepper/stepper.ts b/src/material/stepper/stepper.ts index 6d1399dae0df..69874b427378 100644 --- a/src/material/stepper/stepper.ts +++ b/src/material/stepper/stepper.ts @@ -131,7 +131,6 @@ export class MatStep extends CdkStep implements ErrorStateMatcher, AfterContentI '[class.mat-stepper-animating]': '_isAnimating()', '[style.--mat-stepper-animation-duration]': '_getAnimationDuration()', '[attr.aria-orientation]': 'orientation', - 'role': 'tablist', }, providers: [{provide: CdkStepper, useExisting: MatStepper}], encapsulation: ViewEncapsulation.None,