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

Author: akashsonune

projects/element-ng/tabs/si-tab-base.directive.ts

@@ -36,7 +36,7 @@ import { SI_TABSET } from './si-tabs-tokens';
     '[attr.id]': "'tab-' + tabId",
     '[attr.aria-selected]': 'active()',
     '[attr.aria-disabled]': 'disabledTab()',
-    '[attr.tabindex]': 'tabset.focusKeyManager.activeItem === this && !disabledTab() ? 0 : -1',
+    '[attr.tabindex]': 'tabindexValue()',
     '[attr.aria-controls]': "'content-' + tabId",
     '(keydown.delete)': 'closeTab($event)'
   }
@@ -97,6 +97,22 @@ export abstract class SiTabBaseDirective implements OnDestroy, FocusableOption {
   protected tabset = inject(SI_TABSET);
   private readonly index = computed(() => this.tabset.tabPanels().indexOf(this));
 
+  protected tabindexValue(): number {
+    if (this.disabledTab()) return -1;
+
+    const activeItem = this.tabset.focusKeyManager.activeItem;
+    if (activeItem) {
+      return activeItem === this ? 0 : -1;
+    }
+
+    // If no tab is active and no item is focused in the key manager,
+    // make the first non-disabled tab reachable via keyboard.
+    if (!this.tabset.activeTab() && this.tabset.tabPanels().find(t => !t.disabledTab()) === this)
+      return 0;
+
+    return -1;
+  }
+
   constructor() {
     // Update the focusKeyManager if a tab is added that is active or if the tab is set active by the app.
     // This effect should not run, if active was already applied to the focusKeyManager.