From 25635f054adbe4689971c536384f85e513f4f276 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?D=C3=A1vid=20Hal=C3=A1sz?= <dhalasz@redhat.com>
Date: Thu, 8 Oct 2020 10:57:25 +0200
Subject: [PATCH] a11y: Allow the user to exit the menu when unfocusing or ESC

---
 app/javascript/menu/main-menu.jsx     | 17 ++++++++++++++---
 app/javascript/menu/menu-collapse.jsx |  3 ++-
 2 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/app/javascript/menu/main-menu.jsx b/app/javascript/menu/main-menu.jsx
index c98b86f000e..0a56c6e3068 100644
--- a/app/javascript/menu/main-menu.jsx
+++ b/app/javascript/menu/main-menu.jsx
@@ -38,6 +38,7 @@ export const MainMenu = ({
 
   const appearExpanded = expanded || !!activeSection || !!searchResults;
   const hideSecondary = () => setSection(null);
+  const hideSecondaryEscape = e => e.keyCode === 27 && hideSecondary();
 
   useEffect(() => {
     // persist expanded state
@@ -67,7 +68,7 @@ export const MainMenu = ({
 
   return (
     <>
-      <div onClick={hideSecondary} id="main-menu-primary">
+      <div onClick={hideSecondary} onKeyDown={hideSecondaryEscape} role="navigation" id="main-menu-primary">
         <Navbar
           isSideNavExpanded={expanded}
           onClickSideNavExpand={() => setExpanded(!expanded)}
@@ -125,6 +126,7 @@ export const MainMenu = ({
             <MenuCollapse
               expanded={expanded /* not appearExpanded */}
               toggle={() => setExpanded(!expanded)}
+              onFocus={hideSecondary}
             />
           )}
         </SideNav>
@@ -132,9 +134,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}
+          />
         </>
       )}
     </>
diff --git a/app/javascript/menu/menu-collapse.jsx b/app/javascript/menu/menu-collapse.jsx
index 2e23e69f496..8b8df212bc1 100644
--- a/app/javascript/menu/menu-collapse.jsx
+++ b/app/javascript/menu/menu-collapse.jsx
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { ChevronLeft20, ChevronRight20 } from '@carbon/icons-react';
 import { SideNavItem } from 'carbon-components-react/es/components/UIShell';
 
-const MenuCollapse = ({ expanded, toggle }) => (
+const MenuCollapse = ({ expanded, toggle, onFocus }) => (
   <SideNavItem className="menu-collapse">
     <div
       role="button"
@@ -11,6 +11,7 @@ const MenuCollapse = ({ expanded, toggle }) => (
       className="menu-collapse-button"
       onClick={toggle}
       onKeyPress={toggle}
+      onFocus={onFocus}
       aria-expanded={expanded}
       aria-controls="main-menu-primary"
       aria-haspopup="true"