diff --git a/app/client/package.json b/app/client/package.json
index ee7eb2656f..fcbf51b9e7 100644
--- a/app/client/package.json
+++ b/app/client/package.json
@@ -310,6 +310,7 @@
     }
   },
   "resolutions": {
-    "react-error-overlay": "6.0.9"
+    "react-error-overlay": "6.0.9",
+    "focus-trap-react/**/tabbable": "5.2.1"
   }
 }
diff --git a/app/client/src/components/ads/ColorPickerComponentV2.test.tsx b/app/client/src/components/ads/ColorPickerComponentV2.test.tsx
index 1dda3e233c..341aad99dd 100644
--- a/app/client/src/components/ads/ColorPickerComponentV2.test.tsx
+++ b/app/client/src/components/ads/ColorPickerComponentV2.test.tsx
@@ -78,131 +78,131 @@ describe("<ColorPicker /> - Keyboard Navigation", () => {
     await waitForElementToBeRemoved(screen.queryByTestId("color-picker"));
   });
 
-  // it("Pressing {Tab} should shift sections in the colorpicker", async () => {
-  //   render(getTestComponent());
-  //   userEvent.tab();
-  //   userEvent.keyboard("{Enter}");
+  it("Pressing {Tab} should shift sections in the colorpicker", async () => {
+    render(getTestComponent());
+    userEvent.tab();
+    userEvent.keyboard("{Enter}");
 
-  //   userEvent.tab();
-  //   expect(
-  //     document.querySelectorAll("[tabindex='0'].t--colorpicker-v2-color")[0],
-  //   ).toHaveFocus();
+    userEvent.tab();
+    expect(
+      document.querySelectorAll("[tabindex='0'].t--colorpicker-v2-color")[0],
+    ).toHaveFocus();
 
-  //   userEvent.tab();
-  //   expect(
-  //     document.querySelectorAll("[tabindex='0'].t--colorpicker-v2-color")[1],
-  //   ).toHaveFocus();
+    userEvent.tab();
+    expect(
+      document.querySelectorAll("[tabindex='0'].t--colorpicker-v2-color")[1],
+    ).toHaveFocus();
 
-  //   // Back to first color
-  //   userEvent.tab();
-  //   expect(
-  //     document.querySelectorAll("[tabindex='0'].t--colorpicker-v2-color")[0],
-  //   ).toHaveFocus();
-  // });
+    // Back to first color
+    userEvent.tab();
+    expect(
+      document.querySelectorAll("[tabindex='0'].t--colorpicker-v2-color")[0],
+    ).toHaveFocus();
+  });
 
-  // it("Pressing {ArrowRight} should shift focus to color to the right", () => {
-  //   render(getTestComponent());
-  //   userEvent.tab();
-  //   userEvent.keyboard("{Enter}");
+  it("Pressing {ArrowRight} should shift focus to color to the right", () => {
+    render(getTestComponent());
+    userEvent.tab();
+    userEvent.keyboard("{Enter}");
 
-  //   userEvent.tab();
-  //   userEvent.tab();
+    userEvent.tab();
+    userEvent.tab();
 
-  //   expect(
-  //     document.querySelectorAll("[tabindex='0'].t--colorpicker-v2-color")[1],
-  //   ).toHaveFocus();
+    expect(
+      document.querySelectorAll("[tabindex='0'].t--colorpicker-v2-color")[1],
+    ).toHaveFocus();
 
-  //   userEvent.keyboard("{ArrowRight}");
+    userEvent.keyboard("{ArrowRight}");
 
-  //   expect(
-  //     document.querySelectorAll("[tabindex='0'].t--colorpicker-v2-color")[1]
-  //       .parentElement?.childNodes[1],
-  //   ).toHaveFocus();
-  // });
+    expect(
+      document.querySelectorAll("[tabindex='0'].t--colorpicker-v2-color")[1]
+        .parentElement?.childNodes[1],
+    ).toHaveFocus();
+  });
 
-  // it("Pressing {ArrowLeft} should shift focus to color to the left", () => {
-  //   render(getTestComponent());
-  //   userEvent.tab();
-  //   userEvent.keyboard("{Enter}");
+  it("Pressing {ArrowLeft} should shift focus to color to the left", () => {
+    render(getTestComponent());
+    userEvent.tab();
+    userEvent.keyboard("{Enter}");
 
-  //   userEvent.tab();
-  //   userEvent.tab();
+    userEvent.tab();
+    userEvent.tab();
 
-  //   expect(
-  //     document.querySelectorAll("[tabindex='0'].t--colorpicker-v2-color")[1],
-  //   ).toHaveFocus();
+    expect(
+      document.querySelectorAll("[tabindex='0'].t--colorpicker-v2-color")[1],
+    ).toHaveFocus();
 
-  //   userEvent.keyboard("{ArrowRight}");
-  //   userEvent.keyboard("{ArrowRight}");
+    userEvent.keyboard("{ArrowRight}");
+    userEvent.keyboard("{ArrowRight}");
 
-  //   expect(
-  //     document.querySelectorAll("[tabindex='0'].t--colorpicker-v2-color")[1]
-  //       .parentElement?.childNodes[2],
-  //   ).toHaveFocus();
+    expect(
+      document.querySelectorAll("[tabindex='0'].t--colorpicker-v2-color")[1]
+        .parentElement?.childNodes[2],
+    ).toHaveFocus();
 
-  //   userEvent.keyboard("{ArrowLeft}");
-  //   expect(
-  //     document.querySelectorAll("[tabindex='0'].t--colorpicker-v2-color")[1]
-  //       .parentElement?.childNodes[1],
-  //   ).toHaveFocus();
-  // });
+    userEvent.keyboard("{ArrowLeft}");
+    expect(
+      document.querySelectorAll("[tabindex='0'].t--colorpicker-v2-color")[1]
+        .parentElement?.childNodes[1],
+    ).toHaveFocus();
+  });
 
-  // it("Pressing {ArrowDown} should shift focus to color to the bottom", () => {
-  //   render(getTestComponent());
-  //   userEvent.tab();
-  //   userEvent.keyboard("{Enter}");
+  it("Pressing {ArrowDown} should shift focus to color to the bottom", () => {
+    render(getTestComponent());
+    userEvent.tab();
+    userEvent.keyboard("{Enter}");
 
-  //   userEvent.tab();
-  //   userEvent.tab();
+    userEvent.tab();
+    userEvent.tab();
 
-  //   expect(
-  //     document.querySelectorAll("[tabindex='0'].t--colorpicker-v2-color")[1],
-  //   ).toHaveFocus();
+    expect(
+      document.querySelectorAll("[tabindex='0'].t--colorpicker-v2-color")[1],
+    ).toHaveFocus();
 
-  //   userEvent.keyboard("{ArrowDown}");
-  //   expect(
-  //     document.querySelectorAll("[tabindex='0'].t--colorpicker-v2-color")[1]
-  //       .parentElement?.childNodes[10],
-  //   ).toHaveFocus();
-  // });
+    userEvent.keyboard("{ArrowDown}");
+    expect(
+      document.querySelectorAll("[tabindex='0'].t--colorpicker-v2-color")[1]
+        .parentElement?.childNodes[10],
+    ).toHaveFocus();
+  });
 
-  // it("Pressing {ArrowUp} should shift focus to color to the top", () => {
-  //   render(getTestComponent());
-  //   userEvent.tab();
-  //   userEvent.keyboard("{Enter}");
+  it("Pressing {ArrowUp} should shift focus to color to the top", () => {
+    render(getTestComponent());
+    userEvent.tab();
+    userEvent.keyboard("{Enter}");
 
-  //   userEvent.tab();
-  //   userEvent.tab();
+    userEvent.tab();
+    userEvent.tab();
 
-  //   expect(
-  //     document.querySelectorAll("[tabindex='0'].t--colorpicker-v2-color")[1],
-  //   ).toHaveFocus();
+    expect(
+      document.querySelectorAll("[tabindex='0'].t--colorpicker-v2-color")[1],
+    ).toHaveFocus();
 
-  //   userEvent.keyboard("{ArrowRight}");
-  //   userEvent.keyboard("{ArrowDown}");
-  //   userEvent.keyboard("{ArrowDown}");
-  //   expect(
-  //     document.querySelectorAll("[tabindex='0'].t--colorpicker-v2-color")[1]
-  //       .parentElement?.childNodes[21],
-  //   ).toHaveFocus();
+    userEvent.keyboard("{ArrowRight}");
+    userEvent.keyboard("{ArrowDown}");
+    userEvent.keyboard("{ArrowDown}");
+    expect(
+      document.querySelectorAll("[tabindex='0'].t--colorpicker-v2-color")[1]
+        .parentElement?.childNodes[21],
+    ).toHaveFocus();
 
-  //   userEvent.keyboard("{ArrowUp}");
-  //   expect(
-  //     document.querySelectorAll("[tabindex='0'].t--colorpicker-v2-color")[1]
-  //       .parentElement?.childNodes[11],
-  //   ).toHaveFocus();
-  // });
+    userEvent.keyboard("{ArrowUp}");
+    expect(
+      document.querySelectorAll("[tabindex='0'].t--colorpicker-v2-color")[1]
+        .parentElement?.childNodes[11],
+    ).toHaveFocus();
+  });
 
-  // it("Pressing {Enter} should select the color in focus", async () => {
-  //   const onColorChange = jest.fn();
-  //   render(getTestComponent(onColorChange));
-  //   userEvent.tab();
-  //   userEvent.keyboard("{Enter}");
-  //   userEvent.tab();
-  //   userEvent.tab();
-  //   userEvent.keyboard("{ArrowRight}");
-  //   userEvent.keyboard("{Enter}");
-  //   expect(onColorChange).toBeCalled();
-  //   await waitForElementToBeRemoved(screen.queryByTestId("color-picker"));
-  // });
+  it("Pressing {Enter} should select the color in focus", async () => {
+    const onColorChange = jest.fn();
+    render(getTestComponent(onColorChange));
+    userEvent.tab();
+    userEvent.keyboard("{Enter}");
+    userEvent.tab();
+    userEvent.tab();
+    userEvent.keyboard("{ArrowRight}");
+    userEvent.keyboard("{Enter}");
+    expect(onColorChange).toBeCalled();
+    await waitForElementToBeRemoved(screen.queryByTestId("color-picker"));
+  });
 });
diff --git a/app/client/yarn.lock b/app/client/yarn.lock
index 49c308750f..a8438e1b73 100644
--- a/app/client/yarn.lock
+++ b/app/client/yarn.lock
@@ -16472,10 +16472,10 @@ symbol-tree@^3.2.4:
   version "3.2.4"
   resolved "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz"
 
-tabbable@^5.3.1:
-  version "5.3.1"
-  resolved "https://registry.yarnpkg.com/tabbable/-/tabbable-5.3.1.tgz#059f2a19b829efce2a0ec05785a47dd3bcd0a25b"
-  integrity sha512-NtO7I7eoAHR+JwwcNsi/PipamtAEebYDnur/k9wM6n238HHy/+1O4+7Zx7e/JaDAbKJPlIFYsfsV/6tPqTOQvg==
+tabbable@5.2.1, tabbable@^5.3.1:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/tabbable/-/tabbable-5.2.1.tgz#e3fda7367ddbb172dcda9f871c0fdb36d1c4cd9c"
+  integrity sha512-40pEZ2mhjaZzK0BnI+QGNjJO8UYx9pP5v7BGe17SORTO0OEuuaAwQTkAp8whcZvqon44wKFOikD+Al11K3JICQ==
 
 table@^5.2.3:
   version "5.4.6"