feat(SideNavMenu): collapse submenu on esc keydown (#5198)

Author: emyarod

packages/react/src/components/UIShell/SideNavMenu.js

@@ -11,6 +11,7 @@ import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
 import SideNavIcon from './SideNavIcon';
+import { keys, match } from '../../internal/keyboard';
 
 const { prefix } = settings;
 
@@ -100,6 +101,12 @@ export class SideNavMenu extends React.Component {
     this.setState(state => ({ isExpanded: !state.isExpanded }));
   };
 
+  handleKeyDown = event => {
+    if (match(event, keys.Escape)) {
+      this.setState(() => ({ isExpanded: false }));
+    }
+  };
+
   render() {
     const {
       buttonRef,
@@ -138,7 +145,8 @@ export class SideNavMenu extends React.Component {
       [customClassName]: !!customClassName,
     });
     return (
-      <li className={className}>
+      // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
+      <li className={className} onKeyDown={this.handleKeyDown}>
         <button
           aria-haspopup="true"
           aria-expanded={isExpanded}

packages/react/src/components/UIShell/__tests__/SideNavMenu-test.js

@@ -43,6 +43,17 @@ describe('SideNavMenu', () => {
     expect(wrapper.state('isExpanded')).toBe(true);
   });
 
+  it('should collapse the menu when the Esc key is pressed', () => {
+    wrapper = mount(<SideNavMenu {...mockProps} defaultExpanded={true} />);
+    expect(wrapper.state('isExpanded')).toBe(true);
+    wrapper.simulate('keydown', {
+      key: 'Escape',
+      keyCode: 27,
+      which: 27,
+    });
+    expect(wrapper.state('isExpanded')).toBe(false);
+  });
+
   it('should reset expanded state if the isSideNavExpanded prop is false', () => {
     wrapper = mount(<SideNavMenu {...mockProps} />);
     expect(wrapper.state('isExpanded')).toBe(false);

packages/react/src/components/UIShell/__tests__/__snapshots__/SideNavMenu-test.js.snap

@@ -62,6 +62,7 @@ exports[`SideNavMenu should render 1`] = `
 >
   <li
     className="bx--side-nav__item bx--side-nav__item--icon custom-classname"
+    onKeyDown={[Function]}
   >
     <button
       aria-expanded={false}