diff --git a/src/cdk-experimental/tabs/tabs.spec.ts b/src/cdk-experimental/tabs/tabs.spec.ts index 957aba2de09e..260d9da3f314 100644 --- a/src/cdk-experimental/tabs/tabs.spec.ts +++ b/src/cdk-experimental/tabs/tabs.spec.ts @@ -223,10 +223,15 @@ describe('CdkTabs', () => { }); }); - it('should have tabindex="0"', () => { - tabPanelElements.forEach(panelElement => { - expect(panelElement.getAttribute('tabindex')).toBe('0'); - }); + it('should have tabindex="0" when visible.', () => { + updateTabs({selectedTab: 'tab1'}); + expect(tabPanelElements[0].getAttribute('tabindex')).toBe('0'); + }); + + it('should have tabindex="-1" when hidden.', () => { + updateTabs({selectedTab: 'tab1'}); + expect(tabPanelElements[1].getAttribute('tabindex')).toBe('-1'); + expect(tabPanelElements[2].getAttribute('tabindex')).toBe('-1'); }); it('should have inert attribute when hidden and not when visible', () => { diff --git a/src/cdk-experimental/tabs/tabs.ts b/src/cdk-experimental/tabs/tabs.ts index cfe77ac0cbc3..4f311f63a643 100644 --- a/src/cdk-experimental/tabs/tabs.ts +++ b/src/cdk-experimental/tabs/tabs.ts @@ -288,9 +288,9 @@ export class CdkTab implements HasElement, OnInit, OnDestroy { exportAs: 'cdkTabPanel', host: { 'role': 'tabpanel', - 'tabindex': '0', 'class': 'cdk-tabpanel', '[attr.id]': 'pattern.id()', + '[attr.tabindex]': 'pattern.tabindex()', '[attr.inert]': 'pattern.hidden() ? true : null', }, hostDirectives: [ diff --git a/src/cdk-experimental/ui-patterns/tabs/tabs.spec.ts b/src/cdk-experimental/ui-patterns/tabs/tabs.spec.ts index 4e3010b49680..0c72fbd2b38f 100644 --- a/src/cdk-experimental/ui-patterns/tabs/tabs.spec.ts +++ b/src/cdk-experimental/ui-patterns/tabs/tabs.spec.ts @@ -156,6 +156,17 @@ describe('Tabs Pattern', () => { expect(tabPanelPatterns[1].hidden()).toBeTrue(); }); + it('should set a tabpanel tabindex to 0 if the tab is selected.', () => { + tabListInputs.value.set(['tab-1']); + expect(tabPatterns[0].tabindex()).toBe(0); + }); + + it('should set a tabpanel tabindex to -1 if the tab is not selected.', () => { + tabListInputs.value.set(['tab-1']); + expect(tabPatterns[1].tabindex()).toBe(-1); + expect(tabPatterns[2].tabindex()).toBe(-1); + }); + it('gets a controlled tabpanel id from a tab.', () => { expect(tabPanelPatterns[0].id()).toBe('tabpanel-1-id'); expect(tabPatterns[0].controls()).toBe('tabpanel-1-id'); diff --git a/src/cdk-experimental/ui-patterns/tabs/tabs.ts b/src/cdk-experimental/ui-patterns/tabs/tabs.ts index 244b15cf5e82..8f8694a5fb1e 100644 --- a/src/cdk-experimental/ui-patterns/tabs/tabs.ts +++ b/src/cdk-experimental/ui-patterns/tabs/tabs.ts @@ -113,6 +113,9 @@ export class TabPanelPattern { /** Whether the tabpanel is hidden. */ readonly hidden = computed(() => this.inputs.tab()?.expanded() === false); + /** The tabindex of this tabpanel. */ + readonly tabindex = computed(() => (this.hidden() ? -1 : 0)); + constructor(readonly inputs: TabPanelInputs) { this.id = inputs.id; this.value = inputs.value;