From d52af39c81ca5e8ed2e5b27a79dc3bf3ad162899 Mon Sep 17 00:00:00 2001
From: Jeroen Zwartepoorte <jeroen.zwartepoorte@sanoma.com>
Date: Mon, 23 Sep 2024 15:53:18 +0200
Subject: [PATCH] Fix missing initial `aria-expanded` and `aria-details`
 attributes on the button (#1540)

---
 .changeset/ninety-comics-poke.md                 |  5 +++++
 packages/components/menu/src/menu-button.spec.ts | 14 ++++++++++++++
 packages/components/menu/src/menu-button.ts      |  2 ++
 3 files changed, 21 insertions(+)
 create mode 100644 .changeset/ninety-comics-poke.md

diff --git a/.changeset/ninety-comics-poke.md b/.changeset/ninety-comics-poke.md
new file mode 100644
index 0000000000..455d43ce4b
--- /dev/null
+++ b/.changeset/ninety-comics-poke.md
@@ -0,0 +1,5 @@
+---
+'@sl-design-system/menu': patch
+---
+
+Set initial aria-details and aria-expanded on the menu button
diff --git a/packages/components/menu/src/menu-button.spec.ts b/packages/components/menu/src/menu-button.spec.ts
index aa9c24872a..cd28790f75 100644
--- a/packages/components/menu/src/menu-button.spec.ts
+++ b/packages/components/menu/src/menu-button.spec.ts
@@ -38,6 +38,20 @@ describe('sl-menu-button', () => {
         expect(button).to.exist;
       });
 
+      it('should not be expanded', () => {
+        expect(button).to.have.attribute('aria-expanded', 'false');
+      });
+
+      it('should be expanded when the menu is open', () => {
+        button.click();
+
+        expect(button).to.have.attribute('aria-expanded', 'true');
+      });
+
+      it('should be linked to the menu', () => {
+        expect(button.getAttribute('aria-details')).to.equal(menu.id);
+      });
+
       it('should not have a disabled button', () => {
         expect(button).not.to.have.attribute('disabled');
         expect(button.disabled).not.to.be.true;
diff --git a/packages/components/menu/src/menu-button.ts b/packages/components/menu/src/menu-button.ts
index 7a3bca5016..64388d960e 100644
--- a/packages/components/menu/src/menu-button.ts
+++ b/packages/components/menu/src/menu-button.ts
@@ -66,6 +66,7 @@ export class MenuButton extends ScopedElementsMixin(LitElement) {
   override firstUpdated(changes: PropertyValues<this>): void {
     super.firstUpdated(changes);
 
+    this.button.setAttribute('aria-details', this.menu.id);
     this.menu.anchorElement = this.button;
   }
 
@@ -80,6 +81,7 @@ export class MenuButton extends ScopedElementsMixin(LitElement) {
         @click=${this.#onClick}
         @keydown=${this.#onKeydown}
         ?disabled=${this.disabled}
+        aria-expanded="false"
         fill=${ifDefined(this.fill)}
         part="button"
         size=${ifDefined(this.size)}