Skip to content

Commit 56e703f

Browse files
crisbetojelbourn
authored andcommitted
fix(stepper): reading out wrong amount of options with NVDA on Firefox (#11711)
Fixes NVDA on Firefox reading out "Tab 1 of 1" for vertical steppers. Seems to be a similar issue to #11694.
1 parent e95623d commit 56e703f

File tree

3 files changed

+12
-0
lines changed

3 files changed

+12
-0
lines changed

src/lib/stepper/stepper-horizontal.html

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@
55
(keydown)="_onKeydown($event)"
66
[tabIndex]="_getFocusIndex() === i ? 0 : -1"
77
[id]="_getStepLabelId(i)"
8+
[attr.aria-posinset]="i + 1"
9+
[attr.aria-setsize]="_steps.length"
810
[attr.aria-controls]="_getStepContentId(i)"
911
[attr.aria-selected]="selectedIndex == i"
1012
[index]="i"

src/lib/stepper/stepper-vertical.html

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@
44
(keydown)="_onKeydown($event)"
55
[tabIndex]="_getFocusIndex() == i ? 0 : -1"
66
[id]="_getStepLabelId(i)"
7+
[attr.aria-posinset]="i + 1"
8+
[attr.aria-setsize]="_steps.length"
79
[attr.aria-controls]="_getStepContentId(i)"
810
[attr.aria-selected]="selectedIndex === i"
911
[index]="i"

src/lib/stepper/stepper.spec.ts

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -365,6 +365,14 @@ describe('MatStepper', () => {
365365
expect(stepperComponent.selectedIndex).toBe(-1);
366366
});
367367

368+
it('should set the correct aria-posinset and aria-setsize', () => {
369+
const headers =
370+
Array.from<HTMLElement>(fixture.nativeElement.querySelectorAll('.mat-step-header'));
371+
372+
expect(headers.map(header => header.getAttribute('aria-posinset'))).toEqual(['1', '2', '3']);
373+
expect(headers.every(header => header.getAttribute('aria-setsize') === '3')).toBe(true);
374+
});
375+
368376
});
369377

370378
describe('icon overrides', () => {

0 commit comments

Comments
 (0)