From c5514289af0123132946d9b06ab2d81e272ad167 Mon Sep 17 00:00:00 2001
From: Burcu Noyan <burcunoyan@gmail.com>
Date: Mon, 20 Jul 2026 15:51:22 -0400
Subject: [PATCH] Render accordion aria-expanded as "true"/"false" strings
 (CS-12256)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Binding a raw boolean stamps an empty-valued attribute when open and
removes it when closed — both invalid for the enumerated aria-expanded
attribute. The chevron-rotation selector keyed off attribute presence,
so it moves to [aria-expanded='true'] now that the attribute is always
present.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .../src/components/accordion/item/index.gts   |  4 +-
 .../integration/components/accordion-test.gts | 48 +++++++++++++++++++
 2 files changed, 50 insertions(+), 2 deletions(-)
 create mode 100644 packages/boxel-ui/test-app/tests/integration/components/accordion-test.gts

diff --git a/packages/boxel-ui/addon/src/components/accordion/item/index.gts b/packages/boxel-ui/addon/src/components/accordion/item/index.gts
index a184dea146..c50f725100 100644
--- a/packages/boxel-ui/addon/src/components/accordion/item/index.gts
+++ b/packages/boxel-ui/addon/src/components/accordion/item/index.gts
@@ -32,7 +32,7 @@ const AccordionItem: TemplateOnlyComponent<AccordionItemSignature> = <template>
         {{on 'click' (optional @onClick)}}
         id={{@id}}
         aria-controls='section-{{@id}}'
-        aria-expanded={{@isOpen}}
+        aria-expanded={{if @isOpen 'true' 'false'}}
         disabled={{@disabled}}
       >
         <ChevronRight
@@ -114,7 +114,7 @@ const AccordionItem: TemplateOnlyComponent<AccordionItemSignature> = <template>
       .boxel-accordion-item-icon {
         flex-shrink: 0;
       }
-      [aria-expanded] .boxel-accordion-item-icon {
+      [aria-expanded='true'] .boxel-accordion-item-icon {
         transform: rotate(90deg);
       }
 
diff --git a/packages/boxel-ui/test-app/tests/integration/components/accordion-test.gts b/packages/boxel-ui/test-app/tests/integration/components/accordion-test.gts
new file mode 100644
index 0000000000..41bf394d72
--- /dev/null
+++ b/packages/boxel-ui/test-app/tests/integration/components/accordion-test.gts
@@ -0,0 +1,48 @@
+import { click, render } from '@ember/test-helpers';
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'test-app/tests/helpers';
+import { tracked } from '@glimmer/tracking';
+import { Accordion } from '@cardstack/boxel-ui/components';
+
+class State {
+  @tracked isOpen = false;
+}
+
+module('Integration | Component | accordion', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('item trigger exposes aria-expanded as "true"/"false" strings', async function (assert) {
+    let state = new State();
+    let toggle = () => (state.isOpen = !state.isOpen);
+
+    await render(
+      <template>
+        <Accordion as |A|>
+          <A.Item @id='details' @isOpen={{state.isOpen}} @onClick={{toggle}}>
+            <:title>Details</:title>
+            <:content>Content body</:content>
+          </A.Item>
+        </Accordion>
+      </template>,
+    );
+
+    assert
+      .dom('#details')
+      .hasAttribute('aria-expanded', 'false', 'closed item reads false');
+    assert
+      .dom('#section-details')
+      .hasAttribute('data-state', 'closed', 'closed item content is closed');
+
+    await click('#details');
+
+    assert
+      .dom('#details')
+      .hasAttribute('aria-expanded', 'true', 'open item reads true');
+    assert
+      .dom('#section-details')
+      .hasAttribute('data-state', 'open', 'open item content is open');
+    assert
+      .dom('#section-details')
+      .hasAttribute('aria-hidden', 'false', 'open item content is visible');
+  });
+});