[LuxMenuBar] If no href is supplied, use a <button> tag instead of an <a> tag

src/components/LuxMenuBar.vue

@@ -96,6 +96,7 @@
           <ul role="menu" :class="{ 'lux-show': index === activeItem }">
             <li v-for="(child, index) in item.children" :key="index">
               <a
+                v-if="child.href"
                 role="menuitem"
                 :key="index"
                 :href="child.href"
@@ -107,6 +108,18 @@
                 @focusout="hideIfExitingMenu"
                 ><lux-menu-bar-label :item="child"></lux-menu-bar-label
               ></a>
+              <button
+                v-else
+                role="menuitem"
+                key="{{ index }}-button"
+                :title="child.name"
+                :data-method="child.method"
+                class="lux-nav-item"
+                @click="menuItemClicked(child)"
+                @focusout="hideIfExitingMenu"
+              >
+                <lux-menu-bar-label :item="child"></lux-menu-bar-label>
+              </button>
             </li>
           </ul>
         </template>
@@ -612,6 +625,29 @@ export default {
           padding-top: 0.75rem;
         }
       }
+
+      + ul button {
+        font-family: var(--font-family-text);
+        font-size: var(--font-size-base);
+        line-height: 1;
+        border: none;
+        background: none;
+        color: var(--color-rich-black);
+        padding: 0.5rem 1rem;
+        @include princeton-focus(light);
+        width: 100%;
+        box-sizing: border-box;
+        text-align: start;
+      }
+
+      + ul button:hover {
+        cursor: pointer;
+        color: var(--color-rich-black);
+      }
+
+      + ul button:focus {
+        color: var(--color-rich-black);
+      }
     }
   }
 }

tests/unit/specs/components/luxMenuBar.spec.js

@@ -171,15 +171,34 @@ describe("LuxMenuBar.vue", () => {
   })
 
   describe("when type is main-menu", () => {
-    it("emits menu-item-clicked with metadata about the clicked menu item", async () => {
+    beforeEach(async () => {
       wrapper.setProps({ type: "main-menu" })
       await nextTick()
+    })
+    it("emits menu-item-clicked with metadata about the clicked menu item", () => {
       wrapper.findAll(".lux-nav-item")[2].trigger("click")
 
       expect(wrapper.emitted()["menu-item-clicked"].length).toEqual(1)
       expect(wrapper.emitted()["menu-item-clicked"][0]).toEqual([
         { name: "Bar", component: "Bar", href: "/example/" },
       ])
     })
+    it("creates a button rather than link when the item does not have an href supplied", async () => {
+      wrapper.setProps({
+        menuItems: [
+          {
+            name: "Foo",
+            component: "Foo",
+            children: [{ name: "Baz", component: "Baz" }],
+          },
+        ],
+      })
+      await nextTick()
+
+      wrapper.find("button.lux-submenu-toggle").trigger("click")
+      await nextTick()
+
+      expect(wrapper.get("button.lux-nav-item").text()).toEqual("Baz")
+    })
   })
 })