feat(GlobalNav): Focus on menu button when hitting escape in the subm… (

#1885)

* feat(GlobalNav): Focus on menu button when hitting escape in the submenu while focused.

* Fixed linting

* Watch the header directly

* Changed keyup to keydown, cleanup

* Removed tab key code checker (unused)

assets/ts/app/global-navigation.ts

@@ -334,6 +334,28 @@ export function setup(rootElement: HTMLElement): void {
 
   // Closes veil before navigating to search result
   document.addEventListener("autocomplete:selected", closeAllMenus);
+
+  // Press Esc within open header should return focus to header
+  header.addEventListener("keydown", e => {
+    let activeNavButton: HTMLButtonElement | null | undefined;
+    const activeNavSection = document.activeElement?.closest(
+      "[data-nav='desktop-section']"
+    );
+    if (activeNavSection) {
+      const openSectionId = activeNavSection.parentElement!.id;
+      activeNavButton = document.querySelector<HTMLButtonElement>(
+        `nav.m-menu--desktop [aria-controls=${openSectionId}]`
+      );
+      handleNativeEscapeKeyPress(e, () => {
+        resetPage();
+        if (activeNavButton) {
+          activeNavButton.focus();
+          // don't bubble up to the rootElement keydown listener
+          e.stopPropagation();
+        }
+      });
+    }
+  });
 }
 
 export default function setupGlobalNavigation(): void {