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>
microsoft · Aug 2, 2023 · 50dba9c · 50dba9c
1 parent 9f6451f
commit 50dba9c
Show file tree

Hide file tree

Showing 3 changed files with 79 additions and 2 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": "prerelease",
+  "comment": "Prevent keyboard navigation to hidden tab",
+  "packageName": "@microsoft/fast-foundation",
+  "email": "7282195+m-akinc@users.noreply.github.com",
+  "dependentChangeType": "prerelease"
+}
diff --git a/packages/web-components/fast-foundation/src/tabs/tabs.pw.spec.ts b/packages/web-components/fast-foundation/src/tabs/tabs.pw.spec.ts
@@ -386,4 +386,70 @@ test.describe("Tabs", () => {
 
         await expect(element).toHaveJSProperty("activeid", secondTabId);
     });
+
+    test("should not allow selecting hidden tab using arrow keys", async () => {
+        test.slow();
+
+        await root.evaluate(node => {
+            node.innerHTML = /* html */ `
+                <fast-tabs>
+                    <fast-tab>Tab one</fast-tab>
+                    <fast-tab hidden>Tab two</fast-tab>
+                    <fast-tab>Tab three</fast-tab>
+                    <fast-tab-panel>Tab panel one</fast-tab-panel>
+                    <fast-tab-panel>Tab panel two</fast-tab-panel>
+                    <fast-tab-panel>Tab panel three</fast-tab-panel>
+                </fast-tabs>
+            `;
+        });
+
+        const firstTab = tabs.nth(0);
+
+        const thirdTab = tabs.nth(2);
+
+        const firstTabId = (await firstTab.getAttribute("id")) ?? "";
+
+        const thirdTabId = (await thirdTab.getAttribute("id")) ?? "";
+
+        await element.evaluate((node: FASTTabs, firstTabId) => {
+            node.activeid = firstTabId;
+        }, firstTabId);
+
+        await firstTab.press("ArrowRight");
+
+        await expect(element).toHaveJSProperty("activeid", thirdTabId);
+    });
+
+    test("should not allow selecting hidden tab by pressing End", async () => {
+        test.slow();
+
+        await root.evaluate(node => {
+            node.innerHTML = /* html */ `
+                <fast-tabs>
+                    <fast-tab>Tab one</fast-tab>
+                    <fast-tab>Tab two</fast-tab>
+                    <fast-tab hidden>Tab three</fast-tab>
+                    <fast-tab-panel>Tab panel one</fast-tab-panel>
+                    <fast-tab-panel>Tab panel two</fast-tab-panel>
+                    <fast-tab-panel>Tab panel three</fast-tab-panel>
+                </fast-tabs>
+            `;
+        });
+
+        const firstTab = tabs.nth(0);
+
+        const secondTab = tabs.nth(1);
+
+        const firstTabId = (await firstTab.getAttribute("id")) ?? "";
+
+        const secondTabId = (await secondTab.getAttribute("id")) ?? "";
+
+        await element.evaluate((node: FASTTabs, firstTabId) => {
+            node.activeid = firstTabId;
+        }, firstTabId);
+
+        await firstTab.press("End");
+
+        await expect(element).toHaveJSProperty("activeid", secondTabId);
+    });
 });
diff --git a/packages/web-components/fast-foundation/src/tabs/tabs.ts b/packages/web-components/fast-foundation/src/tabs/tabs.ts
@@ -130,8 +130,12 @@ export class FASTTabs extends FASTElement {
         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 {
@@ -272,7 +276,7 @@ export class FASTTabs extends FASTElement {
      * This method allows the active index to be adjusted by numerical increments
      */
     public adjust(adjustment: number): void {
-        const focusableTabs = this.tabs.filter(t => !this.isDisabledElement(t));
+        const focusableTabs = this.tabs.filter(t => this.isFocusableElement(t));
         const currentActiveTabIndex = focusableTabs.indexOf(this.activetab);
 
         const nextTabIndex = limit(