Fix bug in toolbar click handler when a slotted element has child ele…

…ments (microsoft#6830)

* Fix bug with nested elements in toolbar click handler

* Change files

* lint

* update change description

* slight test improvement

* Update change/@microsoft-fast-foundation-2ada25c3-3fb4-48ba-893d-e64d11f7f095.json

---------

Co-authored-by: Chris Holt <chhol@microsoft.com>

change/@microsoft-fast-foundation-2ada25c3-3fb4-48ba-893d-e64d11f7f095.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Fix bug in toolbar click handler when a slotted element has child elements",
+  "packageName": "@microsoft/fast-foundation",
+  "email": "20542556+mollykreis@users.noreply.github.com",
+  "dependentChangeType": "prerelease"
+}

packages/web-components/fast-foundation/src/toolbar/toolbar.pw.spec.ts

@@ -349,4 +349,73 @@ test.describe("Toolbar", () => {
 
         await expect(element).toHaveJSProperty("activeIndex", 0);
     });
+
+    test("should update activeIndex when an element within the toolbar is clicked", async () => {
+        await root.evaluate(node => {
+            node.innerHTML = /* html */ `
+                <fast-toolbar>
+                    <button slot="start">Start Slot Button</button>
+                    <button>Button 1</button>
+                    <button>Button 2</button>
+                    <button>Button 3</button>
+                    <button slot="end">End Slot Button</button>
+                </fast-toolbar>
+            `;
+        });
+
+        const button2 = element.locator("button", { hasText: "Button 2" });
+
+        const startSlotButton = element.locator("button", {
+            hasText: "Start Slot Button",
+        });
+
+        await element.focus();
+
+        await expect(startSlotButton).toBeFocused();
+
+        await expect(element).toHaveJSProperty("activeIndex", 0);
+
+        await button2.click();
+
+        await expect(button2).toBeFocused();
+
+        await expect(element).toHaveJSProperty("activeIndex", 2);
+    });
+
+    test("should update activeIndex when a nested element within the toolbar is clicked", async () => {
+        await root.evaluate(node => {
+            node.innerHTML = /* html */ `
+                <fast-toolbar>
+                    <button slot="start">Start Slot Button</button>
+                    <button>Button 1</button>
+                    <button>
+                        Button 2
+                        <div>more button content</div>
+                    </button>
+                    <button>Button 3</button>
+                    <button slot="end">End Slot Button</button>
+                </fast-toolbar>
+            `;
+        });
+
+        const button2 = element.locator("button", { hasText: "Button 2" });
+
+        const button2InnerContent = button2.locator("div");
+
+        const startSlotButton = element.locator("button", {
+            hasText: "Start Slot Button",
+        });
+
+        await element.focus();
+
+        await expect(startSlotButton).toBeFocused();
+
+        await expect(element).toHaveJSProperty("activeIndex", 0);
+
+        await button2InnerContent.click();
+
+        await expect(button2).toBeFocused();
+
+        await expect(element).toHaveJSProperty("activeIndex", 2);
+    });
 });

packages/web-components/fast-foundation/src/toolbar/toolbar.ts

@@ -122,7 +122,9 @@ export class FASTToolbar extends FASTElement {
      * @internal
      */
     public clickHandler(e: MouseEvent): boolean | void {
-        const activeIndex = this.focusableElements?.indexOf(e.target as HTMLElement);
+        const activeIndex = this.focusableElements?.findIndex(x =>
+            x.contains(e.target as HTMLElement)
+        );
         if (activeIndex > -1 && this.activeIndex !== activeIndex) {
             this.setFocusedElement(activeIndex);
         }