[cherry-pick] two tab navigation fixes (#6793)

* [cherry-pick] 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]> * [cherry-pick] Prevent keyboard navigation to hidden tab (#6789) * Prevent keyboard navigation to hidden tab * Change files * Fix issue with Home/End * use hasAttribute * Update change/@microsoft-fast-foundation-7d8d0430-523b-473a-af77-e2bcf0bc6e38.json * Update change/@microsoft-fast-foundation-7d8d0430-523b-473a-af77-e2bcf0bc6e38.json --------- Co-authored-by: Nicholas Rice <[email protected]> * Update change files --------- Co-authored-by: Mathieu Lavoie <[email protected]> Co-authored-by: John Kreitlow <[email protected]> Co-authored-by: Chris Holt <[email protected]> Co-authored-by: Nicholas Rice <[email protected]>
microsoft · Aug 10, 2023 · b8b4b20 · b8b4b20
1 parent 8c80dfc
commit b8b4b20
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 6 deletions.
diff --git a/change/@microsoft-fast-foundation-7d8d0430-523b-473a-af77-e2bcf0bc6e38.json b/change/@microsoft-fast-foundation-7d8d0430-523b-473a-af77-e2bcf0bc6e38.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Prevent keyboard navigation to hidden or disabled tabs",
+  "packageName": "@microsoft/fast-foundation",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
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";
@@ -183,8 +184,12 @@ export class Tabs extends FoundationElement {
         return el.getAttribute("aria-disabled") === "true";
     };
 
+    private isHiddenElement = (el: Element): el is HTMLElement => {
+        return el.hasAttribute("hidden");
+    };
+
     private isFocusableElement = (el: Element): el is HTMLElement => {
-        return !this.isDisabledElement(el);
+        return !this.isDisabledElement(el) && !this.isHiddenElement(el);
     };
 
     private getActiveIndex(): number {
@@ -365,13 +370,21 @@ export class Tabs extends FoundationElement {
      * 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.isFocusableElement(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 => {