From b8b4b20b8cb5891ac90d5a4e997756ac36db132f Mon Sep 17 00:00:00 2001
From: m-akinc <7282195+m-akinc@users.noreply.github.com>
Date: Thu, 10 Aug 2023 17:39:53 -0500
Subject: [PATCH] [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 <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>

* [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 <3213292+nicholasrice@users.noreply.github.com>

* Update change files

---------

Co-authored-by: Mathieu Lavoie <44816587+m4thieulavoie@users.noreply.github.com>
Co-authored-by: John Kreitlow <863023+radium-v@users.noreply.github.com>
Co-authored-by: Chris Holt <chhol@microsoft.com>
Co-authored-by: Nicholas Rice <3213292+nicholasrice@users.noreply.github.com>
---
 ...-7d8d0430-523b-473a-af77-e2bcf0bc6e38.json |  7 ++++++
 .../fast-foundation/src/tabs/tabs.ts          | 25 ++++++++++++++-----
 2 files changed, 26 insertions(+), 6 deletions(-)
 create mode 100644 change/@microsoft-fast-foundation-7d8d0430-523b-473a-af77-e2bcf0bc6e38.json

diff --git a/change/@microsoft-fast-foundation-7d8d0430-523b-473a-af77-e2bcf0bc6e38.json b/change/@microsoft-fast-foundation-7d8d0430-523b-473a-af77-e2bcf0bc6e38.json
new file mode 100644
index 00000000000..d7235a96fd4
--- /dev/null
+++ 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": "7282195+m-akinc@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/web-components/fast-foundation/src/tabs/tabs.ts b/packages/web-components/fast-foundation/src/tabs/tabs.ts
index 37d2ac862a7..a51439b012c 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";
@@ -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 => {