From 2c93780d6f121c5809c571d641c1f258da21b0eb Mon Sep 17 00:00:00 2001
From: Natalie Pina <34781875+nataliepina@users.noreply.github.com>
Date: Thu, 28 Apr 2022 11:10:23 -0500
Subject: [PATCH] fix: tabindex values with updated versioning (#708)

---
 package-lock.json                             |  42 +++----
 package.json                                  |   2 +-
 .../tests/__snapshots__/Modal.test.tsx.snap   | 118 ------------------
 .../tests/__snapshots__/Popover.test.tsx.snap |  26 ----
 4 files changed, 22 insertions(+), 166 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index d8c8d4705..536dc345d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -25,7 +25,7 @@
         "react-chartist": "0.14.4",
         "react-click-outside": "3.0.1",
         "react-delegate-component": "1.0.0",
-        "react-focus-lock": "2.6.0",
+        "react-focus-lock": "2.8.1",
         "react-id-generator": "3.0.2",
         "react-popper": "2.2.5",
         "react-tabs": "3.2.3",
@@ -17817,9 +17817,9 @@
       }
     },
     "node_modules/focus-lock": {
-      "version": "0.9.2",
-      "resolved": "https://registry.npmjs.org/focus-lock/-/focus-lock-0.9.2.tgz",
-      "integrity": "sha512-YtHxjX7a0IC0ZACL5wsX8QdncXofWpGPNoVMuI/nZUrPGp6LmNI6+D5j0pPj+v8Kw5EpweA+T5yImK0rnWf7oQ==",
+      "version": "0.10.2",
+      "resolved": "https://registry.npmjs.org/focus-lock/-/focus-lock-0.10.2.tgz",
+      "integrity": "sha512-DSaI/UHZ/02sg1P616aIWgToQcrKKBmcCvomDZ1PZvcJFj350PnWhSJxJ76T3e5/GbtQEARIACtbrdlrF9C5kA==",
       "dependencies": {
         "tslib": "^2.0.3"
       },
@@ -17828,9 +17828,9 @@
       }
     },
     "node_modules/focus-lock/node_modules/tslib": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.1.tgz",
-      "integrity": "sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw=="
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
+      "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ=="
     },
     "node_modules/for-in": {
       "version": "1.0.2",
@@ -30447,12 +30447,12 @@
       "integrity": "sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA=="
     },
     "node_modules/react-focus-lock": {
-      "version": "2.6.0",
-      "resolved": "https://registry.npmjs.org/react-focus-lock/-/react-focus-lock-2.6.0.tgz",
-      "integrity": "sha512-2yB5KWyaefbvFDgqvsg/KpIjbqVlhIY2c/dyDcokDLhB3Ib7I4bjsrta5OkI5euUoIu5xBTyBwIQZPykUJAr1g==",
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/react-focus-lock/-/react-focus-lock-2.8.1.tgz",
+      "integrity": "sha512-4kb9I7JIiBm0EJ+CsIBQ+T1t5qtmwPRbFGYFQ0t2q2qIpbFbYTHDjnjJVFB7oMBtXityEOQehblJPjqSIf3Amg==",
       "dependencies": {
         "@babel/runtime": "^7.0.0",
-        "focus-lock": "^0.9.2",
+        "focus-lock": "^0.10.2",
         "prop-types": "^15.6.2",
         "react-clientside-effect": "^1.2.5",
         "use-callback-ref": "^1.2.5",
@@ -50605,17 +50605,17 @@
       }
     },
     "focus-lock": {
-      "version": "0.9.2",
-      "resolved": "https://registry.npmjs.org/focus-lock/-/focus-lock-0.9.2.tgz",
-      "integrity": "sha512-YtHxjX7a0IC0ZACL5wsX8QdncXofWpGPNoVMuI/nZUrPGp6LmNI6+D5j0pPj+v8Kw5EpweA+T5yImK0rnWf7oQ==",
+      "version": "0.10.2",
+      "resolved": "https://registry.npmjs.org/focus-lock/-/focus-lock-0.10.2.tgz",
+      "integrity": "sha512-DSaI/UHZ/02sg1P616aIWgToQcrKKBmcCvomDZ1PZvcJFj350PnWhSJxJ76T3e5/GbtQEARIACtbrdlrF9C5kA==",
       "requires": {
         "tslib": "^2.0.3"
       },
       "dependencies": {
         "tslib": {
-          "version": "2.3.1",
-          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.1.tgz",
-          "integrity": "sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw=="
+          "version": "2.4.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
+          "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ=="
         }
       }
     },
@@ -60129,12 +60129,12 @@
       "integrity": "sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA=="
     },
     "react-focus-lock": {
-      "version": "2.6.0",
-      "resolved": "https://registry.npmjs.org/react-focus-lock/-/react-focus-lock-2.6.0.tgz",
-      "integrity": "sha512-2yB5KWyaefbvFDgqvsg/KpIjbqVlhIY2c/dyDcokDLhB3Ib7I4bjsrta5OkI5euUoIu5xBTyBwIQZPykUJAr1g==",
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/react-focus-lock/-/react-focus-lock-2.8.1.tgz",
+      "integrity": "sha512-4kb9I7JIiBm0EJ+CsIBQ+T1t5qtmwPRbFGYFQ0t2q2qIpbFbYTHDjnjJVFB7oMBtXityEOQehblJPjqSIf3Amg==",
       "requires": {
         "@babel/runtime": "^7.0.0",
-        "focus-lock": "^0.9.2",
+        "focus-lock": "^0.10.2",
         "prop-types": "^15.6.2",
         "react-clientside-effect": "^1.2.5",
         "use-callback-ref": "^1.2.5",
diff --git a/package.json b/package.json
index cc59fe5a9..0d69c02cb 100644
--- a/package.json
+++ b/package.json
@@ -58,7 +58,7 @@
     "react-chartist": "0.14.4",
     "react-click-outside": "3.0.1",
     "react-delegate-component": "1.0.0",
-    "react-focus-lock": "2.6.0",
+    "react-focus-lock": "2.8.1",
     "react-id-generator": "3.0.2",
     "react-popper": "2.2.5",
     "react-tabs": "3.2.3",
diff --git a/packages/modal/tests/__snapshots__/Modal.test.tsx.snap b/packages/modal/tests/__snapshots__/Modal.test.tsx.snap
index e0bb80439..661a4e7b8 100644
--- a/packages/modal/tests/__snapshots__/Modal.test.tsx.snap
+++ b/packages/modal/tests/__snapshots__/Modal.test.tsx.snap
@@ -827,11 +827,6 @@ exports[`Modal DialogModal renders DialogModal 1`] = `
                       style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
                       tabindex="0"
                     />
-                    <div
-                      data-focus-guard="true"
-                      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-                      tabindex="1"
-                    />
                     <div
                       data-focus-lock-disabled="false"
                     >
@@ -874,11 +869,6 @@ exports[`Modal DialogModal renders DialogModal 1`] = `
                       style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
                       tabindex="0"
                     />
-                    <div
-                      data-focus-guard="true"
-                      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-                      tabindex="1"
-                    />
                     <div
                       data-focus-lock-disabled="false"
                     >
@@ -921,11 +911,6 @@ exports[`Modal DialogModal renders DialogModal 1`] = `
                       style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
                       tabindex="0"
                     />
-                    <div
-                      data-focus-guard="true"
-                      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-                      tabindex="1"
-                    />
                     <div
                       data-focus-lock-disabled="false"
                     >
@@ -968,11 +953,6 @@ exports[`Modal DialogModal renders DialogModal 1`] = `
                       style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
                       tabindex="0"
                     />
-                    <div
-                      data-focus-guard="true"
-                      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-                      tabindex="1"
-                    />
                     <div
                       data-focus-lock-disabled="false"
                     >
@@ -1478,11 +1458,6 @@ exports[`Modal DialogModal renders DialogModal 1`] = `
                       style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
                       tabindex="0"
                     />
-                    <div
-                      data-focus-guard="true"
-                      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-                      tabindex="1"
-                    />
                     <div
                       data-focus-lock-disabled="false"
                     >
@@ -1634,22 +1609,6 @@ exports[`Modal DialogModal renders DialogModal 1`] = `
                       }
                       tabIndex={0}
                     />
-                    <div
-                      data-focus-guard={true}
-                      key="guard-nearest"
-                      style={
-                        Object {
-                          "height": "0px",
-                          "left": "1px",
-                          "overflow": "hidden",
-                          "padding": 0,
-                          "position": "fixed",
-                          "top": "1px",
-                          "width": "1px",
-                        }
-                      }
-                      tabIndex={1}
-                    />
                     <SideEffect(FocusWatcher)
                       autoFocus={true}
                       crossFrame={true}
@@ -3734,11 +3693,6 @@ exports[`Modal FullscreenModal renders FullscreenModal 1`] = `
                     style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
                     tabindex="0"
                   />
-                  <div
-                    data-focus-guard="true"
-                    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-                    tabindex="1"
-                  />
                   <div
                     data-focus-lock-disabled="false"
                   >
@@ -3781,11 +3735,6 @@ exports[`Modal FullscreenModal renders FullscreenModal 1`] = `
                     style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
                     tabindex="0"
                   />
-                  <div
-                    data-focus-guard="true"
-                    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-                    tabindex="1"
-                  />
                   <div
                     data-focus-lock-disabled="false"
                   >
@@ -3828,11 +3777,6 @@ exports[`Modal FullscreenModal renders FullscreenModal 1`] = `
                     style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
                     tabindex="0"
                   />
-                  <div
-                    data-focus-guard="true"
-                    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-                    tabindex="1"
-                  />
                   <div
                     data-focus-lock-disabled="false"
                   >
@@ -3875,11 +3819,6 @@ exports[`Modal FullscreenModal renders FullscreenModal 1`] = `
                     style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
                     tabindex="0"
                   />
-                  <div
-                    data-focus-guard="true"
-                    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-                    tabindex="1"
-                  />
                   <div
                     data-focus-lock-disabled="false"
                   >
@@ -4007,11 +3946,6 @@ exports[`Modal FullscreenModal renders FullscreenModal 1`] = `
                     style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
                     tabindex="0"
                   />
-                  <div
-                    data-focus-guard="true"
-                    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-                    tabindex="1"
-                  />
                   <div
                     data-focus-lock-disabled="false"
                   >
@@ -4139,11 +4073,6 @@ exports[`Modal FullscreenModal renders FullscreenModal 1`] = `
                     style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
                     tabindex="0"
                   />
-                  <div
-                    data-focus-guard="true"
-                    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-                    tabindex="1"
-                  />
                   <div
                     data-focus-lock-disabled="false"
                   >
@@ -4591,11 +4520,6 @@ exports[`Modal FullscreenModal renders FullscreenModal 1`] = `
                     style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
                     tabindex="0"
                   />
-                  <div
-                    data-focus-guard="true"
-                    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-                    tabindex="1"
-                  />
                   <div
                     data-focus-lock-disabled="false"
                   >
@@ -4729,22 +4653,6 @@ exports[`Modal FullscreenModal renders FullscreenModal 1`] = `
                     }
                     tabIndex={0}
                   />
-                  <div
-                    data-focus-guard={true}
-                    key="guard-nearest"
-                    style={
-                      Object {
-                        "height": "0px",
-                        "left": "1px",
-                        "overflow": "hidden",
-                        "padding": 0,
-                        "position": "fixed",
-                        "top": "1px",
-                        "width": "1px",
-                      }
-                    }
-                    tabIndex={1}
-                  />
                   <SideEffect(FocusWatcher)
                     autoFocus={true}
                     crossFrame={true}
@@ -6087,11 +5995,6 @@ exports[`Modal ModalBase renders ModalBase 1`] = `
                   style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
                   tabindex="0"
                 />
-                <div
-                  data-focus-guard="true"
-                  style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-                  tabindex="1"
-                />
                 <div
                   data-focus-lock-disabled="false"
                 >
@@ -6241,11 +6144,6 @@ exports[`Modal ModalBase renders ModalBase 1`] = `
                   style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
                   tabindex="0"
                 />
-                <div
-                  data-focus-guard="true"
-                  style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-                  tabindex="1"
-                />
                 <div
                   data-focus-lock-disabled="false"
                 >
@@ -6312,22 +6210,6 @@ exports[`Modal ModalBase renders ModalBase 1`] = `
                   }
                   tabIndex={0}
                 />
-                <div
-                  data-focus-guard={true}
-                  key="guard-nearest"
-                  style={
-                    Object {
-                      "height": "0px",
-                      "left": "1px",
-                      "overflow": "hidden",
-                      "padding": 0,
-                      "position": "fixed",
-                      "top": "1px",
-                      "width": "1px",
-                    }
-                  }
-                  tabIndex={1}
-                />
                 <SideEffect(FocusWatcher)
                   autoFocus={true}
                   crossFrame={true}
diff --git a/packages/popover/tests/__snapshots__/Popover.test.tsx.snap b/packages/popover/tests/__snapshots__/Popover.test.tsx.snap
index 79eb70ead..2d0210e1e 100644
--- a/packages/popover/tests/__snapshots__/Popover.test.tsx.snap
+++ b/packages/popover/tests/__snapshots__/Popover.test.tsx.snap
@@ -497,11 +497,6 @@ exports[`Popover renders an open dropdown 1`] = `
                           style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
                           tabindex="0"
                         />
-                        <div
-                          data-focus-guard="true"
-                          style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-                          tabindex="1"
-                        />
                         <div
                           data-focus-lock-disabled="false"
                         >
@@ -607,11 +602,6 @@ exports[`Popover renders an open dropdown 1`] = `
                           style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
                           tabindex="0"
                         />
-                        <div
-                          data-focus-guard="true"
-                          style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-                          tabindex="1"
-                        />
                         <div
                           data-focus-lock-disabled="false"
                         >
@@ -701,22 +691,6 @@ exports[`Popover renders an open dropdown 1`] = `
                             }
                             tabIndex={0}
                           />
-                          <div
-                            data-focus-guard={true}
-                            key="guard-nearest"
-                            style={
-                              Object {
-                                "height": "0px",
-                                "left": "1px",
-                                "overflow": "hidden",
-                                "padding": 0,
-                                "position": "fixed",
-                                "top": "1px",
-                                "width": "1px",
-                              }
-                            }
-                            tabIndex={1}
-                          />
                           <SideEffect(FocusWatcher)
                             autoFocus={true}
                             crossFrame={true}