diff --git a/src/lib/tabs/tab-group.html b/src/lib/tabs/tab-group.html index 9a9148f8906..2f84478496c 100644 --- a/src/lib/tabs/tab-group.html +++ b/src/lib/tabs/tab-group.html @@ -7,6 +7,8 @@ *ngFor="let tab of _tabs; let i = index" [id]="_getTabLabelId(i)" [attr.tabIndex]="_getTabIndex(tab, i)" + [attr.aria-posinset]="i + 1" + [attr.aria-setsize]="_tabs.length" [attr.aria-controls]="_getTabContentId(i)" [attr.aria-selected]="selectedIndex == i" [class.mat-tab-label-active]="selectedIndex == i" diff --git a/src/lib/tabs/tab-group.spec.ts b/src/lib/tabs/tab-group.spec.ts index 0a300124fac..bb760eb8bce 100644 --- a/src/lib/tabs/tab-group.spec.ts +++ b/src/lib/tabs/tab-group.spec.ts @@ -221,6 +221,16 @@ describe('MatTabGroup', () => { expect(fixture.componentInstance.animationDone).toHaveBeenCalled(); })); + + it('should add the proper `aria-setsize` and `aria-posinset`', () => { + fixture.detectChanges(); + + const labels = Array.from(element.querySelectorAll('.mat-tab-label')); + + expect(labels.map(label => label.getAttribute('aria-posinset'))).toEqual(['1', '2', '3']); + expect(labels.every(label => label.getAttribute('aria-setsize') === '3')).toBe(true); + }); + }); describe('disable tabs', () => {