Skip to content

Commit

Permalink
Merge pull request #7406 from skateman/a11y-menu-escape-unfocus
Browse files Browse the repository at this point in the history
a11y: Allow the user to exit the menu when unfocusing or ESC
  • Loading branch information
h-kataria authored Oct 13, 2020
2 parents ccf86d0 + 25635f0 commit 1fe72a0
Show file tree
Hide file tree
Showing 2 changed files with 16 additions and 4 deletions.
17 changes: 14 additions & 3 deletions app/javascript/menu/main-menu.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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)}
Expand Down Expand Up @@ -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}
/>
</>
)}
</>
Expand Down
3 changes: 2 additions & 1 deletion app/javascript/menu/menu-collapse.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down

0 comments on commit 1fe72a0

Please sign in to comment.