Scrolling and hotkey improvements

New: Use Esc/Enter for cancel/accept in confirmation modals
Fixed: Modals focused when opened
Fixed: Scrolling with keyboard unless focus is shifted out of scrollable area
Closes #3291

frontend/src/Settings/PendingChangesModal.js

@@ -1,6 +1,7 @@
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, { useEffect } from 'react';
 import { kinds } from 'Helpers/Props';
+import keyboardShortcuts from 'Components/keyboardShortcuts';
 import Button from 'Components/Link/Button';
 import Modal from 'Components/Modal/Modal';
 import ModalContent from 'Components/Modal/ModalContent';
@@ -12,9 +13,14 @@ function PendingChangesModal(props) {
   const {
     isOpen,
     onConfirm,
-    onCancel
+    onCancel,
+    bindShortcut
   } = props;
 
+  useEffect(() => {
+    bindShortcut('enter', onConfirm);
+  }, [onConfirm]);
+
   return (
     <Modal
       isOpen={isOpen}
@@ -36,6 +42,7 @@ function PendingChangesModal(props) {
           </Button>
 
           <Button
+            autoFocus={true}
             kind={kinds.DANGER}
             onPress={onConfirm}
           >
@@ -52,11 +59,12 @@ PendingChangesModal.propTypes = {
   isOpen: PropTypes.bool.isRequired,
   kind: PropTypes.oneOf(kinds.all),
   onConfirm: PropTypes.func.isRequired,
-  onCancel: PropTypes.func.isRequired
+  onCancel: PropTypes.func.isRequired,
+  bindShortcut: PropTypes.func.isRequired
 };
 
 PendingChangesModal.defaultProps = {
   kind: kinds.PRIMARY
 };
 
-export default PendingChangesModal;
+export default keyboardShortcuts(PendingChangesModal);