A nice focus trap :D

components/ui/Modal/Modal.tsx

@@ -7,7 +7,7 @@ import {
   enableBodyScroll,
   clearAllBodyScrollLocks,
 } from 'body-scroll-lock'
-import FocusTrap from 'focus-trap-react'
+import FocusTrap from '@lib/focus-trap'
 interface Props {
   className?: string
   children?: any
@@ -45,8 +45,7 @@ const Modal: FC<Props> = ({ children, open, onClose, onEnter = null }) => {
   return (
     <Portal>
       {open ? (
-        <FocusTrap>
-          <div className={s.root} ref={ref}>
+        <div role="dialog" className={s.root} ref={ref}>
           <div className={s.modal}>
             <button
               onClick={() => onClose()}
@@ -56,10 +55,9 @@ const Modal: FC<Props> = ({ children, open, onClose, onEnter = null }) => {
               <Cross className="h-6 w-6" />
             </button>
 
-              <div>{children}</div>
+            <FocusTrap>{children}</FocusTrap>
           </div>
         </div>
-        </FocusTrap>
       ) : null}
     </Portal>
   )

lib/focus-trap.tsx

@@ -0,0 +1,37 @@
+import React, { useEffect, RefObject } from 'react'
+import { tabbable } from 'tabbable'
+
+interface Props {
+  children: React.ReactNode | any
+}
+
+export default function FocusTrap({ children }: Props) {
+  const root: RefObject<any> = React.useRef()
+  const anchor: RefObject<any> = React.useRef(document.activeElement)
+
+  const returnFocus = () => {
+    if (anchor) {
+      anchor.current.focus()
+    }
+  }
+
+  const trapFocus = () => {
+    const focusableElements = tabbable(root.current)
+
+    if (focusableElements[0]) {
+      focusableElements[0].focus()
+    }
+  }
+
+  useEffect(() => {
+    setTimeout(trapFocus, 20)
+    return returnFocus
+  }, [root, children])
+
+  return React.createElement('div', {
+    ref: root,
+    children,
+    className: 'outline-none focus-trap',
+    tabIndex: -1,
+  })
+}

package.json

@@ -52,7 +52,6 @@
     "bowser": "^2.11.0",
     "classnames": "^2.2.6",
     "email-validator": "^2.0.4",
-    "focus-trap-react": "^8.3.2",
     "js-cookie": "^2.2.1",
     "keen-slider": "^5.2.4",
     "lodash.random": "^3.2.0",
@@ -66,6 +65,7 @@
     "react-intersection-observer": "^8.30.1",
     "react-merge-refs": "^1.1.0",
     "react-ticker": "^1.2.2",
+    "tabbable": "^5.1.5",
     "tailwindcss": "^1.9"
   },
   "devDependencies": {

tailwind.config.js

@@ -8,6 +8,11 @@ module.exports = {
       './pages/**/*.{js,ts,jsx,tsx}',
       './components/**/*.{js,ts,jsx,tsx}',
     ],
+    options: {
+      safelist: {
+        standard: ['outline-none'],
+      },
+    },
   },
   theme: {
     extend: {

yarn.lock

@@ -2047,20 +2047,6 @@ flatten@^1.0.2:
   resolved "https://registry.yarnpkg.com/flatten/-/flatten-1.0.3.tgz#c1283ac9f27b368abc1e36d1ff7b04501a30356b"
   integrity sha512-dVsPA/UwQ8+2uoFe5GHtiBMu48dWLTdsuEd7CKGlZlD78r1TTWBvDuFaFGKCo/ZfEr95Uk56vZoX86OsHkUeIg==
 
-focus-trap-react@^8.3.2:
-  version "8.3.2"
-  resolved "https://registry.yarnpkg.com/focus-trap-react/-/focus-trap-react-8.3.2.tgz#b319888b57c7d7e63ce9f5c9a3b687df64c03369"
-  integrity sha512-sy4zUjlyC2szBejQ9RVf6WCeA+9fWbxrK6fo+jnrMvfiP5rbuzuK6461V6Q7YsEsHwZolVL3AthlfFfIvZrPwg==
-  dependencies:
-    focus-trap "^6.2.2"
-
-focus-trap@^6.2.2:
-  version "6.2.3"
-  resolved "https://registry.yarnpkg.com/focus-trap/-/focus-trap-6.2.3.tgz#1f1443063f08241020d4ffb269bab9847ada97b7"
-  integrity sha512-87orNbj6UqKEDxmqDfYBDLBbqgxNIA5cXUBvHCt7dZ8/L0KTuzkjKoI0xXHU+5TyI9fImqfOJyvEkXYmZeClZA==
-  dependencies:
-    tabbable "^5.1.4"
-
 forwarded@~0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/forwarded/-/forwarded-0.1.2.tgz#98c23dab1175657b8c0573e8ceccd91b0ff18c84"
@@ -4477,7 +4463,7 @@ swr@0.3.6:
   dependencies:
     dequal "2.0.2"
 
-tabbable@^5.1.4:
+tabbable@^5.1.5:
   version "5.1.5"
   resolved "https://registry.yarnpkg.com/tabbable/-/tabbable-5.1.5.tgz#efec48ede268d511c261e3b81facbb4782a35147"
   integrity sha512-oVAPrWgLLqrbvQE8XqcU7CVBq6SQbaIbHkhOca3u7/jzuQvyZycrUKPCGr04qpEIUslmUlULbSeN+m3QrKEykA==