fix: accordion item should not collapse on unrelated change events

change/@microsoft-fast-foundation-c8e72081-257f-474b-803b-0ae63fc25a83.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "accordion verifies change events",
+  "packageName": "@microsoft/fast-foundation",
+  "email": "stephcomeau@msn.com",
+  "dependentChangeType": "patch"
+}

packages/web-components/fast-foundation/src/accordion/accordion.spec.ts

@@ -2,6 +2,7 @@ import { expect } from "chai";
 import { FASTAccordion, accordionTemplate, AccordionExpandMode } from "./index.js";
 import { FASTAccordionItem, accordionItemTemplate } from "../accordion-item/index.js";
 import { fixture, uniqueElementName } from "../testing/fixture.js";
+import { FASTCheckbox, checkboxTemplate } from "../checkbox/index.js";
 import { Updates } from "@microsoft/fast-element";
 
 const Accordion = FASTAccordion.define({
@@ -14,6 +15,11 @@ const AccordionItem = FASTAccordionItem.define({
     template: accordionItemTemplate()
 });
 
+const Checkbox = FASTCheckbox.define({
+    name: uniqueElementName("checkbox"),
+    template: checkboxTemplate()
+});
+
 async function setup() {
     const { element, connect, disconnect } = await fixture(Accordion);
 
@@ -66,4 +72,93 @@ describe("Accordion", () => {
 
         await disconnect();
     });
+
+    it("should expand/collapse items when clicked in multi mode", async () => {
+        const { element, connect, disconnect, item1, item2, item3 } = await setup();
+
+        element.expandmode = AccordionExpandMode.multi;
+
+        await connect();
+        await Updates.next();
+
+        expect(item1.expanded).to.equal(false);
+        expect(item2.expanded).to.equal(false);
+        expect(item3.expanded).to.equal(false);
+
+        item1.expandbutton.click();
+        item2.expandbutton.click();
+        item3.expandbutton.click();
+
+        await Updates.next();
+
+        expect(item1.expanded).to.equal(true);
+        expect(item2.expanded).to.equal(true);
+        expect(item3.expanded).to.equal(true);
+
+        item1.expandbutton.click();
+        item2.expandbutton.click();
+        item3.expandbutton.click();
+
+        await Updates.next();
+
+        expect(item1.expanded).to.equal(false);
+        expect(item2.expanded).to.equal(false);
+        expect(item3.expanded).to.equal(false);
+
+        await disconnect();
+    });
+
+    it("should always be one item expanded in single mode", async () => {
+        const { element, connect, disconnect, item1, item2, item3 } = await setup();
+
+        element.expandmode = AccordionExpandMode.single;
+
+        await connect();
+        await Updates.next();
+
+        expect(item1.expanded).to.equal(true);
+        expect(item2.expanded).to.equal(false);
+        expect(item3.expanded).to.equal(false);
+
+        item2.expandbutton.click();
+
+        await Updates.next();
+
+        expect(item1.expanded).to.equal(false);
+        expect(item2.expanded).to.equal(true);
+        expect(item3.expanded).to.equal(false);
+
+        item2.expandbutton.click();
+
+        await Updates.next();
+
+        expect(item1.expanded).to.equal(false);
+        expect(item2.expanded).to.equal(true);
+        expect(item3.expanded).to.equal(false);
+
+        await disconnect();
+    });
+
+    it("should ignore 'change' events from components other than accordion items", async () => {
+        const { element, connect, disconnect, item1, item2, item3 } = await setup();
+
+        element.expandmode = AccordionExpandMode.multi;
+        const checkbox = new Checkbox();
+        item1.appendChild(checkbox);
+
+        await connect();
+        await Updates.next();
+        expect(item1.expanded).to.equal(false);
+
+        item1.expandbutton.click();
+        await Updates.next();
+        expect(item1.expanded).to.equal(true);
+
+        checkbox.click();
+        await Updates.next();
+        expect(item1.expanded).to.equal(true);
+
+        await disconnect();
+    });
+
 });

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

@@ -131,6 +131,11 @@ export class FASTAccordion extends FASTElement {
     };
 
     private activeItemChange = (event: Event): void => {
+        if (event.defaultPrevented || event.target !== event.currentTarget) {
+            return;
+        }
+
+        event.preventDefault();
         const selectedItem = event.target as FASTAccordionItem;
         this.activeid = selectedItem.getAttribute("id");
         if (this.isSingleExpandMode()) {

packages/web-components/fast-foundation/src/accordion/stories/accordion.stories.ts

@@ -22,7 +22,7 @@ export default {
             </fast-accordion-item>
             <fast-accordion-item>
                 <div slot="heading">Accordion Item 2 Heading</div>
-                Accordion Item 2 Content
+                <fast-checkbox>A checkbox as content</fast-checkbox
             </fast-accordion-item>
         `,
     },