fix(ui-shell): fix HeaderNavMenu accessibility, undefined context (#1079)

Fixes:

* hotfix: remove toggle accessor from HeaderNavMenu

* hotfix(ui-shell): HeaderNavMenu context is possibly undefined

* fix: apply a11y navigation menubar attributes

src/UIShell/GlobalHeader/HeaderNav.svelte

@@ -13,7 +13,7 @@
 </script>
 
 <nav {...props} class:bx--header__nav="{true}" {...$$restProps}>
-  <ul {...props} class:bx--header__menu-bar="{true}">
+  <ul {...props} role="menubar" class:bx--header__menu-bar="{true}">
     <slot />
   </ul>
 </nav>

src/UIShell/GlobalHeader/HeaderNavItem.svelte

@@ -17,16 +17,27 @@
   /** Obtain a reference to the HTML anchor element */
   export let ref = null;
 
-  import { getContext } from "svelte";
+  import { getContext, onMount } from "svelte";
 
   const id = "ccs-" + Math.random().toString(36);
-  const { selectedItems, updateSelectedItems, closeMenu } =
+  const ctx = getContext("HeaderNavMenu");
-    getContext("HeaderNavMenu");
 
-  $: updateSelectedItems({ id, isSelected });
+  let selectedItemIds = [];
+
+  const unsubSelectedItems = ctx?.selectedItems.subscribe((_selectedItems) => {
+    selectedItemIds = Object.keys(_selectedItems);
+  });
+
+  $: ctx?.updateSelectedItems({ id, isSelected });
+
+  onMount(() => {
+    return () => {
+      if (unsubSelectedItems) unsubSelectedItems();
+    };
+  });
 </script>
 
-<li>
+<li role="none">
   <a
     bind:this="{ref}"
     role="menuitem"
@@ -45,8 +56,9 @@
     on:focus
     on:blur
     on:blur="{() => {
-      const ids = Object.keys($selectedItems);
+      if (selectedItemIds.indexOf(id) === selectedItemIds.length - 1) {
-      if (ids.indexOf(id) === ids.length - 1) closeMenu();
+        ctx?.closeMenu();
+      }
     }}"
   >
     <span class:bx--text-truncate--end="{true}">{text}</span>

src/UIShell/GlobalHeader/HeaderNavMenu.svelte

@@ -14,10 +14,6 @@
   /** 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";
@@ -52,6 +48,7 @@
 />
 
 <li
+  role="none"
   class:bx--header__submenu="{true}"
   class:bx--header__submenu--current="{isCurrentSubmenu}"
   on:click="{(e) => {
@@ -69,6 +66,7 @@
 >
   <a
     bind:this="{ref}"
+    role="menuitem"
     tabindex="0"
     aria-haspopup="menu"
     aria-expanded="{expanded}"