mirror of
https://github.com/angular/angular.git
synced 2026-09-14 13:54:52 +08:00
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:
committed by
Andrew Seguin
parent
7c1db46232
commit
260afcf470
@@ -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"
|
||||
|
||||
@@ -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', () => {
|
||||
|
||||
Reference in New Issue
Block a user