Skip to content

Commit 85afb00

Browse files
committed
test(material/stepper): fixes failing stepper tests
Updates stepper.spec.ts to match updated aria-roles for vertical stepper so that it is looking for the appropriate roles/attributes.
1 parent d36ab12 commit 85afb00

File tree

2 files changed

+9
-17
lines changed

2 files changed

+9
-17
lines changed

src/material/stepper/stepper.html

+3-3
Original file line numberDiff line numberDiff line change
@@ -62,9 +62,9 @@
6262
}
6363

6464
@case ('vertical') {
65-
<div class="mat-vertical-stepper-wrapper" role="region">
65+
<div class="mat-vertical-stepper-wrapper" role="group">
6666
@for (step of steps; track step) {
67-
<div class="mat-step" role="group">
67+
<div class="mat-step">
6868
<mat-step-header
6969
class="mat-vertical-stepper-header"
7070
role="button"
@@ -77,7 +77,7 @@
7777
[attr.aria-controls]="_getStepContentId($index)"
7878
[attr.aria-current]="selectedIndex == $index"
7979
[attr.aria-label]="step.ariaLabel || null"
80-
[attr.aria-labelledby]="(!step.ariaLabel && step.ariaLabelledby) ? step.ariaLabelledby : null"
80+
[attr.aria-labelledby]="(!step.ariaLabel && step.ariaLabelledby) ? step.ariaLabelledby : _getStepLabelId($index)"
8181
[attr.aria-disabled]="_stepIsNavigable($index, step) ? null : true"
8282
[index]="$index"
8383
[state]="_getIndicatorType($index, step.state)"

src/material/stepper/stepper.spec.ts

+6-14
Original file line numberDiff line numberDiff line change
@@ -132,11 +132,12 @@ describe('MatStepper', () => {
132132
expect(stepperComponent.selected instanceof MatStep).toBe(true);
133133
});
134134

135-
it('should set the "region" role on the vertical stepper', () => {
136-
const stepperEl = fixture.debugElement.query(
137-
By.css('mat-vertical-stepper-wrapper'),
138-
)!.nativeElement;
139-
expect(stepperEl.getAttribute('role')).toBe('region');
135+
it('should set the "group" role on a vertical stepper', () => {
136+
const stepperWrapper = fixture.debugElement.query(By.css('.mat-vertical-stepper-wrapper'));
137+
expect(stepperWrapper).toBeTruthy();
138+
139+
const stepperEl = stepperWrapper!.nativeElement;
140+
expect(stepperEl.getAttribute('role')).toBe('group');
140141
});
141142

142143
it('should display the correct label', () => {
@@ -383,15 +384,6 @@ describe('MatStepper', () => {
383384
animationDoneSubscription.unsubscribe();
384385
});
385386

386-
it('should set the correct aria-posinset and aria-setsize', () => {
387-
const headers = Array.from<HTMLElement>(
388-
fixture.nativeElement.querySelectorAll('.mat-step-header'),
389-
);
390-
391-
expect(headers.map(header => header.getAttribute('aria-posinset'))).toEqual(['1', '2', '3']);
392-
expect(headers.every(header => header.getAttribute('aria-setsize') === '3')).toBe(true);
393-
});
394-
395387
it('should adjust the index when removing a step before the current one', () => {
396388
const stepperComponent: MatStepper = fixture.debugElement.query(
397389
By.css('mat-stepper'),

0 commit comments

Comments
 (0)