fix(accordion): correctly sets the expanded item in single mode

change/@microsoft-fast-foundation-35ce77aa-d47a-4d90-bc7c-cb541881d066.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix accordion to correctly set the expanded item in single mode",
+  "packageName": "@microsoft/fast-web-utilities",
+  "email": "me@yonatankra.com",
+  "dependentChangeType": "none"
+}

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

@@ -67,4 +67,78 @@ describe("Accordion", () => {
 
         await disconnect();
     });
+
+    it("should keep expanded item after focus on a different item in single mode", async () => {
+        const { element, connect, disconnect } = await setup();
+
+        element.setAttribute("expand-mode", "single");
+
+        await connect();
+        await DOM.nextUpdate();
+
+        const [accordionItem1, accordionItem2] = element.accordionItems;
+        accordionItem2.shadowRoot?.querySelector("button")?.click();
+
+        await DOM.nextUpdate();
+        const accordionItem1ExpandedAfterItem2Click = accordionItem1.hasAttribute("expanded");
+        const accordionItem2ExpandedAfterItem2Click = accordionItem2.hasAttribute("expanded");
+
+        accordionItem1.dispatchEvent(new FocusEvent('focus'));
+
+        const newItem = document.createElement("fast-accordion-item");
+        element.appendChild(newItem);
+        await DOM.nextUpdate();
+
+        expect(accordionItem1ExpandedAfterItem2Click).to.equal(false);
+        expect(accordionItem2ExpandedAfterItem2Click).to.equal(true);
+        expect(accordionItem1.hasAttribute("expanded"), 'item 1 is expanded').to.equal(false);
+        expect(accordionItem2.hasAttribute("expanded"), 'item 2 is closed').to.equal(true);
+        await disconnect();
+    });
+
+    it("should respect starting expanded state of added items in single mode", async () => {
+        const { element, connect, disconnect } = await setup();
+
+        element.setAttribute("expand-mode", "single");
+
+        await connect();
+        await DOM.nextUpdate();
+
+        element.innerHTML = `
+            <fast-accordion-item>Item 1</fast-accordion-item>
+            <fast-accordion-item expanded>Item 2</fast-accordion-item>
+            <fast-accordion-item>Item 3</fast-accordion-item>
+        `;
+
+        const [accordionItem1, accordionItem2] = element.accordionItems;
+
+        await DOM.nextUpdate();
+
+        expect(accordionItem1.hasAttribute("expanded"), 'item 1 is expanded').to.equal(false);
+        expect(accordionItem2.hasAttribute("expanded"), 'item 2 is closed').to.equal(true);
+        await disconnect();
+    });
+
+    it("should respect the first expanded item when items change in single mode", async () => {
+        const { element, connect, disconnect } = await setup();
+
+        element.setAttribute("expand-mode", "single");
+
+        await connect();
+        await DOM.nextUpdate();
+
+        element.innerHTML = `
+            <fast-accordion-item>Item 1</fast-accordion-item>
+            <fast-accordion-item expanded>Item 2</fast-accordion-item>
+            <fast-accordion-item expanded>Item 3</fast-accordion-item>
+        `;
+        await DOM.nextUpdate();
+
+        const [accordionItem1, accordionItem2, accordionItem3] = element.accordionItems;
+
+        expect(accordionItem1.hasAttribute("expanded"), 'item 1 is expanded').to.equal(false);
+        expect(accordionItem2.hasAttribute("expanded"), 'item 2 is closed').to.equal(true);
+        expect(accordionItem3.hasAttribute("expanded"), 'item 3 is expanded').to.equal(false);
+        await disconnect();
+    });
 });

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

@@ -65,6 +65,10 @@ export class Accordion extends FoundationElement {
      */
     public accordionItemsChanged(oldValue: HTMLElement[], newValue: HTMLElement[]): void {
         if (this.$fastController.isConnected) {
+            if (this.isSingleExpandMode()) {
+                const expandedItem = this.findExpandedItem();
+                this.activeItemIndex = expandedItem ? this.accordionItems.findIndex(x => x === expandedItem) : 0;
+            }
             this.removeItemListeners(oldValue);
             this.setItems();
         }
@@ -80,7 +84,7 @@ export class Accordion extends FoundationElement {
 
     private findExpandedItem(): AccordionItem | null {
         for (let item: number = 0; item < this.accordionItems.length; item++) {
-            if (this.accordionItems[item].getAttribute("expanded") === "true") {
+            if (this.accordionItems[item].hasAttribute("expanded") === true) {
                 return this.accordionItems[item] as AccordionItem;
             }
         }