diff --git a/src/material/tabs/tab-group.html b/src/material/tabs/tab-group.html index 6bfb950472a4..78610e9a5ebe 100644 --- a/src/material/tabs/tab-group.html +++ b/src/material/tabs/tab-group.html @@ -40,6 +40,7 @@ *ngFor="let tab of _tabs; let i = index" [id]="_getTabContentId(i)" [attr.aria-labelledby]="_getTabLabelId(i)" + [attr.tabindex]="selectedIndex === i ? 0 : null" [class.mat-tab-body-active]="selectedIndex == i" [content]="tab.content!" [position]="tab.position!" diff --git a/src/material/tabs/tab-group.scss b/src/material/tabs/tab-group.scss index 672e358b6b88..a3112e43a0f4 100644 --- a/src/material/tabs/tab-group.scss +++ b/src/material/tabs/tab-group.scss @@ -50,6 +50,7 @@ @include mat-fill; display: block; overflow: hidden; + outline: 0; // Fix for auto content wrapping in IE11 flex-basis: 100%; diff --git a/src/material/tabs/tab-group.spec.ts b/src/material/tabs/tab-group.spec.ts index db724031e912..35d2fbc12566 100644 --- a/src/material/tabs/tab-group.spec.ts +++ b/src/material/tabs/tab-group.spec.ts @@ -298,6 +298,27 @@ describe('MatTabGroup', () => { expect(tabLabelNativeElements.every(el => el.classList.contains('mat-focus-indicator'))) .toBe(true); }); + + it('should set the correct tabindex on the tab content elements', fakeAsync(() => { + fixture.detectChanges(); + tick(); + + const contentElements: NodeListOf = + fixture.nativeElement.querySelectorAll('.mat-tab-body'); + + expect(contentElements[0].hasAttribute('tabindex')).toBe(false); + expect(contentElements[1].getAttribute('tabindex')).toBe('0'); + expect(contentElements[2].hasAttribute('tabindex')).toBe(false); + + fixture.componentInstance.selectedIndex = 2; + fixture.detectChanges(); + tick(); + + expect(contentElements[0].hasAttribute('tabindex')).toBe(false); + expect(contentElements[1].hasAttribute('tabindex')).toBe(false); + expect(contentElements[2].getAttribute('tabindex')).toBe('0'); + })); + }); describe('aria labelling', () => {