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>