fix(accordion): mark an expanded item that cannot collapse as aria-disabled

.changeset/accordion-locked-aria-disabled.md

@@ -0,0 +1,5 @@
+---
+"@zag-js/accordion": patch
+---
+
+- Fixed issue where an expanded item that cannot be collapsed was not marked `aria-disabled`.

e2e/accordion.e2e.ts

@@ -48,7 +48,8 @@ test.describe("accordion", () => {
 
     test("then clicking the same trigger again: should not close the content", async () => {
       await I.clickTrigger("home")
-      await I.clickTrigger("home")
+      // the expanded trigger has aria-disabled, which playwright treats as not clickable
+      await I.clickTrigger("home", { force: true })
       await I.seeContent("home")
     })
 
@@ -59,6 +60,24 @@ test.describe("accordion", () => {
       await I.seeContent("about")
       await I.dontSeeContent("home")
     })
+
+    test("expanded trigger that cannot collapse has aria-disabled", async () => {
+      await I.clickTrigger("home")
+      await I.seeTriggerIsLocked("home")
+      await I.dontSeeTriggerIsLocked("about")
+
+      await I.clickTrigger("about")
+      await I.seeTriggerIsLocked("about")
+      await I.dontSeeTriggerIsLocked("home")
+    })
+
+    test("[collapsible=true] expanded trigger has no aria-disabled", async () => {
+      await I.controls.bool("collapsible")
+
+      await I.clickTrigger("home")
+      await I.seeContent("home")
+      await I.dontSeeTriggerIsLocked("home")
+    })
   })
 
   test.describe("multiple / keyboard", () => {

e2e/models/accordion.model.ts

@@ -27,8 +27,8 @@ export class AccordionModel extends Model {
     await this.getTrigger(id).focus()
   }
 
-  async clickTrigger(id: string) {
-    await this.getTrigger(id).click()
+  async clickTrigger(id: string, options?: { force?: boolean }) {
+    await this.getTrigger(id).click(options)
   }
 
   async seeTriggerIsFocused(id: string) {
@@ -42,4 +42,12 @@ export class AccordionModel extends Model {
   async dontSeeContent(id: string) {
     await expect(this.getContent(id)).not.toBeVisible()
   }
+
+  async seeTriggerIsLocked(id: string) {
+    await expect(this.getTrigger(id)).toHaveAttribute("aria-disabled", "true")
+  }
+
+  async dontSeeTriggerIsLocked(id: string) {
+    await expect(this.getTrigger(id)).not.toHaveAttribute("aria-disabled")
+  }
 }

packages/machines/accordion/src/accordion.connect.ts

@@ -1,4 +1,4 @@
-import { dataAttr, getEventKey, isSafari } from "@zag-js/dom-query"
+import { ariaAttr, dataAttr, getEventKey, isSafari } from "@zag-js/dom-query"
 import type { EventKeyMap, NormalizeProps, PropTypes } from "@zag-js/types"
 import type { Service } from "@zag-js/core"
 import { parts } from "./accordion.anatomy"
@@ -91,6 +91,8 @@ export function connect<T extends PropTypes>(
     getItemTriggerProps(props) {
       const { value } = props
       const itemState = getItemState(props)
+      // an expanded item that cannot be collapsed is announced as disabled
+      const locked = itemState.expanded && !itemState.disabled && !prop("collapsible") && !multiple
 
       return normalize.button({
         ...parts.itemTrigger.attrs,
@@ -101,6 +103,7 @@ export function connect<T extends PropTypes>(
         "data-controls": dom.getItemContentId(scope, value),
         "aria-expanded": itemState.expanded,
         disabled: itemState.disabled,
+        "aria-disabled": ariaAttr(locked),
         "data-orientation": prop("orientation"),
         "data-state": itemState.expanded ? "open" : "closed",
         "data-focus": dataAttr(itemState.focused),