fix(cdk-experimental/tabs): set tabpanel tabindex to -1 if hidden (#31401)

Author: ok7sai

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', () => {

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: [

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');

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;