fix(Modal): add keyboard trap (#1115)

* fix(Modal): add keyboard trap

Adds a keyboard trap to fix issue #874

* fix(Modal): focus on modal itself when focus leaves

Fixes the modal keyboard trap to be consistent with vanilla behavior.

* fix(Modal): provide workaround for keyboard trap and floating menus

Makes it possible to escape keyboard trap in modals when using floating menus

* fix(OverflowMenu): focus on menu after closed

This sends focus back to the overflow menu item after the menu gets closed. This
is important for floating overflow menus in modals.

* fix(OverflowMenu): get rid of redundant code

* fix(Modal): improve support for floating menus in keyboard trap

Made algorithm to check for floating menus check parents as well and
made the list of floating menu selectors consistent with vanilla.

Author: Kyle-Cooley

src/components/Modal/Modal.js

@@ -5,6 +5,12 @@ import { iconClose } from 'carbon-icons';
 import Icon from '../Icon';
 import Button from '../Button';
 
+const matchesFuncName =
+  typeof Element !== 'undefined' &&
+  ['matches', 'webkitMatchesSelector', 'msMatchesSelector'].filter(
+    name => typeof Element.prototype[name] === 'function'
+  )[0];
+
 export default class Modal extends Component {
   static propTypes = {
     children: PropTypes.node,
@@ -25,6 +31,7 @@ export default class Modal extends Component {
     onSecondarySubmit: PropTypes.func,
     danger: PropTypes.bool,
     shouldSubmitOnEnter: PropTypes.bool,
+    selectorsFloatingMenus: PropTypes.arrayOf(PropTypes.string),
     selectorPrimaryFocus: PropTypes.string,
   };
 
@@ -37,11 +44,39 @@ export default class Modal extends Component {
     iconDescription: 'close the modal',
     modalHeading: '',
     modalLabel: '',
+    selectorsFloatingMenus: [
+      '.bx--overflow-menu-options',
+      '.bx--tooltip',
+      '.flatpickr-calendar',
+    ],
     selectorPrimaryFocus: '[data-modal-primary-focus]',
   };
 
   button = React.createRef();
 
+  elementOrParentIsFloatingMenu = target => {
+    if (target && typeof target.closest === 'function') {
+      return this.props.selectorsFloatingMenus.some(selector =>
+        target.closest(selector)
+      );
+    } else {
+      // Alternative if closest does not exist.
+      while (target) {
+        if (typeof target[matchesFuncName] === 'function') {
+          if (
+            this.props.selectorsFloatingMenus.some(selector =>
+              target[matchesFuncName](selector)
+            )
+          ) {
+            return true;
+          }
+        }
+        target = target.parentNode;
+      }
+      return false;
+    }
+  };
+
   handleKeyDown = evt => {
     if (evt.which === 27) {
       this.props.onRequestClose();
@@ -52,11 +87,27 @@ export default class Modal extends Component {
   };
 
   handleClick = evt => {
-    if (this.innerModal && !this.innerModal.contains(evt.target)) {
+    if (
+      this.innerModal &&
+      !this.innerModal.contains(evt.target) &&
+      !this.elementOrParentIsFloatingMenu(evt.target)
+    ) {
       this.props.onRequestClose();
     }
   };
 
+  handleBlur = evt => {
+    // Keyboard trap
+    if (
+      this.innerModal &&
+      this.props.open &&
+      (!evt.relatedTarget || !this.innerModal.contains(evt.relatedTarget)) &&
+      !this.elementOrParentIsFloatingMenu(evt.relatedTarget)
+    ) {
+      this.focusModal();
+    }
+  };
+
   componentDidUpdate(prevProps) {
     if (!prevProps.open && this.props.open) {
       this.beingOpen = true;
@@ -65,6 +116,12 @@ export default class Modal extends Component {
     }
   }
 
+  focusModal = () => {
+    if (this.outerModal) {
+      this.outerModal.focus();
+    }
+  };
+
   focusButton = evt => {
     const primaryFocusElement = evt.currentTarget.querySelector(
       this.props.selectorPrimaryFocus
@@ -104,6 +161,7 @@ export default class Modal extends Component {
       iconDescription,
       primaryButtonDisabled,
       danger,
+      selectorsFloatingMenus, // eslint-disable-line
       ...other
     } = this.props;
 
@@ -176,6 +234,7 @@ export default class Modal extends Component {
         {...other}
         onKeyDown={this.handleKeyDown}
         onClick={this.handleClick}
+        onBlur={this.handleBlur}
         className={modalClasses}
         role="presentation"
         tabIndex={-1}

src/components/ModalWrapper/__snapshots__/ModalWrapper-test.js.snap

@@ -53,10 +53,18 @@ exports[`ModalWrapper should render 1`] = `
       primaryButtonText="Save"
       secondaryButtonText="Cancel"
       selectorPrimaryFocus="[data-modal-primary-focus]"
+      selectorsFloatingMenus={
+        Array [
+          ".bx--overflow-menu-options",
+          ".bx--tooltip",
+          ".flatpickr-calendar",
+        ]
+      }
     >
       <div
         className="bx--modal bx--modal-tall"
         id="modal"
+        onBlur={[Function]}
         onClick={[Function]}
         onKeyDown={[Function]}
         role="presentation"

src/components/OverflowMenu/OverflowMenu.js

@@ -362,7 +362,11 @@ export default class OverflowMenu extends Component {
   };
 
   closeMenu = () => {
+    let wasOpen = this.state.open;
     this.setState({ open: false }, () => {
+      if (wasOpen) {
+        this.focusMenuEl();
+      }
       this.props.onClose();
     });
   };
@@ -371,6 +375,12 @@ export default class OverflowMenu extends Component {
     this.menuEl = menuEl;
   };
 
+  focusMenuEl = () => {
+    if (this.menuEl) {
+      this.menuEl.focus();
+    }
+  };
+
   /**
    * Handles the floating menu being unmounted.
    * @param {Element} menuBody The DOM element of the menu body.
@@ -409,10 +419,6 @@ export default class OverflowMenu extends Component {
             !matches(target, '.bx--overflow-menu,.bx--overflow-menu-options')
           ) {
             this.closeMenu();
-            // Note:
-            // The last focusable element in the page should NOT be the trigger button of overflow menu.
-            // Doing so breaks the code that detects if floating menu losing focus, e.g. by keyboard events.
-            this.menuEl.focus();
           }
         },
         !hasFocusin