fix(tabs): tab position and amount of tabs not being read out by screen reader (#11694)

Fixes some screenreader/browser combinations not reading out the amount of tabs and the index of the current tab.

Fixes #11369.
This commit is contained in:
Kristiyan Kostadinov
2018-06-07 07:47:12 +02:00
committed by Andrew Seguin
parent 7c1db46232
commit 260afcf470
2 changed files with 12 additions and 0 deletions
+2
View File
@@ -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"
+10
View File
@@ -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', () => {