fix(modals): replace focus-trap by focus-lock (#69)

Author: gregberge

package.json

@@ -16,11 +16,11 @@
   "bundlesize": [
     {
       "path": "./packages/core-em/dist/smooth-ui-core-em.min.js",
-      "maxSize": "18 kB"
+      "maxSize": "20 kB"
     },
     {
       "path": "./packages/core-sc/dist/smooth-ui-core-sc.min.js",
-      "maxSize": "18 kB"
+      "maxSize": "20 kB"
     }
   ],
   "devDependencies": {

packages/core-em/package.json

@@ -26,9 +26,9 @@
     "access": "public"
   },
   "dependencies": {
-    "focus-trap": "^3.0.0",
     "polished": "^2.3.0",
     "prop-types": "^15.6.2",
+    "react-focus-lock": "^1.16.0",
     "react-transition-group": "^2.5.0"
   },
   "peerDependencies": {

packages/core-sc/package.json

@@ -25,9 +25,9 @@
     "access": "public"
   },
   "dependencies": {
-    "focus-trap": "^3.0.0",
     "polished": "^2.3.0",
     "prop-types": "^15.6.2",
+    "react-focus-lock": "^1.16.0",
     "react-transition-group": "^2.5.0"
   },
   "peerDependencies": {

packages/shared/core/Modal.js

@@ -1,7 +1,7 @@
 /* eslint-disable jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */
 import React from 'react'
 import PropTypes from 'prop-types'
-import createFocusTrap from 'focus-trap'
+import FocusLock from 'react-focus-lock'
 import { css, withTheme } from './styled-engine'
 import { th, mixin } from './utils/system'
 import Transition from './Transition'
@@ -51,23 +51,19 @@ class ModalComponent extends React.Component {
 
   handleDialogRef = dialogNode => {
     if (dialogNode) {
-      const { initialFocusRef } = this.props
       this.disposeAriaHider = createAriaHider(dialogNode)
-      this.trap = createFocusTrap(dialogNode, {
-        initialFocus: initialFocusRef
-          ? () => initialFocusRef.current
-          : undefined,
-        fallbackFocus: this.contentRef.current,
-        escapeDeactivates: false,
-        clickOutsideDeactivates: false,
-      })
-      this.trap.activate()
     } else {
-      this.trap.deactivate()
       this.disposeAriaHider()
     }
   }
 
+  onFocusLockActivation = () => {
+    const { initialFocusRef } = this.props
+    if (initialFocusRef && initialFocusRef.current) {
+      initialFocusRef.current.focus()
+    }
+  }
+
   render() {
     const {
       className,
@@ -92,31 +88,33 @@ class ModalComponent extends React.Component {
           if (status === 'exited') return null
           return (
             <Portal>
-              <div
-                className={cx(
-                  'sui-modal',
-                  `sui-modal-transition-${status}`,
-                  className,
-                )}
-                ref={this.handleDialogRef}
-                onClick={wrapEvent(onClick, event => {
-                  event.stopPropagation()
-                  onClose()
-                })}
-                onKeyDown={wrapEvent(onKeyDown, event => {
-                  if (event.key === 'Escape') {
+              <FocusLock returnFocus onActivation={this.onFocusLockActivation}>
+                <div
+                  className={cx(
+                    'sui-modal',
+                    `sui-modal-transition-${status}`,
+                    className,
+                  )}
+                  ref={this.handleDialogRef}
+                  onClick={wrapEvent(onClick, event => {
                     event.stopPropagation()
                     onClose()
-                  }
-                })}
-                {...props}
-              >
-                <ModalContext.Provider
-                  value={{ contentRef: this.contentRef, onClose }}
+                  })}
+                  onKeyDown={wrapEvent(onKeyDown, event => {
+                    if (event.key === 'Escape') {
+                      event.stopPropagation()
+                      onClose()
+                    }
+                  })}
+                  {...props}
                 >
-                  {children}
-                </ModalContext.Provider>
-              </div>
+                  <ModalContext.Provider
+                    value={{ contentRef: this.contentRef, onClose }}
+                  >
+                    {children}
+                  </ModalContext.Provider>
+                </div>
+              </FocusLock>
             </Portal>
           )
         }}

yarn.lock

@@ -5820,13 +5820,10 @@ flush-write-stream@^1.0.0:
     inherits "^2.0.1"
     readable-stream "^2.0.4"
 
-focus-trap@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/focus-trap/-/focus-trap-3.0.0.tgz#4d2ee044ae66bf7eb6ebc6c93bd7a1039481d7dc"
-  integrity sha512-jTFblf0tLWbleGjj2JZsAKbgtZTdL1uC48L8FcmSDl4c2vDoU4NycN1kgV5vJhuq1mxNFkw7uWZ1JAGlINWvyw==
-  dependencies:
-    tabbable "^3.1.0"
-    xtend "^4.0.1"
+focus-lock@^0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/focus-lock/-/focus-lock-0.5.0.tgz#6cf24e1091bf7e2aa6704f61f7b0ee0a5f4cf012"
+  integrity sha512-EtQvprh8R8ulU6x0qPLVMDHLHRcD8Dx+flVT8fllK70ls4q8Uagt5FKmikLBraYZZxzQoQSGl4JBMQK0miqMbg==
 
 follow-redirects@1.0.0:
   version "1.0.0"
@@ -10660,6 +10657,13 @@ re-resizable@^4.9.0:
   resolved "https://registry.yarnpkg.com/re-resizable/-/re-resizable-4.9.0.tgz#0160728b9d7e32371fb26562221678ae643e6557"
   integrity sha512-AkTHHC/I1+MUnabFu3/9ADwR5A+HyjiL3xgqlcgNKdyJZVb851I7sGre/4JIU7XfhaN5t+xZBvJPOuvEdvSMcw==
 
+react-clientside-effect@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/react-clientside-effect/-/react-clientside-effect-1.0.0.tgz#81c4f91bd4ec0f8792ba76fe29c1d09e37fff062"
+  integrity sha512-XYOjooNlAEos60o4ha9zDb1R9h3LMJUdXJOjFH6fNUwFxXu2k+Wq4Cd0JWmurgeY0DWTzGvpNJ0cY6eHyfhL1Q==
+  dependencies:
+    shallowequal "^1.1.0"
+
 react-codemirror2@^5.1.0:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/react-codemirror2/-/react-codemirror2-5.1.0.tgz#62de4460178adea40eb52eabf7491669bf3794b8"
@@ -10754,6 +10758,15 @@ react-feather@^1.1.3:
   resolved "https://registry.yarnpkg.com/react-feather/-/react-feather-1.1.4.tgz#d0143da95f9d52843cf13a553091573a7c617897"
   integrity sha512-Odke3WUl00+a2scGQKlep4m+qDESl/x+PsTRB3v6fAV/2dteF4EaRjqhX8h7HM3mU3V3v0xGTv8Z5S26bpQ5PQ==
 
+react-focus-lock@^1.16.0:
+  version "1.16.0"
+  resolved "https://registry.yarnpkg.com/react-focus-lock/-/react-focus-lock-1.16.0.tgz#62fe9971e562016a5b51e0f3ae78280b7012c53c"
+  integrity sha512-lWO4trLJKRGiI9Zt1tHLDr3Fboi0xsgQVVBaUddD7hgpVdF7r5G8xMnEE9kedN+gigpTIgC636if4QmuVjUtfw==
+  dependencies:
+    focus-lock "^0.5.0"
+    prop-types "^15.6.2"
+    react-clientside-effect "^1.0.0"
+
 react-hot-loader@4.3.8:
   version "4.3.8"
   resolved "https://registry.yarnpkg.com/react-hot-loader/-/react-hot-loader-4.3.8.tgz#81f174a9b70fb5a4d4f2e9134d73659ddcd779cf"
@@ -11801,7 +11814,7 @@ shallow-clone@^0.1.2:
     lazy-cache "^0.2.3"
     mixin-object "^2.0.1"
 
-shallowequal@^1.0.2:
+shallowequal@^1.0.2, shallowequal@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/shallowequal/-/shallowequal-1.1.0.tgz#188d521de95b9087404fd4dcb68b13df0ae4e7f8"
   integrity sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==
@@ -12451,11 +12464,6 @@ symbol-tree@^3.2.2:
   resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.2.tgz#ae27db38f660a7ae2e1c3b7d1bc290819b8519e6"
   integrity sha1-rifbOPZgp64uHDt9G8KQgZuFGeY=
 
-tabbable@^3.1.0:
-  version "3.1.1"
-  resolved "https://registry.yarnpkg.com/tabbable/-/tabbable-3.1.1.tgz#db7512f28a9a1ed16e4275bd190131be9d5ad8e9"
-  integrity sha512-583MHIOwictf7+zbxqO/L5fBqMN6Li4SJ1XTKQA9WzHRA7c2BB+D+Ny7Y6kGqU2u+rHK59+oRzrBvMU53aZz+A==
-
 table@^4.0.3:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/table/-/table-4.0.3.tgz#00b5e2b602f1794b9acaf9ca908a76386a7813bc"