From e19d92ea985f082bc189245ad62549193c9cdce0 Mon Sep 17 00:00:00 2001
From: Rico Kahler <ricokahler@me.com>
Date: Fri, 19 Jun 2020 15:34:16 -0400
Subject: [PATCH] try focus-trap-react instead ally.js

---
 packages/react-dev-overlay/package.json       |  2 +-
 .../internal/components/Overlay/Overlay.tsx   | 41 +++++++------------
 yarn.lock                                     | 35 +++++++++-------
 3 files changed, 35 insertions(+), 43 deletions(-)

diff --git a/packages/react-dev-overlay/package.json b/packages/react-dev-overlay/package.json
index 2860694757dc4..259ea2922862b 100644
--- a/packages/react-dev-overlay/package.json
+++ b/packages/react-dev-overlay/package.json
@@ -17,7 +17,7 @@
   },
   "dependencies": {
     "@babel/code-frame": "7.8.3",
-    "ally.js": "1.4.1",
+    "focus-trap-react": "6.0.0",
     "anser": "1.4.9",
     "chalk": "4.0.0",
     "classnames": "2.2.6",
diff --git a/packages/react-dev-overlay/src/internal/components/Overlay/Overlay.tsx b/packages/react-dev-overlay/src/internal/components/Overlay/Overlay.tsx
index 0c6c4db5d3fa1..c46bd6d20706a 100644
--- a/packages/react-dev-overlay/src/internal/components/Overlay/Overlay.tsx
+++ b/packages/react-dev-overlay/src/internal/components/Overlay/Overlay.tsx
@@ -1,6 +1,5 @@
-import allyDisable from 'ally.js/maintain/disabled'
-import allyTrap from 'ally.js/maintain/tab-focus'
 import * as React from 'react'
+import FocusTrap from 'focus-trap-react'
 import { lock, unlock } from './body-locker'
 
 export type OverlayProps = { className?: string; fixed?: boolean }
@@ -17,32 +16,20 @@ const Overlay: React.FC<OverlayProps> = function Overlay({
     }
   }, [])
 
-  const [overlay, setOverlay] = React.useState<HTMLElement | null>(null)
-  const onOverlay = React.useCallback((el: HTMLElement) => {
-    setOverlay(el)
-  }, [])
-
-  React.useEffect(() => {
-    if (overlay == null) {
-      return
-    }
-
-    const handle1 = allyDisable({ filter: overlay })
-    const handle2 = allyTrap({ context: overlay })
-    return () => {
-      handle1.disengage()
-      handle2.disengage()
-    }
-  }, [overlay])
-
   return (
-    <div data-nextjs-dialog-overlay className={className} ref={onOverlay}>
-      <div
-        data-nextjs-dialog-backdrop
-        data-nextjs-dialog-backdrop-fixed={fixed ? true : undefined}
-      />
-      {children}
-    </div>
+    <FocusTrap>
+      <div data-nextjs-dialog-overlay className={className}>
+        <div
+          // focus-trap-react requires at least one tabbable element
+          // (determined by tabbable js)
+          // This guarantees one element will be focusable.
+          tabIndex={0}
+          data-nextjs-dialog-backdrop
+          data-nextjs-dialog-backdrop-fixed={fixed ? true : undefined}
+        />
+        {children}
+      </div>
+    </FocusTrap>
   )
 }
 
diff --git a/yarn.lock b/yarn.lock
index 25ee3bc1b442a..2775fd8092597 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3394,13 +3394,6 @@ ajv@^6.1.0, ajv@^6.10.0, ajv@^6.10.2, ajv@^6.12.0, ajv@^6.5.5:
     json-schema-traverse "^0.4.1"
     uri-js "^4.2.2"
 
-ally.js@1.4.1:
-  version "1.4.1"
-  resolved "https://registry.yarnpkg.com/ally.js/-/ally.js-1.4.1.tgz#9fb7e6ba58efac4ee9131cb29aa9ee3b540bcf1e"
-  dependencies:
-    css.escape "^1.5.0"
-    platform "1.3.3"
-
 alphanum-sort@^1.0.0, alphanum-sort@^1.0.1, alphanum-sort@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/alphanum-sort/-/alphanum-sort-1.0.2.tgz#97a1119649b211ad33691d9f9f486a8ec9fbe0a3"
@@ -5513,10 +5506,6 @@ css-what@^3.2.1:
   version "3.2.1"
   resolved "https://registry.yarnpkg.com/css-what/-/css-what-3.2.1.tgz#f4a8f12421064621b456755e34a03a2c22df5da1"
 
-css.escape@^1.5.0:
-  version "1.5.1"
-  resolved "https://registry.yarnpkg.com/css.escape/-/css.escape-1.5.1.tgz#42e27d4fa04ae32f931a4b4d4191fa9cddee97cb"
-
 css@^2.0.0:
   version "2.2.4"
   resolved "https://registry.yarnpkg.com/css/-/css-2.2.4.tgz#c646755c73971f2bba6a601e2cf2fd71b1298929"
@@ -7083,6 +7072,21 @@ fn-annotate@^1.1.3:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/fn-annotate/-/fn-annotate-1.2.0.tgz#28da000117dea61842fe61f353f41cf4c93a7a7e"
 
+focus-trap-react@6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/focus-trap-react/-/focus-trap-react-6.0.0.tgz#3f5a9f68447dd374d22388fb4c50018be83e74a5"
+  integrity sha512-mvEYxmP75PMx0vOqoIAmJHO/qUEvdTAdz6gLlEZyxxODnuKQdnKea2RWTYxghAPrV+ibiIq2o/GTSgQycnAjcw==
+  dependencies:
+    focus-trap "^4.0.2"
+
+focus-trap@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/focus-trap/-/focus-trap-4.0.2.tgz#4ee2b96547c9ea0e4252a2d4b2cca68944194663"
+  integrity sha512-HtLjfAK7Hp2qbBtLS6wEznID1mPT+48ZnP2nkHzgjpL4kroYHg0CdqJ5cTXk+UO5znAxF5fRUkhdyfgrhh8Lzw==
+  dependencies:
+    tabbable "^3.1.2"
+    xtend "^4.0.1"
+
 follow-redirects@^1.0.0:
   version "1.9.0"
   resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.9.0.tgz#8d5bcdc65b7108fe1508649c79c12d732dcedb4f"
@@ -11784,10 +11788,6 @@ pkg-up@^3.0.1:
   dependencies:
     find-up "^3.0.0"
 
-platform@1.3.3:
-  version "1.3.3"
-  resolved "https://registry.yarnpkg.com/platform/-/platform-1.3.3.tgz#646c77011899870b6a0903e75e997e8e51da7461"
-
 please-upgrade-node@^3.2.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/please-upgrade-node/-/please-upgrade-node-3.2.0.tgz#aeddd3f994c933e4ad98b99d9a556efa0e2fe942"
@@ -14992,6 +14992,11 @@ symbol-tree@^3.2.2, symbol-tree@^3.2.4:
   version "3.2.4"
   resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.4.tgz#430637d248ba77e078883951fb9aa0eed7c63fa2"
 
+tabbable@^3.1.2:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/tabbable/-/tabbable-3.1.2.tgz#f2d16cccd01f400e38635c7181adfe0ad965a4a2"
+  integrity sha512-wjB6puVXTYO0BSFtCmWQubA/KIn7Xvajw0x0l6eJUudMG/EAiJvIUnyNX6xO4NpGrJ16lbD0eUseB9WxW0vlpQ==
+
 table@^5.2.3:
   version "5.4.6"
   resolved "https://registry.yarnpkg.com/table/-/table-5.4.6.tgz#1292d19500ce3f86053b05f0e8e7e4a3bb21079e"