Fix missing aria-expanded attribute on sub menu item

.changeset/fuzzy-states-rest.md

@@ -0,0 +1,5 @@
+---
+'@sl-design-system/menu': patch
+---
+
+Fix sub menu item not having an initial `aria-expanded` attribute

packages/components/menu/src/menu-item.spec.ts

@@ -206,6 +206,31 @@ describe('sl-menu-item', () => {
       menu = el.querySelector('sl-menu') as Menu;
     });
 
+    it('should have an aria-expanded attribute', () => {
+      expect(el).to.have.attribute('aria-expanded', 'false');
+    });
+
+    it('should set aria-expanded to true when the submenu is open', async () => {
+      el.dispatchEvent(new PointerEvent('pointerenter'));
+      await menu.updateComplete;
+
+      expect(el).to.have.attribute('aria-expanded', 'true');
+    });
+
+    it('should have an aria-haspopup attribute on the wrapper', () => {
+      const wrapper = el.renderRoot.querySelector<HTMLElement>('[part="wrapper"]');
+
+      expect(wrapper).to.exist;
+      expect(wrapper).to.have.attribute('aria-haspopup', 'true');
+    });
+
+    it('should have an aria-controls attribute on the wrapper', () => {
+      const wrapper = el.renderRoot.querySelector<HTMLElement>('[part="wrapper"]');
+
+      expect(wrapper).to.exist;
+      expect(wrapper).to.have.attribute('aria-controls', menu.id);
+    });
+
     it('should render an icon indicating the submenu', () => {
       const icon = el.renderRoot.querySelector('sl-icon');
 

packages/components/menu/src/menu-item.ts

@@ -114,6 +114,18 @@ export class MenuItem extends ScopedElementsMixin(LitElement) {
     if (changes.has('selected')) {
       this.setAttribute('aria-checked', (this.selected || false).toString());
     }
+
+    if (changes.has('submenu')) {
+      if (this.submenu) {
+        this.setAttribute('aria-expanded', this.submenu?.matches(':popover-open').toString());
+        this.wrapper?.setAttribute('aria-haspopup', 'true');
+        this.wrapper?.setAttribute('aria-controls', this.submenu.id);
+      } else {
+        this.removeAttribute('aria-expanded');
+        this.wrapper?.removeAttribute('aria-haspopup');
+        this.wrapper?.removeAttribute('aria-controls');
+      }
+    }
   }
 
   override render(): TemplateResult {
@@ -217,8 +229,6 @@ export class MenuItem extends ScopedElementsMixin(LitElement) {
     if (this.submenu) {
       this.submenu.anchorElement = this;
       this.submenu.offset = MenuItem.submenuOffset;
-      this.wrapper?.setAttribute('aria-haspopup', 'true');
-      this.wrapper?.setAttribute('aria-controls', this.submenu.id);
 
       this.submenu.addEventListener('beforetoggle', () => {
         this.setAttribute('aria-expanded', (!this.submenu?.matches(':popover-open')).toString());