diff --git a/src/cdk-experimental/tabs/tabs.spec.ts b/src/cdk-experimental/tabs/tabs.spec.ts index 260d9da3f314..f90d8aba1e55 100644 --- a/src/cdk-experimental/tabs/tabs.spec.ts +++ b/src/cdk-experimental/tabs/tabs.spec.ts @@ -234,6 +234,12 @@ describe('CdkTabs', () => { expect(tabPanelElements[2].getAttribute('tabindex')).toBe('-1'); }); + it('should have aria-labelledby pointing to its tab id', () => { + expect(tabPanelElements[0].getAttribute('aria-labelledby')).toBe(tabElements[0].id); + expect(tabPanelElements[1].getAttribute('aria-labelledby')).toBe(tabElements[1].id); + expect(tabPanelElements[2].getAttribute('aria-labelledby')).toBe(tabElements[2].id); + }); + it('should have inert attribute when hidden and not when visible', () => { updateTabs({selectedTab: 'tab1'}); expect(tabPanelElements[0].hasAttribute('inert')).toBe(false); diff --git a/src/cdk-experimental/tabs/tabs.ts b/src/cdk-experimental/tabs/tabs.ts index 4f311f63a643..d22e1b9a3e57 100644 --- a/src/cdk-experimental/tabs/tabs.ts +++ b/src/cdk-experimental/tabs/tabs.ts @@ -292,6 +292,7 @@ export class CdkTab implements HasElement, OnInit, OnDestroy { '[attr.id]': 'pattern.id()', '[attr.tabindex]': 'pattern.tabindex()', '[attr.inert]': 'pattern.hidden() ? true : null', + '[attr.aria-labelledby]': 'tab()?.id()', }, hostDirectives: [ {