From bf72758c4ef8933a470a447ff03a8d6605711edb Mon Sep 17 00:00:00 2001
From: ludwiczakpawel <ludwiczakpawel@gmail.com>
Date: Tue, 26 Jan 2021 15:12:54 +0100
Subject: [PATCH] Close modal on `escape` keypress (#12428)

* tooltips 1.0.1

* tooltips 1.0.1

* close on esc

* simpler
---
 app/javascript/article-form/components/Help.jsx | 3 +--
 app/javascript/crayons/Modal/Modal.jsx          | 6 ++++++
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/app/javascript/article-form/components/Help.jsx b/app/javascript/article-form/components/Help.jsx
index 6adb9d0a3..5cdf11424 100644
--- a/app/javascript/article-form/components/Help.jsx
+++ b/app/javascript/article-form/components/Help.jsx
@@ -30,8 +30,7 @@ export class Help extends Component {
     };
   };
 
-  toggleModal = (varShowing) => (e) => {
-    e.preventDefault();
+  toggleModal = (varShowing) => () => {
     this.setState((prevState) => ({
       ...this.setCommonProps({
         [varShowing]: !prevState[varShowing],
diff --git a/app/javascript/crayons/Modal/Modal.jsx b/app/javascript/crayons/Modal/Modal.jsx
index 108468969..11de6b3ef 100644
--- a/app/javascript/crayons/Modal/Modal.jsx
+++ b/app/javascript/crayons/Modal/Modal.jsx
@@ -1,5 +1,6 @@
 import { h } from 'preact';
 import PropTypes from 'prop-types';
+import { KeyboardShortcuts } from '../../shared/components/useKeyboardShortcuts';
 import { defaultChildrenPropTypes } from '../../common-prop-types';
 import { Button } from '@crayons';
 
@@ -40,6 +41,10 @@ export const Modal = ({
   overlay,
   onClose,
 }) => {
+  const shortcuts = {
+    escape: onClose,
+  };
+
   return (
     <div
       data-testid="modal-container"
@@ -64,6 +69,7 @@ export const Modal = ({
               aria-label="Close"
               onClick={onClose}
             />
+            <KeyboardShortcuts shortcuts={shortcuts} />
           </div>
         )}
         <div className="crayons-modal__box__body">{children}</div>