diff --git a/src/material/tabs/tab-group.html b/src/material/tabs/tab-group.html index 27648e3ae6d8..1d43663f984f 100644 --- a/src/material/tabs/tab-group.html +++ b/src/material/tabs/tab-group.html @@ -58,6 +58,7 @@ [id]="_getTabContentId(i)" [attr.tabindex]="(contentTabIndex != null && selectedIndex === i) ? contentTabIndex : null" [attr.aria-labelledby]="_getTabLabelId(i)" + [attr.aria-hidden]="selectedIndex !== i" [class.mat-mdc-tab-body-active]="selectedIndex === i" [ngClass]="tab.bodyClass" [content]="tab.content!" diff --git a/src/material/tabs/tab-group.spec.ts b/src/material/tabs/tab-group.spec.ts index 0b092d81f4b7..31b468ec456a 100644 --- a/src/material/tabs/tab-group.spec.ts +++ b/src/material/tabs/tab-group.spec.ts @@ -441,6 +441,25 @@ describe('MDC-based MatTabGroup', () => { }); }); + describe('aria labelling of tab panels', () => { + let fixture: ComponentFixture; + let tabPanels: HTMLElement[]; + + beforeEach(fakeAsync(() => { + fixture = TestBed.createComponent(BindedTabsTestApp); + fixture.detectChanges(); + tick(); + tabPanels = Array.from(fixture.nativeElement.querySelectorAll('.mat-mdc-tab-body')); + })); + + it('should set `aria-hidden="true"` on inactive tab panels', () => { + fixture.detectChanges(); + + expect(tabPanels[0].getAttribute('aria-hidden')).not.toBe('true'); + expect(tabPanels[1].getAttribute('aria-hidden')).toBe('true'); + }); + }); + describe('disable tabs', () => { let fixture: ComponentFixture;