[LuxMenuBar] fix bugs in leftmost menu

* aria-expanded was always false before this commit, now it changes based on whether or not the menu is open. * before this commit, the Esc key did not close the leftmost menu. With this commit, the Esc key can close any menu. Co-authored-by: Isha Sinha <[email protected]>
pulibrary · Oct 4, 2024 · 57525dd · 57525dd
1 parent 7e1c73e
commit 57525dd
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 2 deletions.
diff --git a/src/components/LuxMenuBar.vue b/src/components/LuxMenuBar.vue
@@ -84,11 +84,11 @@
         <template v-if="item.children">
           <button
             aria-haspopup="true"
-            :aria-expanded="activeItem ? 'true' : 'false'"
+            :aria-expanded="activeItem === '' ? 'false' : 'true'"
             class="lux-submenu-toggle"
             :data-method="item.method"
             @click="setActiveItem(index)"
-            @keydown.esc="activeItem ? setActiveItem(index) : 'false'"
+            @keydown.esc="setActiveItem(index)"
           >
             <lux-menu-bar-label :item="item"></lux-menu-bar-label>
           </button>

diff --git a/tests/unit/specs/components/luxMenuBar.spec.js b/tests/unit/specs/components/luxMenuBar.spec.js
@@ -34,6 +34,35 @@ describe("LuxMenuBar.vue", () => {
     expect(wrapper.element.innerHTML).not.toContain('role="presentation"')
   })
 
+  it("should start with aria-expanded false", async () => {
+    wrapper.setProps({ type: "main-menu" })
+    await nextTick()
+    expect(wrapper.find(".lux-submenu-toggle").attributes("aria-expanded")).toEqual("false")
+  })
+
+  it("should be aria-expanded true after a user opens the menu", async () => {
+    wrapper.setProps({ type: "main-menu" })
+    await nextTick()
+
+    wrapper.find("button.lux-submenu-toggle").trigger("click")
+    await nextTick()
+
+    expect(wrapper.find(".lux-submenu-toggle").attributes("aria-expanded")).toEqual("true")
+  })
+
+  it("should close the menu when the user presses the Esc key", async () => {
+    wrapper.setProps({ type: "main-menu" })
+    await nextTick()
+    wrapper.find("button.lux-submenu-toggle").trigger("click")
+    await nextTick()
+    expect(wrapper.find(".lux-submenu-toggle").attributes("aria-expanded")).toEqual("true")
+
+    wrapper.find("button.lux-submenu-toggle").trigger("keydown.esc")
+
+    await nextTick()
+    expect(wrapper.find(".lux-submenu-toggle").attributes("aria-expanded")).toEqual("false")
+  })
+
   it("should be a nav element if the type prop value is 'links'", async () => {
     expect(wrapper.find("nav").exists()).toBe(true)
     expect(wrapper.find("div").exists()).toBe(false)