Merge branch 'main' into feature/1537-add-no-items-found-message

.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

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;

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)}