From 84726aa1312068d10df176709d760764d577420f Mon Sep 17 00:00:00 2001
From: Mathieu Lavoie <44816587+m4thieulavoie@users.noreply.github.com>
Date: Thu, 25 Aug 2022 17:42:42 -0400
Subject: [PATCH] fix(tabs): home and end navigation (#6298)

* fix(tabs): home and end navigation

* Change files

* Update packages/web-components/fast-foundation/src/tabs/stories/tabs.stories.ts

Co-authored-by: John Kreitlow <863023+radium-v@users.noreply.github.com>

* apply pr comments

* Revert "apply pr comments"

This reverts commit 09a65235fbae7b4a8975780c5450afd6369fac35.

* apply pr comment

* Update change/@microsoft-fast-foundation-dc08ca7b-be41-4f42-a66c-c0874376b4a2.json

Co-authored-by: John Kreitlow <863023+radium-v@users.noreply.github.com>

Co-authored-by: John Kreitlow <863023+radium-v@users.noreply.github.com>
Co-authored-by: Chris Holt <chhol@microsoft.com>
---
 ...-dc08ca7b-be41-4f42-a66c-c0874376b4a2.json |  7 ++++
 .../src/tabs/stories/tabs.stories.ts          | 35 ++++++++++++++++++-
 .../fast-foundation/src/tabs/tabs.ts          | 19 +++++++---
 3 files changed, 55 insertions(+), 6 deletions(-)
 create mode 100644 change/@microsoft-fast-foundation-dc08ca7b-be41-4f42-a66c-c0874376b4a2.json

diff --git a/change/@microsoft-fast-foundation-dc08ca7b-be41-4f42-a66c-c0874376b4a2.json b/change/@microsoft-fast-foundation-dc08ca7b-be41-4f42-a66c-c0874376b4a2.json
new file mode 100644
index 00000000000..63021e52733
--- /dev/null
+++ b/change/@microsoft-fast-foundation-dc08ca7b-be41-4f42-a66c-c0874376b4a2.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "fix(tabs): home and end navigation",
+  "packageName": "@microsoft/fast-foundation",
+  "email": "mathieulavoie94@gmail.com",
+  "dependentChangeType": "prerelease"
+}
diff --git a/packages/web-components/fast-foundation/src/tabs/stories/tabs.stories.ts b/packages/web-components/fast-foundation/src/tabs/stories/tabs.stories.ts
index d25b954b6b5..7470c49c01a 100644
--- a/packages/web-components/fast-foundation/src/tabs/stories/tabs.stories.ts
+++ b/packages/web-components/fast-foundation/src/tabs/stories/tabs.stories.ts
@@ -15,7 +15,7 @@ const componentTemplate = html<TabsStoryArgs>`
         ${repeat(
             x => x.items,
             html`
-                <fast-tab>${x => x.tab}</fast-tab>
+                <fast-tab ?disabled="${x => x.disabled}">${x => x.tab}</fast-tab>
                 <fast-tab-panel>
                     ${x => x.panel}
                 </fast-tab-panel>
@@ -54,3 +54,36 @@ Tabs.args = {
         },
     ],
 };
+
+export const DisabledTabs = (args: TabsStoryArgs) => {
+    const storyFragment = new DocumentFragment();
+    componentTemplate.render(args, storyFragment);
+    return storyFragment.firstElementChild;
+};
+
+DisabledTabs.args = {
+    items: [
+        {
+            tab: "Tab one",
+            panel: "Tab one content",
+            disabled: true,
+        },
+        {
+            tab: "Tab two",
+            panel: "Tab two content",
+        },
+        {
+            tab: "Tab three",
+            panel: "Tab three content",
+        },
+        {
+            tab: "Tab four",
+            panel: "Tab four content",
+        },
+        {
+            tab: "Tab five",
+            panel: "Tab five content",
+            disabled: true,
+        },
+    ],
+};
diff --git a/packages/web-components/fast-foundation/src/tabs/tabs.ts b/packages/web-components/fast-foundation/src/tabs/tabs.ts
index bcf84474a57..0fa9cb3e52b 100644
--- a/packages/web-components/fast-foundation/src/tabs/tabs.ts
+++ b/packages/web-components/fast-foundation/src/tabs/tabs.ts
@@ -6,6 +6,7 @@ import {
     keyArrowUp,
     keyEnd,
     keyHome,
+    limit,
     uniqueId,
     wrapInBounds,
 } from "@microsoft/fast-web-utilities";
@@ -358,13 +359,21 @@ export class FASTTabs extends FASTElement {
      * This method allows the active index to be adjusted by numerical increments
      */
     public adjust(adjustment: number): void {
-        this.prevActiveTabIndex = this.activeTabIndex;
-        this.activeTabIndex = wrapInBounds(
+        const focusableTabs = this.tabs.filter(t => !this.isDisabledElement(t));
+        const currentActiveTabIndex = focusableTabs.indexOf(this.activetab);
+
+        const nextTabIndex = limit(
             0,
-            this.tabs.length - 1,
-            this.activeTabIndex + adjustment
+            focusableTabs.length - 1,
+            currentActiveTabIndex + adjustment
         );
-        this.setComponent();
+
+        // the index of the next focusable tab within the context of all available tabs
+        const nextIndex = this.tabs.indexOf(focusableTabs[nextTabIndex]);
+
+        if (nextIndex > -1) {
+            this.moveToTabByIndex(this.tabs, nextIndex);
+        }
     }
 
     private adjustForward = (e: KeyboardEvent): void => {