university main menu accessibility

src/components/navigation/hy-menu-main-group/hy-menu-main-group.scss

@@ -103,7 +103,7 @@
     top: 0;
     visibility: visible;
     width: 100%;
-    z-index: 100;
+    z-index: 511;
 
     .list {
       display: flex;

src/components/navigation/hy-menu-main-group/hy-menu-main-group.tsx

@@ -8,6 +8,10 @@ export interface MainMenu {
 
 import {Component, Host, h, Element, Prop, State, Watch, Listen} from '@stencil/core';
 
+let keys = {
+  enter: 'Enter',
+};
+
 @Component({
   tag: 'hy-menu-main-group',
   styleUrl: 'hy-menu-main-group.scss',
@@ -31,27 +35,47 @@ export class HyMenuMainGroup {
     this.isMenuOpen = !this.isMenuOpen;
 
     if (this.isMenuOpen) {
-      let hyTopHeader = this.el.closest('.hy-site-header__content-top') as HTMLElement;
-
-      if (hyTopHeader && hyTopHeader.hasAttribute('is-mobile')) {
-        console.log('do mobile stuff');
-      } else {
-        let mainMenuToggle = event.target.shadowRoot.querySelector('.menu--main-group__toggle') as HTMLElement;
-        let mainMenuDropdown = event.target.shadowRoot.querySelector('.menu--main-group__dropdown') as HTMLElement;
-        let mainMenuList = event.target.shadowRoot.querySelector('.list') as HTMLElement;
-        if (mainMenuDropdown && mainMenuList && mainMenuToggle) {
-          let rectHeader = hyTopHeader.getBoundingClientRect();
-          let rectMenuToggle = mainMenuToggle.getBoundingClientRect();
-          mainMenuDropdown.style.top = `${rectHeader.height}px`;
-
-          mainMenuList.style.left = `${rectMenuToggle.left}px`;
-        }
-      }
+      this.adjustMainMenuPosition(event.target);
     }
 
     event.stopPropagation();
   }
 
+  @Listen('keydown')
+  handleComponentKeyDown(event: KeyboardEvent) {
+    const key = event.code;
+    let target = event.target as HTMLButtonElement;
+
+    if (target && [keys.enter].includes(key)) {
+      this.isMenuOpen = !this.isMenuOpen;
+
+      if (this.isMenuOpen) {
+        this.adjustMainMenuPosition(target);
+
+        event.preventDefault();
+      }
+    }
+  }
+
+  adjustMainMenuPosition(target) {
+    let hyTopHeader = this.el.closest('.hy-site-header__content-top') as HTMLElement;
+
+    if (hyTopHeader && hyTopHeader.hasAttribute('is-mobile')) {
+      console.log('do mobile stuff');
+    } else {
+      let mainMenuToggle = target.shadowRoot.querySelector('.menu--main-group__toggle') as HTMLElement;
+      let mainMenuDropdown = target.shadowRoot.querySelector('.menu--main-group__dropdown') as HTMLElement;
+      let mainMenuList = target.shadowRoot.querySelector('.list') as HTMLElement;
+      if (mainMenuDropdown && mainMenuList && mainMenuToggle) {
+        let rectHeader = hyTopHeader.getBoundingClientRect();
+        let rectMenuToggle = mainMenuToggle.getBoundingClientRect();
+        mainMenuDropdown.style.top = `${rectHeader.height}px`;
+
+        mainMenuList.style.left = `${rectMenuToggle.left}px`;
+      }
+    }
+  }
+
   componentWillRender() {
     this.dataMainMenuWatcher(this.dataMainMenu);
   }
@@ -61,6 +85,25 @@ export class HyMenuMainGroup {
     event.stopPropagation();
   }
 
+  // Close the University main menu if user clicks anywhere outside the component.
+  @Listen('click', {target: 'window'})
+  handleOutsideMenuClick(event) {
+    this.isMenuOpen = false;
+    event.stopPropagation();
+  }
+
+  // CLose the University main menu if user opens the desktop menu panel.
+  @Listen('menuDesktopToggled', {target: 'document'})
+  desktopMenuToggled() {
+    this.isMenuOpen = false;
+  }
+
+  // CLose the University main menu if user opens the search panel
+  @Listen('searchPanelToggled', {target: 'document'})
+  searchPanelToggled() {
+    this.isMenuOpen = false;
+  }
+
   render() {
     const white = 'var(--grayscale-white)';
 

src/components/site-header/site-header.scss

@@ -74,6 +74,7 @@
   flex-flow: row;
   place-content: center space-between;
   position: relative;
+  z-index: 100;
 
   @include breakpoint($narrow) {
     margin: 0 auto;

src/components/site-header/site-header.tsx

@@ -238,7 +238,7 @@ export class SiteHeader {
                     url={this.siteUrl}
                     label={this.siteLabel}
                   />
-                  <hy-menu-main-group is-mobile={false} data-main-menu={this.dataMainMenuLinks} />
+                  <hy-menu-main-group tabindex="0" is-mobile={false} data-main-menu={this.dataMainMenuLinks} />
                 </div>
 
                 <div class={'menu--secondary menu--secondary--group'}>