fix(ui-shell): HeaderNavMenu should close when pressing Enter (#1073)

Fixes:

- pressing "Enter" on a `HeaderNavMenuItem` should close the menu
- tab blurring the last item in an open menu should close the menu
- remove "role" to fix a11y warning

src/UIShell/GlobalHeader/HeaderNavItem.svelte

@@ -20,9 +20,10 @@
   import { getContext } from "svelte";
 
   const id = "ccs-" + Math.random().toString(36);
-  const ctx = getContext("HeaderNavMenu");
+  const { selectedItems, updateSelectedItems, closeMenu } =
+    getContext("HeaderNavMenu");
 
-  $: if (ctx) ctx.updateSelectedItems({ id, isSelected });
+  $: updateSelectedItems({ id, isSelected });
 </script>
 
 <li>
@@ -43,6 +44,10 @@
     on:keydown
     on:focus
     on:blur
+    on:blur="{() => {
+      const ids = Object.keys($selectedItems);
+      if (ids.indexOf(id) === ids.length - 1) closeMenu();
+    }}"
   >
     <span class:bx--text-truncate--end="{true}">{text}</span>
   </a>

src/UIShell/GlobalHeader/HeaderNavMenu.svelte

@@ -14,19 +14,29 @@
   /** Obtain a reference to the HTML anchor element */
   export let ref = null;
 
+  export function toggle() {
+    expanded = !expanded;
+  }
+
   import { setContext } from "svelte";
   import { writable } from "svelte/store";
   import ChevronDown16 from "../../icons/ChevronDown16.svelte";
 
   const selectedItems = writable({});
 
+  let menuRef = null;
+
   setContext("HeaderNavMenu", {
+    selectedItems,
     updateSelectedItems(item) {
       selectedItems.update((_items) => ({
         ..._items,
         [item.id]: item.isSelected,
       }));
     },
+    closeMenu() {
+      expanded = false;
+    },
   });
 
   $: isCurrentSubmenu =
@@ -34,13 +44,9 @@
 </script>
 
 <svelte:window
-  on:mouseup="{({ target }) => {
+  on:click="{({ target }) => {
-    if (ref.contains(target) || target === ref) {
+    if (!ref.contains(target)) {
-      expanded = !expanded;
+      expanded = false;
-    } else {
-      if (expanded) {
-        expanded = false;
-      }
     }
   }}"
 />
@@ -48,10 +54,21 @@
 <li
   class:bx--header__submenu="{true}"
   class:bx--header__submenu--current="{isCurrentSubmenu}"
+  on:click="{(e) => {
+    if (!menuRef.contains(e.target)) {
+      e.preventDefault();
+    }
+    expanded = !expanded;
+  }}"
+  on:keydown="{(e) => {
+    if (e.key === 'Enter') {
+      e.stopPropagation();
+      expanded = !expanded;
+    }
+  }}"
 >
   <a
     bind:this="{ref}"
-    role="menuitem"
     tabindex="0"
     aria-haspopup="menu"
     aria-expanded="{expanded}"
@@ -62,8 +79,8 @@
     {...$$restProps}
     style="{$$restProps.style}; z-index: 1"
     on:keydown
-    on:keydown="{({ key }) => {
+    on:keydown="{(e) => {
-      if (key === 'Enter') {
+      if (e.key === 'Enter' || e.key === ' ') {
         expanded = !expanded;
       }
     }}"
@@ -78,7 +95,12 @@
     {text}
     <ChevronDown16 class="bx--header__menu-arrow" />
   </a>
-  <ul role="menu" aria-label="{text}" class:bx--header__menu="{true}">
+  <ul
+    bind:this="{menuRef}"
+    role="menu"
+    aria-label="{text}"
+    class:bx--header__menu="{true}"
+  >
     <slot />
   </ul>
 </li>