fix: allow keyboard navigation to tabs when none are active

Author: hperrin

packages/tab-bar/TabBar.svelte

@@ -68,6 +68,18 @@
     }
   }
 
+  $: if (tabs.length) {
+    // Manually get the accessor so it is reactive.
+    const accessor =
+      tabs[0] instanceof Object
+        ? tabAccessorWeakMap.get(tabs[0])
+        : tabAccessorMap[tabs[0]];
+
+    if (accessor) {
+      accessor.forceAccessible(activeIndex === -1);
+    }
+  }
+
   $: if (instance) {
     instance.setUseAutomaticActivation(useAutomaticActivation);
   }
@@ -142,16 +154,20 @@
   function addAccessor(tabId, accessor) {
     if (tabId instanceof Object) {
       tabAccessorWeakMap.set(tabId, accessor);
+      tabAccessorWeakMap = tabAccessorWeakMap;
     } else {
       tabAccessorMap[tabId] = accessor;
+      tabAccessorMap = tabAccessorMap;
     }
   }
 
   function removeAccessor(tabId) {
     if (tabId instanceof Object) {
       tabAccessorWeakMap.delete(tabId);
+      tabAccessorWeakMap = tabAccessorWeakMap;
     } else {
       delete tabAccessorMap[tabId];
+      tabAccessorMap = tabAccessorMap;
     }
   }
 

packages/tab/Tab.svelte

@@ -25,7 +25,7 @@
   })}
   role="tab"
   aria-selected={active ? 'true' : 'false'}
-  tabindex={active ? '0' : '-1'}
+  tabindex={active || forceAccessible ? '0' : '-1'}
   {href}
   on:click={instance && instance.handleClick()}
   {...internalAttrs}
@@ -109,20 +109,7 @@
   let internalAttrs = {};
   let focusOnActivate = getContext('SMUI:tab:focusOnActivate');
   let active = tabId === getContext('SMUI:tab:initialActive');
-  let accessor = {
-    tabId,
-    get element() {
-      return getElement();
-    },
-    get active() {
-      return active;
-    },
-    computeIndicatorClientRect: () => tabIndicator.computeContentClientRect(),
-    computeDimensions: () => instance.computeDimensions(),
-    focus,
-    activate,
-    deactivate,
-  };
+  let forceAccessible = false;
 
   export let component = href == null ? Button : A;
 
@@ -157,6 +144,24 @@
       focus,
     });
 
+    const accessor = {
+      tabId,
+      get element() {
+        return getElement();
+      },
+      get active() {
+        return active;
+      },
+      forceAccessible(accessible) {
+        forceAccessible = accessible;
+      },
+      computeIndicatorClientRect: () => tabIndicator.computeContentClientRect(),
+      computeDimensions: () => instance.computeDimensions(),
+      focus,
+      activate,
+      deactivate,
+    };
+
     dispatch(getElement(), 'SMUI:tab:mount', accessor);
 
     instance.init();