a11y: Allow the user to exit the menu when unfocusing or ESC

ManageIQ · Oct 8, 2020 · 5e4df63 · 5e4df63
1 parent 7978367
commit 5e4df63
Showing 1 changed file with 13 additions and 3 deletions.
diff --git a/app/javascript/menu/main-menu.jsx b/app/javascript/menu/main-menu.jsx
@@ -34,6 +34,7 @@ export const MainMenu = ({
 
   const appearExpanded = expanded || !!activeSection || !!searchResults;
   const hideSecondary = () => setSection(null);
+  const hideSecondaryEscape = e => e.keyCode === 27 && hideSecondary();
 
   useEffect(() => {
     // persist expanded state
@@ -63,7 +64,7 @@ export const MainMenu = ({
 
   return (
     <>
-      <div onClick={hideSecondary}>
+      <div onClick={hideSecondary} onKeyDown={hideSecondaryEscape} role="navigation">
         <SideNav
           aria-label={__("Main Menu")}
           className="primary"
@@ -119,9 +120,18 @@ export const MainMenu = ({
       { activeSection && (
         <>
           <SideNav aria-label={__('Secondary Menu')} className="secondary" isChildOfHeader={false} expanded>
-            <SecondLevel menu={activeSection.items} hideSecondary={hideSecondary} />
+            <div onKeyDown={hideSecondaryEscape} role="navigation">
+              <SecondLevel menu={activeSection.items} hideSecondary={hideSecondary} />
+            </div>
           </SideNav>
-          <div className="miq-main-menu-overlay" onClick={hideSecondary} />
+          <div
+            className="miq-main-menu-overlay"
+            role="navigation"
+            tabIndex="0"
+            onClick={hideSecondary}
+            onFocus={hideSecondary}
+            onKeyDown={hideSecondary}
+          />
         </>
       )}
     </>