Skip to content

Commit 8a091a7

Browse files
authored
fix(cdk-experimental/tabs): set tabpanel tabindex to -1 if hidden (#31401)
1 parent bc0ae7b commit 8a091a7

File tree

4 files changed

+24
-5
lines changed

4 files changed

+24
-5
lines changed

src/cdk-experimental/tabs/tabs.spec.ts

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -223,10 +223,15 @@ describe('CdkTabs', () => {
223223
});
224224
});
225225

226-
it('should have tabindex="0"', () => {
227-
tabPanelElements.forEach(panelElement => {
228-
expect(panelElement.getAttribute('tabindex')).toBe('0');
229-
});
226+
it('should have tabindex="0" when visible.', () => {
227+
updateTabs({selectedTab: 'tab1'});
228+
expect(tabPanelElements[0].getAttribute('tabindex')).toBe('0');
229+
});
230+
231+
it('should have tabindex="-1" when hidden.', () => {
232+
updateTabs({selectedTab: 'tab1'});
233+
expect(tabPanelElements[1].getAttribute('tabindex')).toBe('-1');
234+
expect(tabPanelElements[2].getAttribute('tabindex')).toBe('-1');
230235
});
231236

232237
it('should have inert attribute when hidden and not when visible', () => {

src/cdk-experimental/tabs/tabs.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -288,9 +288,9 @@ export class CdkTab implements HasElement, OnInit, OnDestroy {
288288
exportAs: 'cdkTabPanel',
289289
host: {
290290
'role': 'tabpanel',
291-
'tabindex': '0',
292291
'class': 'cdk-tabpanel',
293292
'[attr.id]': 'pattern.id()',
293+
'[attr.tabindex]': 'pattern.tabindex()',
294294
'[attr.inert]': 'pattern.hidden() ? true : null',
295295
},
296296
hostDirectives: [

src/cdk-experimental/ui-patterns/tabs/tabs.spec.ts

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -156,6 +156,17 @@ describe('Tabs Pattern', () => {
156156
expect(tabPanelPatterns[1].hidden()).toBeTrue();
157157
});
158158

159+
it('should set a tabpanel tabindex to 0 if the tab is selected.', () => {
160+
tabListInputs.value.set(['tab-1']);
161+
expect(tabPatterns[0].tabindex()).toBe(0);
162+
});
163+
164+
it('should set a tabpanel tabindex to -1 if the tab is not selected.', () => {
165+
tabListInputs.value.set(['tab-1']);
166+
expect(tabPatterns[1].tabindex()).toBe(-1);
167+
expect(tabPatterns[2].tabindex()).toBe(-1);
168+
});
169+
159170
it('gets a controlled tabpanel id from a tab.', () => {
160171
expect(tabPanelPatterns[0].id()).toBe('tabpanel-1-id');
161172
expect(tabPatterns[0].controls()).toBe('tabpanel-1-id');

src/cdk-experimental/ui-patterns/tabs/tabs.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -113,6 +113,9 @@ export class TabPanelPattern {
113113
/** Whether the tabpanel is hidden. */
114114
readonly hidden = computed(() => this.inputs.tab()?.expanded() === false);
115115

116+
/** The tabindex of this tabpanel. */
117+
readonly tabindex = computed(() => (this.hidden() ? -1 : 0));
118+
116119
constructor(readonly inputs: TabPanelInputs) {
117120
this.id = inputs.id;
118121
this.value = inputs.value;

0 commit comments

Comments
 (0)