fix(tabs): ensure tablist is keyboard reachable when no active tab is defined

Author: akashsonune

projects/element-ng/tabs/si-tabset.component.ts

@@ -29,6 +29,7 @@ import { SiResizeObserverModule } from '@siemens/element-ng/resize-observer';
 import { SiTabBadgeComponent } from './si-tab-badge.component';
 import { SiTabBaseDirective } from './si-tab-base.directive';
 import { SiTabLinkComponent } from './si-tab-link.component';
+import { SiTabComponent } from './si-tab.component';
 import { SI_TABSET } from './si-tabs-tokens';
 
 /**
@@ -94,6 +95,16 @@ export class SiTabsetComponent {
   }
 
   constructor() {
+    // Per the ARIA tabs pattern, at least one tab should be active. If the app
+    // does not provide an active tab, activate the first non-disabled content
+    // tab so the tablist stays keyboard reachable.
+    effect(() => {
+      const tabs = this.tabPanels();
+      if (tabs.length && !tabs.some(tab => tab.active())) {
+        tabs.find(tab => tab instanceof SiTabComponent && !tab.disabledTab())?.selectTab();
+      }
+    });
+
     effect(() => {
       if (this.showMenuButton() && this.activeTab()) {
         // wait for menu button to render on DOM