[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 09a6523.

* 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>

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"
+}

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 => {