Skip to content

Commit 8f27b2a

Browse files
stevenyxuandrewseguin
authored andcommitted
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.
1 parent aaf5c81 commit 8f27b2a

File tree

2 files changed

+17
-0
lines changed

2 files changed

+17
-0
lines changed

src/lib/tabs/tab-nav-bar/tab-nav-bar.spec.ts

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,23 @@ describe('MatTabNavBar', () => {
6666
fixture.detectChanges();
6767
expect(tabLinkElements[0].classList.contains('mat-tab-label-active')).toBeFalsy();
6868
expect(tabLinkElements[1].classList.contains('mat-tab-label-active')).toBeTruthy();
69+
});
70+
71+
it('should toggle aria-current based on active state', () => {
72+
let tabLink1 = fixture.debugElement.queryAll(By.css('a'))[0];
73+
let tabLink2 = fixture.debugElement.queryAll(By.css('a'))[1];
74+
const tabLinkElements = fixture.debugElement.queryAll(By.css('a'))
75+
.map(tabLinkDebugEl => tabLinkDebugEl.nativeElement);
6976

77+
tabLink1.nativeElement.click();
78+
fixture.detectChanges();
79+
expect(tabLinkElements[0].getAttribute('aria-current')).toEqual('true');
80+
expect(tabLinkElements[1].getAttribute('aria-current')).toEqual('false');
81+
82+
tabLink2.nativeElement.click();
83+
fixture.detectChanges();
84+
expect(tabLinkElements[0].getAttribute('aria-current')).toEqual('false');
85+
expect(tabLinkElements[1].getAttribute('aria-current')).toEqual('true');
7086
});
7187

7288
it('should add the disabled class if disabled', () => {

src/lib/tabs/tab-nav-bar/tab-nav-bar.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -172,6 +172,7 @@ export const _MatTabLinkMixinBase =
172172
inputs: ['disabled', 'disableRipple', 'tabIndex'],
173173
host: {
174174
'class': 'mat-tab-link',
175+
'[attr.aria-current]': 'active',
175176
'[attr.aria-disabled]': 'disabled.toString()',
176177
'[attr.tabIndex]': 'tabIndex',
177178
'[class.mat-tab-disabled]': 'disabled',

0 commit comments

Comments
 (0)