From 103acc4ab5f62cdf9c709d1f5728248297ab83a5 Mon Sep 17 00:00:00 2001 From: Steven Xu Date: Wed, 6 Jun 2018 22:38:09 -0700 Subject: [PATCH] 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. --- src/lib/tabs/tab-nav-bar/tab-nav-bar.spec.ts | 16 ++++++++++++++++ src/lib/tabs/tab-nav-bar/tab-nav-bar.ts | 1 + 2 files changed, 17 insertions(+) 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',