From ce523b316bdd781eecb85e65a33801fbf109f38e Mon Sep 17 00:00:00 2001
From: tglide <26071571+TGlide@users.noreply.github.com>
Date: Wed, 10 May 2023 19:00:19 +0100
Subject: [PATCH 1/4] feat: accessible tab kbd navigation

---
 src/lib/components/tab.svelte | 67 +++++++++++++++++++++++++++++++++--
 src/lib/helpers/style.ts      | 16 +++++++++
 2 files changed, 81 insertions(+), 2 deletions(-)
 create mode 100644 src/lib/helpers/style.ts

diff --git a/src/lib/components/tab.svelte b/src/lib/components/tab.svelte
index 246d9db0d1..db46fb6b2c 100644
--- a/src/lib/components/tab.svelte
+++ b/src/lib/components/tab.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
     import { trackEvent } from '$lib/actions/analytics';
+    import { getElementDir } from '$lib/helpers/style';
 
     export let selected = false;
     export let href: string = null;
@@ -9,11 +10,70 @@
         if (!event) return;
         trackEvent(`click_select_tab_${event}`);
     }
+
+    const keysMap = {
+        ltr: {
+            next: 'ArrowRight',
+            prev: 'ArrowLeft'
+        },
+        rtl: {
+            next: 'ArrowLeft',
+            prev: 'ArrowRight'
+        }
+    };
+
+    function handleKeyDown(e: KeyboardEvent) {
+        const tabBtn = e.target as HTMLElement;
+        const tabItem = tabBtn.closest('.tabs-item') as HTMLElement;
+        const tabsList = tabBtn.closest('.tabs-item').closest('.tabs') as HTMLElement;
+        const tabItems = tabsList.querySelectorAll('.tabs-item');
+        const currentIdx = Array.from(tabItems).indexOf(tabItem);
+
+        const dir = getElementDir(tabsList);
+
+        switch (e.key) {
+            case 'Home': {
+                e.preventDefault();
+                const firstTabBtn = tabItems[0].querySelector('.tabs-button') as HTMLElement;
+                firstTabBtn.focus();
+                break;
+            }
+            case 'End': {
+                e.preventDefault();
+                const lastTabBtn = tabItems[tabItems.length - 1].querySelector(
+                    '.tabs-button'
+                ) as HTMLElement;
+                lastTabBtn.focus();
+                break;
+            }
+            case keysMap[dir].next: {
+                e.preventDefault();
+                const nextIdx = currentIdx === tabItems.length - 1 ? 0 : currentIdx + 1;
+                const nextTabBtn = tabItems[nextIdx].querySelector('.tabs-button') as HTMLElement;
+                nextTabBtn.focus();
+                break;
+            }
+            case keysMap[dir].prev: {
+                e.preventDefault();
+                const prevIdx = currentIdx === 0 ? tabItems.length - 1 : currentIdx - 1;
+                const prevTabBtn = tabItems[prevIdx].querySelector('.tabs-button') as HTMLElement;
+                prevTabBtn.focus();
+                break;
+            }
+        }
+    }
 </script>
 
 <li class="tabs-item">
     {#if href}
-        <a class="tabs-button" {href} class:is-selected={selected} on:click={track}>
+        <a
+            class="tabs-button"
+            {href}
+            class:is-selected={selected}
+            on:click={track}
+            tabindex={selected ? 0 : -1}
+            on:keydown={handleKeyDown}
+            role="tab">
             <span class="text"><slot /></span>
         </a>
     {:else}
@@ -22,7 +82,10 @@
             class="tabs-button"
             class:is-selected={selected}
             on:click|preventDefault
-            on:click={track}>
+            on:click={track}
+            tabindex={selected ? 0 : -1}
+            on:keydown={handleKeyDown}
+            role="tab">
             <span class="text"><slot /></span>
         </button>
     {/if}
diff --git a/src/lib/helpers/style.ts b/src/lib/helpers/style.ts
new file mode 100644
index 0000000000..fef15c8cc6
--- /dev/null
+++ b/src/lib/helpers/style.ts
@@ -0,0 +1,16 @@
+type Direction = 'rtl' | 'ltr';
+
+function isDirection(dir: string): dir is Direction {
+    return dir === 'rtl' || dir === 'ltr';
+}
+
+function parseDirection(dir: string): Direction {
+    return isDirection(dir) ? dir : 'ltr';
+}
+
+export function getElementDir(el: HTMLElement): Direction {
+    if (window.getComputedStyle) {
+        return parseDirection(window.getComputedStyle(el, null).getPropertyValue('direction'));
+    }
+    return parseDirection(el.style.direction);
+}

From e37436d1044b022acb420d3a3209b14cf80b19d5 Mon Sep 17 00:00:00 2001
From: tglide <26071571+TGlide@users.noreply.github.com>
Date: Wed, 31 May 2023 18:52:55 +0100
Subject: [PATCH 2/4] feat: tabs focus on navigate

---
 src/lib/components/tab.svelte | 27 ++++++++++++++++++++++-----
 src/lib/helpers/waitUntil.ts  | 14 ++++++++++++++
 2 files changed, 36 insertions(+), 5 deletions(-)
 create mode 100644 src/lib/helpers/waitUntil.ts

diff --git a/src/lib/components/tab.svelte b/src/lib/components/tab.svelte
index db46fb6b2c..3fdf830963 100644
--- a/src/lib/components/tab.svelte
+++ b/src/lib/components/tab.svelte
@@ -1,14 +1,31 @@
 <script lang="ts">
+    import { goto } from '$app/navigation';
     import { trackEvent } from '$lib/actions/analytics';
     import { getElementDir } from '$lib/helpers/style';
+    import { waitUntil } from '$lib/helpers/waitUntil';
 
     export let selected = false;
     export let href: string = null;
     export let event: string = null;
 
-    function track() {
-        if (!event) return;
-        trackEvent(`click_select_tab_${event}`);
+    async function handleClick(e: Event) {
+        if (event) {
+            trackEvent(`click_select_tab_${event}`);
+        }
+
+        if (href) {
+            let el = e.target as HTMLElement;
+            if (el.tagName !== 'A') {
+                el = el.closest('a');
+            }
+
+            await goto(href);
+            await waitUntil(() => {
+                console.log('tickUntil', el);
+                return el.classList.contains('is-selected');
+            }, 1000);
+            el.focus();
+        }
     }
 
     const keysMap = {
@@ -70,7 +87,7 @@
             class="tabs-button"
             {href}
             class:is-selected={selected}
-            on:click={track}
+            on:click={handleClick}
             tabindex={selected ? 0 : -1}
             on:keydown={handleKeyDown}
             role="tab">
@@ -82,7 +99,7 @@
             class="tabs-button"
             class:is-selected={selected}
             on:click|preventDefault
-            on:click={track}
+            on:click={handleClick}
             tabindex={selected ? 0 : -1}
             on:keydown={handleKeyDown}
             role="tab">
diff --git a/src/lib/helpers/waitUntil.ts b/src/lib/helpers/waitUntil.ts
new file mode 100644
index 0000000000..c3b3a85e4f
--- /dev/null
+++ b/src/lib/helpers/waitUntil.ts
@@ -0,0 +1,14 @@
+export async function waitUntil(condition: () => boolean, timeout = 1000) {
+    return new Promise((resolve, reject) => {
+        const start = Date.now();
+        const interval = setInterval(() => {
+            if (condition()) {
+                clearInterval(interval);
+                resolve(undefined);
+            } else if (Date.now() - start > timeout) {
+                clearInterval(interval);
+                reject(new Error('Timeout'));
+            }
+        }, 10);
+    });
+}

From e073280aec2840c0a879ae297a9684cd59bb1032 Mon Sep 17 00:00:00 2001
From: tglide <26071571+TGlide@users.noreply.github.com>
Date: Wed, 31 May 2023 18:54:49 +0100
Subject: [PATCH 3/4] refactor: small tabs changes

---
 src/lib/components/tab.svelte | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/src/lib/components/tab.svelte b/src/lib/components/tab.svelte
index 3fdf830963..f3825acbfb 100644
--- a/src/lib/components/tab.svelte
+++ b/src/lib/components/tab.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
     import { goto } from '$app/navigation';
     import { trackEvent } from '$lib/actions/analytics';
+    import { last } from '$lib/helpers/array';
     import { getElementDir } from '$lib/helpers/style';
     import { waitUntil } from '$lib/helpers/waitUntil';
 
@@ -42,9 +43,9 @@
     function handleKeyDown(e: KeyboardEvent) {
         const tabBtn = e.target as HTMLElement;
         const tabItem = tabBtn.closest('.tabs-item') as HTMLElement;
-        const tabsList = tabBtn.closest('.tabs-item').closest('.tabs') as HTMLElement;
-        const tabItems = tabsList.querySelectorAll('.tabs-item');
-        const currentIdx = Array.from(tabItems).indexOf(tabItem);
+        const tabsList = tabItem.closest('.tabs') as HTMLElement;
+        const tabItems = Array.from(tabsList.querySelectorAll('.tabs-item'));
+        const currentIdx = tabItems.indexOf(tabItem);
 
         const dir = getElementDir(tabsList);
 
@@ -57,9 +58,7 @@
             }
             case 'End': {
                 e.preventDefault();
-                const lastTabBtn = tabItems[tabItems.length - 1].querySelector(
-                    '.tabs-button'
-                ) as HTMLElement;
+                const lastTabBtn = last(tabItems).querySelector('.tabs-button') as HTMLElement;
                 lastTabBtn.focus();
                 break;
             }

From c2d9fba323de6fcc99ec5e270400b5425ece5b0a Mon Sep 17 00:00:00 2001
From: tglide <26071571+TGlide@users.noreply.github.com>
Date: Mon, 3 Jul 2023 12:37:40 +0100
Subject: [PATCH 4/4] fix: tab tests

---
 tests/unit/components/tab.test.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/tests/unit/components/tab.test.ts b/tests/unit/components/tab.test.ts
index a0d7b0dcb4..9e75e25e82 100644
--- a/tests/unit/components/tab.test.ts
+++ b/tests/unit/components/tab.test.ts
@@ -6,12 +6,12 @@ import { Tab } from '../../../src/lib/components';
 test('shows tab', () => {
     const { getByRole } = render(Tab);
 
-    expect(getByRole('button')).toBeInTheDocument();
+    expect(getByRole('tab')).toBeInTheDocument();
 });
 test('shows tab - is selected', () => {
     const { getByRole } = render(Tab, { selected: true });
 
-    expect(getByRole('button')).toHaveClass('is-selected');
+    expect(getByRole('tab')).toHaveClass('is-selected');
 });
 
 test('shows tab - is link', () => {
@@ -23,7 +23,7 @@ test('shows tab - is link', () => {
 
 test('shows tab - on:click', async () => {
     const { getByRole, component } = render(Tab);
-    const tab = getByRole('button');
+    const tab = getByRole('tab');
     const callback = vi.fn();
     component.$on('click', callback);