@@ -1017,6 +1017,15 @@ describe('MatStepper', () => {
10171017 expect ( headers [ 2 ] . classList . contains ( 'mat-primary' ) ) . toBe ( true ) ;
10181018 expect ( headers [ 1 ] . classList . contains ( 'mat-accent' ) ) . toBe ( true ) ;
10191019 } ) ;
1020+
1021+ it ( 'should set an aria label on the content container' , ( ) => {
1022+ const fixture = createComponent ( SimpleMatVerticalStepperApp ) ;
1023+ fixture . componentInstance . ariaLabel . set ( 'My Stepper' ) ;
1024+ fixture . detectChanges ( ) ;
1025+
1026+ const container = fixture . nativeElement . querySelector ( '.mat-vertical-content-container' ) ;
1027+ expect ( container . getAttribute ( 'aria-label' ) ) . toBe ( 'My Stepper' ) ;
1028+ } ) ;
10201029 } ) ;
10211030
10221031 describe ( 'horizontal stepper' , ( ) => {
@@ -1217,6 +1226,17 @@ describe('MatStepper', () => {
12171226
12181227 expect ( stepperHost . classList ) . toContain ( 'mat-stepper-header-position-bottom' ) ;
12191228 } ) ;
1229+
1230+ it ( 'should set an aria-label on the header container' , ( ) => {
1231+ const fixture = createComponent ( SimpleMatHorizontalStepperApp ) ;
1232+ fixture . componentInstance . ariaLabel . set ( 'My Stepper' ) ;
1233+ fixture . detectChanges ( ) ;
1234+
1235+ const container = fixture . nativeElement . querySelector (
1236+ '.mat-horizontal-stepper-header-container' ,
1237+ ) ;
1238+ expect ( container . getAttribute ( 'aria-label' ) ) . toBe ( 'My Stepper' ) ;
1239+ } ) ;
12201240 } ) ;
12211241
12221242 describe ( 'linear stepper with valid step' , ( ) => {
@@ -1849,7 +1869,8 @@ class MatHorizontalStepperWithErrorsApp {
18491869 <mat-stepper
18501870 [disableRipple]="disableRipple()"
18511871 [color]="stepperTheme()"
1852- [headerPosition]="headerPosition()">
1872+ [headerPosition]="headerPosition()"
1873+ [aria-label]="ariaLabel()">
18531874 <mat-step>
18541875 <ng-template matStepLabel>Step 1</ng-template>
18551876 Content 1
@@ -1881,6 +1902,7 @@ class MatHorizontalStepperWithErrorsApp {
18811902class SimpleMatHorizontalStepperApp {
18821903 @ViewChild ( MatStepper ) stepper ! : MatStepper ;
18831904 inputLabel = 'Step 3' ;
1905+ ariaLabel = signal < string | null > ( null ) ;
18841906 disableRipple = signal ( false ) ;
18851907 stepperTheme = signal < ThemePalette > ( undefined ) ;
18861908 secondStepTheme = signal < ThemePalette > ( undefined ) ;
@@ -1889,7 +1911,7 @@ class SimpleMatHorizontalStepperApp {
18891911
18901912@Component ( {
18911913 template : `
1892- <mat-stepper orientation="vertical" [disableRipple]="disableRipple()" [color]="stepperTheme()">
1914+ <mat-stepper orientation="vertical" [disableRipple]="disableRipple()" [color]="stepperTheme()" [aria-label]="ariaLabel()" >
18931915 <mat-step>
18941916 <ng-template matStepLabel>Step 1</ng-template>
18951917 Content 1
@@ -1923,6 +1945,7 @@ class SimpleMatHorizontalStepperApp {
19231945class SimpleMatVerticalStepperApp {
19241946 @ViewChild ( MatStepper ) stepper ! : MatStepper ;
19251947 inputLabel = signal ( 'Step 3' ) ;
1948+ ariaLabel = signal < string | null > ( null ) ;
19261949 showStepTwo = signal ( true ) ;
19271950 disableRipple = signal ( false ) ;
19281951 stepperTheme = signal < ThemePalette > ( undefined ) ;
0 commit comments