Fixed: Scrolling and Hotkey improvements

Co-Authored-By: Mark McDowall <markus101@users.noreply.github.com>
5 years ago · f37fb47058
parent 55758a2772
commit f37fb47058
7 changed files with 113 additions and 27 deletions
--- 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 (
    <Modal
      isOpen={isOpen}
@ -49,7 +55,7 @@ function ConfirmModal(props) {
          }

          <SpinnerButton
-            data-autofocus={true}
+            autoFocus={true}
            kind={kind}
            isSpinning={isSpinning}
            onPress={onConfirm}
@ -74,7 +80,8 @@ ConfirmModal.propTypes = {
  hideCancelButton: PropTypes.bool,
  isSpinning: PropTypes.bool.isRequired,
  onConfirm: PropTypes.func.isRequired,
-  onCancel: PropTypes.func.isRequired
+  onCancel: PropTypes.func.isRequired,
+  bindShortcut: PropTypes.func.isRequired
 };

 ConfirmModal.defaultProps = {
@ -85,4 +92,4 @@ ConfirmModal.defaultProps = {
  isSpinning: false
 };

-export default ConfirmModal;
+export default keyboardShortcuts(ConfirmModal);
--- a/frontend/src/Components/Modal/Modal.js
+++ b/frontend/src/Components/Modal/Modal.js
@ -1,6 +1,7 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import ReactDOM from 'react-dom';
+import FocusLock from 'react-focus-lock';
 import classNames from 'classnames';
 import elementClass from 'element-class';
 import getUniqueElememtId from 'Utilities/getUniqueElementId';
@ -181,31 +182,33 @@ class Modal extends Component {
    }

    return ReactDOM.createPortal(
-      <div
-        className={styles.modalContainer}
-      >
+      <FocusLock disabled={false}>
        <div
-          ref={this._setBackgroundRef}
-          className={backdropClassName}
-          onMouseDown={this.onBackdropBeginPress}
-          onMouseUp={this.onBackdropEndPress}
+          className={styles.modalContainer}
        >
          <div
-            className={classNames(
-              className,
-              styles[size]
-            )}
-            style={style}
+            ref={this._setBackgroundRef}
+            className={backdropClassName}
+            onMouseDown={this.onBackdropBeginPress}
+            onMouseUp={this.onBackdropEndPress}
          >
-            <ErrorBoundary
-              errorComponent={ModalError}
-              onModalClose={onModalClose}
+            <div
+              className={classNames(
+                className,
+                styles[size]
+              )}
+              style={style}
            >
-              {children}
-            </ErrorBoundary>
+              <ErrorBoundary
+                errorComponent={ModalError}
+                onModalClose={onModalClose}
+              >
+                {children}
+              </ErrorBoundary>
+            </div>
          </div>
        </div>
-      </div>,
+      </FocusLock>,
      this._node
    );
  }
--- 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}
--- 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'
--- 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 (
    <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);
--- a/package.json
+++ b/package.json
@ -99,6 +99,7 @@
    "react-dnd-html5-backend": "9.5.1",
    "react-document-title": "2.0.3",
    "react-dom": "16.8.6",
+    "react-focus-lock": "2.2.1",
    "react-google-recaptcha": "2.0.1",
    "react-lazyload": "2.6.5",
    "react-measure": "1.4.7",
--- a/yarn.lock
+++ b/yarn.lock
@ -817,6 +817,13 @@
    "@babel/plugin-transform-react-jsx-self" "^7.7.4"
    "@babel/plugin-transform-react-jsx-source" "^7.7.4"

+"@babel/runtime@^7.0.0":
+  version "7.8.7"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.8.7.tgz#8fefce9802db54881ba59f90bb28719b4996324d"
+  integrity sha512-+AATMUFppJDw6aiR5NVPHqIQBlV/Pj8wY/EZH+lmvRdUo9xBaz/rF3alAwFJQavvKfeOlPE7oaaDHVbcySbCsg==
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
 "@babel/runtime@^7.1.2", "@babel/runtime@^7.4.0", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.3":
  version "7.7.6"
  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.7.6.tgz#d18c511121aff1b4f2cd1d452f1bac9601dd830f"
@ -3009,6 +3016,11 @@ detect-newline@2.X:
  resolved "https://registry.yarnpkg.com/detect-newline/-/detect-newline-2.1.0.tgz#f41f1c10be4b00e87b5f13da680759f2c5bfd3e2"
  integrity sha1-9B8cEL5LAOh7XxPaaAdZ8sW/0+I=

+detect-node@^2.0.4:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/detect-node/-/detect-node-2.0.4.tgz#014ee8f8f669c5c58023da64b8179c083a28c46c"
+  integrity sha512-ZIzRpLJrOj7jjP2miAtgqIfmzbxa4ZOr5jJc601zklsfEx9oTzmmj2nVpIPRpNlRTIh8lc1kyViIY7BWSGNmKw==
+
 diff@^4.0.1:
  version "4.0.1"
  resolved "https://registry.yarnpkg.com/diff/-/diff-4.0.1.tgz#0c667cb467ebbb5cea7f14f135cc2dba7780a8ff"
@ -3982,6 +3994,11 @@ flush-write-stream@^1.0.0, flush-write-stream@^1.0.2:
    inherits "^2.0.3"
    readable-stream "^2.3.6"

+focus-lock@^0.6.6:
+  version "0.6.6"
+  resolved "https://registry.yarnpkg.com/focus-lock/-/focus-lock-0.6.6.tgz#98119a755a38cfdbeda0280eaa77e307eee850c7"
+  integrity sha512-Dx69IXGCq1qsUExWuG+5wkiMqVM/zGx/reXSJSLogECwp3x6KeNQZ+NAetgxEFpnC41rD8U3+jRCW68+LNzdtw==
+
 for-in@^1.0.1, for-in@^1.0.2:
  version "1.0.2"
  resolved "https://registry.yarnpkg.com/for-in/-/for-in-1.0.2.tgz#81068d295a8142ec0ac726c6e2200c30fb6d5e80"
@ -7415,6 +7432,13 @@ react-autowhatever@^10.1.2:
    react-themeable "^1.1.0"
    section-iterator "^2.0.0"

+react-clientside-effect@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/react-clientside-effect/-/react-clientside-effect-1.2.2.tgz#6212fb0e07b204e714581dd51992603d1accc837"
+  integrity sha512-nRmoyxeok5PBO6ytPvSjKp9xwXg9xagoTK1mMjwnQxqM9Hd7MNPl+LS1bOSOe+CV2+4fnEquc7H/S8QD3q697A==
+  dependencies:
+    "@babel/runtime" "^7.0.0"
+
 react-custom-scrollbars@4.2.1:
  version "4.2.1"
  resolved "https://registry.yarnpkg.com/react-custom-scrollbars/-/react-custom-scrollbars-4.2.1.tgz#830fd9502927e97e8a78c2086813899b2a8b66db"
@ -7460,6 +7484,18 @@ react-dom@16.8.6:
    prop-types "^15.6.2"
    scheduler "^0.13.6"

+react-focus-lock@2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/react-focus-lock/-/react-focus-lock-2.2.1.tgz#1d12887416925dc53481914b7cedd39494a3b24a"
+  integrity sha512-47g0xYcCTZccdzKRGufepY8oZ3W1Qg+2hn6u9SHZ0zUB6uz/4K4xJe7yYFNZ1qT6m+2JDm82F6QgKeBTbjW4PQ==
+  dependencies:
+    "@babel/runtime" "^7.0.0"
+    focus-lock "^0.6.6"
+    prop-types "^15.6.2"
+    react-clientside-effect "^1.2.2"
+    use-callback-ref "^1.2.1"
+    use-sidecar "^1.0.1"
+
 react-google-recaptcha@2.0.1:
  version "2.0.1"
  resolved "https://registry.yarnpkg.com/react-google-recaptcha/-/react-google-recaptcha-2.0.1.tgz#3276b29659493f7ca2a5b7739f6c239293cdf1d8"
@ -7766,6 +7802,11 @@ regenerator-runtime@^0.13.2:
  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.3.tgz#7cf6a77d8f5c6f60eb73c5fc1955b2ceb01e6bf5"
  integrity sha512-naKIZz2GQ8JWh///G7L3X6LaQUAMp2lvb1rvwwsURe/VXwD6VMfr+/1NuNw3ag8v2kY1aQ/go5SNn79O9JU7yw==

+regenerator-runtime@^0.13.4:
+  version "0.13.4"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.4.tgz#e96bf612a3362d12bb69f7e8f74ffeab25c7ac91"
+  integrity sha512-plpwicqEzfEyTQohIKktWigcLzmNStMGwbOUbykx51/29Z3JOGYldaaNGK7ngNXV+UcoqvIMmloZ48Sr74sd+g==
+
 regenerator-transform@^0.14.0:
  version "0.14.1"
  resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.14.1.tgz#3b2fce4e1ab7732c08f665dfdb314749c7ddd2fb"
@ -9499,6 +9540,19 @@ url@^0.11.0:
    punycode "1.3.2"
    querystring "0.2.0"

+use-callback-ref@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/use-callback-ref/-/use-callback-ref-1.2.1.tgz#898759ccb9e14be6c7a860abafa3ffbd826c89bb"
+  integrity sha512-C3nvxh0ZpaOxs9RCnWwAJ+7bJPwQI8LHF71LzbQ3BvzH5XkdtlkMadqElGevg5bYBDFip4sAnD4m06zAKebg1w==
+
+use-sidecar@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/use-sidecar/-/use-sidecar-1.0.2.tgz#e72f582a75842f7de4ef8becd6235a4720ad8af6"
+  integrity sha512-287RZny6m5KNMTb/Kq9gmjafi7lQL0YHO1lYolU6+tY1h9+Z3uCtkJJ3OSOq3INwYf2hBryCcDh4520AhJibMA==
+  dependencies:
+    detect-node "^2.0.4"
+    tslib "^1.9.3"
+
 use@^3.1.0:
  version "3.1.1"
  resolved "https://registry.yarnpkg.com/use/-/use-3.1.1.tgz#d50c8cac79a19fbc20f2911f56eb973f4e10070f"