Merge pull request #7406 from skateman/a11y-menu-escape-unfocus

a11y: Allow the user to exit the menu when unfocusing or ESC
ManageIQ · Oct 13, 2020 · 1fe72a0 · 1fe72a0
2 parents ccf86d0 + 25635f0
commit 1fe72a0
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 4 deletions.
diff --git 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,16 +126,26 @@ export const MainMenu = ({
             <MenuCollapse
               expanded={expanded /* not appearExpanded */}
               toggle={() => setExpanded(!expanded)}
+              onFocus={hideSecondary}
             />
           )}
         </SideNav>
       </div>
       { 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
@@ -3,14 +3,15 @@ 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"
       tabIndex="0"
       className="menu-collapse-button"
       onClick={toggle}
       onKeyPress={toggle}
+      onFocus={onFocus}
       aria-expanded={expanded}
       aria-controls="main-menu-primary"
       aria-haspopup="true"