mirror of
https://github.com/angular/angular.git
synced 2026-09-14 13:54:52 +08:00
fix(tabs): update mat-tab-link to set aria-current when active (#11409)
mat-tab-group and mat-tab use tablist and tab and sets aria-selected properly https://material.angular.io/components/tabs/overview. mat-tab-nav-bar and mat-tab-link use nav and link roles and are missing corresponding aria-current.
This commit is contained in:
@@ -66,7 +66,23 @@ describe('MatTabNavBar', () => {
|
||||
fixture.detectChanges();
|
||||
expect(tabLinkElements[0].classList.contains('mat-tab-label-active')).toBeFalsy();
|
||||
expect(tabLinkElements[1].classList.contains('mat-tab-label-active')).toBeTruthy();
|
||||
});
|
||||
|
||||
it('should toggle aria-current based on active state', () => {
|
||||
let tabLink1 = fixture.debugElement.queryAll(By.css('a'))[0];
|
||||
let tabLink2 = fixture.debugElement.queryAll(By.css('a'))[1];
|
||||
const tabLinkElements = fixture.debugElement.queryAll(By.css('a'))
|
||||
.map(tabLinkDebugEl => tabLinkDebugEl.nativeElement);
|
||||
|
||||
tabLink1.nativeElement.click();
|
||||
fixture.detectChanges();
|
||||
expect(tabLinkElements[0].getAttribute('aria-current')).toEqual('true');
|
||||
expect(tabLinkElements[1].getAttribute('aria-current')).toEqual('false');
|
||||
|
||||
tabLink2.nativeElement.click();
|
||||
fixture.detectChanges();
|
||||
expect(tabLinkElements[0].getAttribute('aria-current')).toEqual('false');
|
||||
expect(tabLinkElements[1].getAttribute('aria-current')).toEqual('true');
|
||||
});
|
||||
|
||||
it('should add the disabled class if disabled', () => {
|
||||
|
||||
@@ -172,6 +172,7 @@ export const _MatTabLinkMixinBase =
|
||||
inputs: ['disabled', 'disableRipple', 'tabIndex'],
|
||||
host: {
|
||||
'class': 'mat-tab-link',
|
||||
'[attr.aria-current]': 'active',
|
||||
'[attr.aria-disabled]': 'disabled.toString()',
|
||||
'[attr.tabIndex]': 'tabIndex',
|
||||
'[class.mat-tab-disabled]': 'disabled',
|
||||
|
||||
Reference in New Issue
Block a user