From 550a423dfa104ef817bdfe7f69ee536a237d76f0 Mon Sep 17 00:00:00 2001 From: Anton Korzunov Date: Tue, 23 Oct 2018 08:50:13 +1100 Subject: [PATCH] fix(modals): replace focus-trap by focus-lock --- package.json | 4 +-- packages/core-em/package.json | 2 +- packages/core-sc/package.json | 2 +- packages/shared/core/Modal.js | 66 +++++++++++++++++------------------ yarn.lock | 34 +++++++++++------- 5 files changed, 57 insertions(+), 51 deletions(-) diff --git a/package.json b/package.json index 8cbdc8a70..3bb810bba 100644 --- a/package.json +++ b/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": { diff --git a/packages/core-em/package.json b/packages/core-em/package.json index 4daff9307..596456667 100644 --- a/packages/core-em/package.json +++ b/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": { diff --git a/packages/core-sc/package.json b/packages/core-sc/package.json index 4826a701e..b8608f379 100644 --- a/packages/core-sc/package.json +++ b/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": { diff --git a/packages/shared/core/Modal.js b/packages/shared/core/Modal.js index adfdf4b40..9670379a2 100644 --- a/packages/shared/core/Modal.js +++ b/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 ( -
{ - event.stopPropagation() - onClose() - })} - onKeyDown={wrapEvent(onKeyDown, event => { - if (event.key === 'Escape') { + +
{ event.stopPropagation() onClose() - } - })} - {...props} - > - { + if (event.key === 'Escape') { + event.stopPropagation() + onClose() + } + })} + {...props} > - {children} - -
+ + {children} + +
+ ) }} diff --git a/yarn.lock b/yarn.lock index 91940502f..bc469a50b 100644 --- a/yarn.lock +++ b/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"