fix: acccordion expand mode changes should update the UI as expected (#…

…6611)

* fixes an issue where accordion expand-mode changes were not reflected in the component

* Change files

* update api report

* go back to aria-disabled as it removes the item from the tabindex, duh

* fixup accordion tests

change/@microsoft-fast-foundation-630834ad-b6a7-4fb5-82e8-f9a49fa2ec98.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "fixes an issue where accordion expand-mode changes were not reflected in the component",
+  "packageName": "@microsoft/fast-foundation",
+  "email": "[email protected]",
+  "dependentChangeType": "prerelease"
+}

packages/web-components/fast-foundation/docs/api-report.md

@@ -642,6 +642,8 @@ export class FASTAccordion extends FASTElement {
     // (undocumented)
     protected accordionItems: Element[];
     expandmode: AccordionExpandMode;
+    // (undocumented)
+    expandmodeChanged(prev: AccordionExpandMode, next: AccordionExpandMode): void;
     // @internal (undocumented)
     handleChange(source: any, propertyName: string): void;
     // @internal (undocumented)

packages/web-components/fast-foundation/src/accordion/README.md

@@ -129,6 +129,12 @@ export const myAccordionItem = AccordionItem.compose<AccordionItemOptions>({
 | `expandmode`     | public    | `AccordionExpandMode` |         | Controls the expand mode of the Accordion, either allowing single or multiple item expansion. |                |
 | `accordionItems` | protected | `Element[]`           |         |                                                                                               |                |
 
+#### Methods
+
+| Name                | Privacy | Description | Parameters                                             | Return | Inherited From |
+| ------------------- | ------- | ----------- | ------------------------------------------------------ | ------ | -------------- |
+| `expandmodeChanged` | public  |             | `prev: AccordionExpandMode, next: AccordionExpandMode` |        |                |
+
 #### Events
 
 | Name     | Type | Description                                                | Inherited From |

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

@@ -1,8 +1,8 @@
 import type { Locator, Page } from "@playwright/test";
 import { expect, test } from "@playwright/test";
 import { fixtureURL } from "../__test__/helpers.js";
-import type { FASTAccordionItem } from "../accordion-item/index.js";
 import { AccordionExpandMode } from "./accordion.options.js";
+import type { FASTAccordion } from "./accordion.js";
 
 test.describe("Accordion", () => {
     let page: Page;
@@ -150,6 +150,94 @@ test.describe("Accordion", () => {
         await expect(secondItem).toHaveBooleanAttribute("expanded");
     });
 
+    test("should set the expanded items' button to aria-disabled when in single expand mode", async () => {
+        await root.evaluate(node => {
+            node.innerHTML = /* html */ `
+                <fast-accordion expand-mode="single">
+                    <fast-accordion-item>
+                        <span slot="heading">Heading 1</span>
+                        <div>Content 1</div>
+                    </fast-accordion-item>
+                    <fast-accordion-item>
+                        <span slot="heading">Heading 2</span>
+                        <div>Content 2</div>
+                    </fast-accordion-item>
+                </fast-accordion>
+            `;
+        });
+
+        const items = element.locator("fast-accordion-item");
+
+        const firstItem = items.nth(0);
+
+        const secondItem = items.nth(1);
+
+        await firstItem.click();
+
+        await expect(firstItem).toHaveBooleanAttribute("expanded");
+
+        await expect(firstItem.locator("button")).toHaveAttribute(
+            "aria-disabled",
+            "true"
+        );
+
+        await secondItem.click();
+
+        await expect(firstItem).not.toHaveBooleanAttribute("expanded");
+
+        await expect(firstItem.locator("button")).not.toHaveAttribute(
+            "aria-disabled",
+            "true"
+        );
+        await expect(firstItem.locator("button")).not.toHaveAttribute(
+            "aria-disabled",
+            "false"
+        );
+
+        await expect(secondItem).toHaveBooleanAttribute("expanded");
+
+        await expect(secondItem.locator("button")).toHaveAttribute(
+            "aria-disabled",
+            "true"
+        );
+    });
+
+    test("should remove an expanded items' expandbutton aria-disabled attribute when expand mode changes from single to multi", async () => {
+        await root.evaluate(node => {
+            node.innerHTML = /* html */ `
+                <fast-accordion expand-mode="single">
+                    <fast-accordion-item>
+                        <span slot="heading">Heading 1</span>
+                        <div>Content 1</div>
+                    </fast-accordion-item>
+                    <fast-accordion-item>
+                        <span slot="heading">Heading 2</span>
+                        <div>Content 2</div>
+                    </fast-accordion-item>
+                </fast-accordion>
+            `;
+        });
+
+        const items = element.locator("fast-accordion-item");
+
+        const firstItem = items.nth(0);
+
+        await firstItem.click();
+
+        await expect(firstItem).toHaveBooleanAttribute("expanded");
+
+        await expect(firstItem.locator("button")).toHaveAttribute(
+            "aria-disabled",
+            "true"
+        );
+
+        await element.evaluate(node => {
+            node.setAttribute("expand-mode", "multi");
+        });
+
+        await expect(firstItem.locator("button")).not.hasAttribute("aria-disabled");
+    });
+
     test("should set the first item as expanded if no child is expanded by default in single mode", async () => {
         await root.evaluate(node => {
             node.innerHTML = /* html */ `

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

@@ -32,6 +32,25 @@ export class FASTAccordion extends FASTElement {
      */
     @attr({ attribute: "expand-mode" })
     public expandmode: AccordionExpandMode = AccordionExpandMode.multi;
+    public expandmodeChanged(prev: AccordionExpandMode, next: AccordionExpandMode) {
+        if (!this.$fastController.isConnected) {
+            return;
+        }
+
+        const expandedItem = this.findExpandedItem();
+
+        if (!expandedItem) {
+            return;
+        }
+
+        if (next !== AccordionExpandMode.single) {
+            (expandedItem as FASTAccordionItem)?.expandbutton.removeAttribute(
+                "aria-disabled"
+            );
+        } else {
+            this.setSingleExpandMode(expandedItem);
+        }
+    }
 
     /**
      * @internal
@@ -131,12 +150,12 @@ export class FASTAccordion extends FASTElement {
         currentItems.forEach((item: FASTAccordionItem, index: number) => {
             if (this.activeItemIndex === index) {
                 item.expanded = true;
-                item.expandbutton.setAttribute("disabled", "");
+                item.expandbutton.setAttribute("aria-disabled", "true");
             } else {
                 item.expanded = false;
 
                 if (!item.hasAttribute("disabled")) {
-                    item.expandbutton.removeAttribute("disabled");
+                    item.expandbutton.removeAttribute("aria-disabled");
                 }
             }
         });