fix(tabs): selected tab should not steal focus if updated programmatically (#1320)

Fixes #572

src/Tabs/Tab.svelte

@@ -20,27 +20,13 @@
   /** Obtain a reference to the anchor HTML element */
   export let ref = null;
 
-  import { onMount, afterUpdate, getContext, tick } from "svelte";
+  import { getContext } from "svelte";
 
   const { selectedTab, useAutoWidth, add, update, change } = getContext("Tabs");
 
   add({ id, label, disabled });
 
-  let didMount = false;
-
   $: selected = $selectedTab === id;
-
-  onMount(() => {
-    tick().then(() => {
-      didMount = true;
-    });
-  });
-
-  afterUpdate(() => {
-    if (didMount && selected && ref) {
-      ref.focus();
-    }
-  });
 </script>
 
 <!-- svelte-ignore a11y-mouse-events-have-key-events -->

src/Tabs/Tabs.svelte

@@ -20,7 +20,7 @@
   /** Specify the tab trigger href attribute */
   export let triggerHref = "#";
 
-  import { createEventDispatcher, afterUpdate, setContext } from "svelte";
+  import { createEventDispatcher, afterUpdate, setContext, tick } from "svelte";
   import { writable, derived } from "svelte/store";
   import ChevronDown from "../icons/ChevronDown.svelte";
 
@@ -38,6 +38,8 @@
   );
   const selectedContent = writable(undefined);
 
+  let refTabList = null;
+
   setContext("Tabs", {
     tabs,
     contentById,
@@ -53,7 +55,7 @@
     update: (id) => {
       currentIndex = $tabsById[id].index;
     },
-    change: (direction) => {
+    change: async (direction) => {
       let index = currentIndex + direction;
 
       if (index < 0) {
@@ -77,6 +79,11 @@
       }
 
       currentIndex = index;
+
+      await tick();
+      const activeTab =
+        refTabList?.querySelectorAll("[role='tab']")[currentIndex];
+      activeTab?.focus();
     },
   });
 
@@ -145,6 +152,7 @@
     <ChevronDown aria-hidden="true" title="{iconDescription}" />
   </div>
   <ul
+    bind:this="{refTabList}"
     role="tablist"
     class:bx--tabs__nav="{true}"
     class:bx--tabs__nav--hidden="{dropdownHidden}"