diff --git a/frontend/src/Components/Modal/ConfirmModal.js b/frontend/src/Components/Modal/ConfirmModal.js index 5bb783d43..529a5d973 100644 --- a/frontend/src/Components/Modal/ConfirmModal.js +++ b/frontend/src/Components/Modal/ConfirmModal.js @@ -1,6 +1,7 @@ import PropTypes from 'prop-types'; -import React from 'react'; +import React, { useEffect } from 'react'; import { kinds, sizes } from 'Helpers/Props'; +import keyboardShortcuts from 'Components/keyboardShortcuts'; import Button from 'Components/Link/Button'; import SpinnerButton from 'Components/Link/SpinnerButton'; import Modal from 'Components/Modal/Modal'; @@ -21,9 +22,14 @@ function ConfirmModal(props) { hideCancelButton, isSpinning, onConfirm, - onCancel + onCancel, + bindShortcut } = props; + useEffect(() => { + bindShortcut('enter', onConfirm); + }, [onConfirm]); + return ( +
- - {children} - + + {children} + +
- , +
, this._node ); } diff --git a/frontend/src/Components/Scroller/Scroller.js b/frontend/src/Components/Scroller/Scroller.js index 22fae04c6..4ae94c78b 100644 --- a/frontend/src/Components/Scroller/Scroller.js +++ b/frontend/src/Components/Scroller/Scroller.js @@ -23,6 +23,8 @@ class Scroller extends Component { if (this.props.scrollTop != null) { this._scroller.scrollTop = scrollTop; } + + this._scroller.focus({ preventScroll: true }); } // @@ -58,6 +60,7 @@ class Scroller extends Component { styles[scrollDirection], autoScroll && styles.autoScroll )} + tabIndex={-1} {...otherProps} > {children} diff --git a/frontend/src/Components/keyboardShortcuts.js b/frontend/src/Components/keyboardShortcuts.js index 109ad86e7..481b092a4 100644 --- a/frontend/src/Components/keyboardShortcuts.js +++ b/frontend/src/Components/keyboardShortcuts.js @@ -8,6 +8,16 @@ export const shortcuts = { name: 'Open This Modal' }, + CLOSE_MODAL: { + key: 'Esc', + name: 'Close Current Modal' + }, + + ACCEPT_CONFIRM_MODAL: { + key: 'Enter', + name: 'Accept Confirmation Modal' + }, + MOVIE_SEARCH_INPUT: { key: 's', name: 'Focus Search Box' diff --git a/frontend/src/Settings/PendingChangesModal.js b/frontend/src/Settings/PendingChangesModal.js index e3b14e228..b23d86418 100644 --- a/frontend/src/Settings/PendingChangesModal.js +++ b/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 (