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 <[email protected]> * apply pr comments * Revert "apply pr comments" This reverts commit 09a6523. * apply pr comment * Update change/@microsoft-fast-foundation-dc08ca7b-be41-4f42-a66c-c0874376b4a2.json Co-authored-by: John Kreitlow <[email protected]> Co-authored-by: John Kreitlow <[email protected]> Co-authored-by: Chris Holt <[email protected]>
microsoft · Aug 25, 2022 · 84726aa · 84726aa
1 parent 7ca925b
commit 84726aa
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 6 deletions.
diff --git a/change/@microsoft-fast-foundation-dc08ca7b-be41-4f42-a66c-c0874376b4a2.json 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": "[email protected]",
+  "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
@@ -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
@@ -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 => {