diff --git a/src/lib/tabs/tab-nav-bar/tab-nav-bar.spec.ts b/src/lib/tabs/tab-nav-bar/tab-nav-bar.spec.ts index b37e6a3fe71..63c3ad32b87 100644 --- a/src/lib/tabs/tab-nav-bar/tab-nav-bar.spec.ts +++ b/src/lib/tabs/tab-nav-bar/tab-nav-bar.spec.ts @@ -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', () => { diff --git a/src/lib/tabs/tab-nav-bar/tab-nav-bar.ts b/src/lib/tabs/tab-nav-bar/tab-nav-bar.ts index 918b061370f..b19545ae94d 100644 --- a/src/lib/tabs/tab-nav-bar/tab-nav-bar.ts +++ b/src/lib/tabs/tab-nav-bar/tab-nav-bar.ts @@ -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',