From 0324d27f13bdb5979e9d68ce25e3ea587c4632e0 Mon Sep 17 00:00:00 2001
From: LukeGus <bugattiguy527@gmail.com>
Date: Thu, 8 Oct 2026 15:28:11 -0500
Subject: [PATCH] fix: folder rows no longer nest action buttons inside a
 button

---
 src/ui/sidebar/tree/FolderItem/FolderItem.tsx | 15 +++-
 .../tree/FolderItem/FolderItem.test.tsx       | 73 +++++++++++++++++++
 2 files changed, 86 insertions(+), 2 deletions(-)
 create mode 100644 src/ui/tests/sidebar/tree/FolderItem/FolderItem.test.tsx

diff --git a/src/ui/sidebar/tree/FolderItem/FolderItem.tsx b/src/ui/sidebar/tree/FolderItem/FolderItem.tsx
index 6ebad7dd4..5e7bfe3eb 100644
--- a/src/ui/sidebar/tree/FolderItem/FolderItem.tsx
+++ b/src/ui/sidebar/tree/FolderItem/FolderItem.tsx
@@ -168,7 +168,18 @@ export function FolderItem({
       style={depth > 0 ? { paddingLeft: rem(depth * 12) } : undefined}
     >
       <div className="relative">
-        <button
+        {/* A div, not a button: the folder actions inside are buttons. */}
+        <div
+          role="button"
+          tabIndex={0}
+          aria-expanded={isOpen}
+          onKeyDown={(e) => {
+            if (e.target !== e.currentTarget) return;
+            if (e.key === "Enter" || e.key === " ") {
+              e.preventDefault();
+              if (!query) onToggleFolder(folderPath);
+            }
+          }}
           draggable={canDragFolder}
           onDragStart={(e) => {
             if (!canDragFolder) return;
@@ -294,7 +305,7 @@ export function FolderItem({
               )}
             </>
           }
-        </button>
+        </div>
       </div>
       {!flat && isOpen && (
         <div className="border-l border-border/50 ml-[27px]">
diff --git a/src/ui/tests/sidebar/tree/FolderItem/FolderItem.test.tsx b/src/ui/tests/sidebar/tree/FolderItem/FolderItem.test.tsx
new file mode 100644
index 000000000..ada1e93a2
--- /dev/null
+++ b/src/ui/tests/sidebar/tree/FolderItem/FolderItem.test.tsx
@@ -0,0 +1,73 @@
+import { fireEvent, render } from "@testing-library/react";
+import { expect, it, vi } from "vitest";
+import type { HostFolder } from "@/types/ui-types";
+import { FolderItem } from "@/sidebar/tree/FolderItem/FolderItem";
+
+vi.mock("@/lib/ServerStatusContext", () => ({
+  useServerStatus: () => ({ getStatus: () => "online" }),
+}));
+vi.mock("@/sidebar/tree/HostItem/HostItem", () => ({
+  HostItem: () => null,
+  statusCheckEnabled: () => true,
+}));
+
+const folder = {
+  name: "Production",
+  path: "Production",
+  children: [],
+} as unknown as HostFolder;
+
+function renderFolder(onToggleFolder = vi.fn()) {
+  const noop = vi.fn();
+  render(
+    <FolderItem
+      folder={folder}
+      flat
+      onOpenTab={noop}
+      onDeleteHost={noop}
+      onDuplicateHost={noop}
+      openFolders={new Set()}
+      onToggleFolder={onToggleFolder}
+      selectionMode={false}
+      selectedHostIds={new Set()}
+      onToggleSelect={noop}
+      onToggleSelectFolder={noop}
+      openMenuHostId={null}
+      onMenuOpenChange={noop}
+      openTrayHostId={null}
+      onTrayOpenChange={noop}
+      onManageFolder={noop}
+      onDeleteFolder={noop}
+      onOpenAllSessions={noop}
+      onMoveHostsToFolder={noop}
+      draggedHostIds={null}
+      onDragHostStart={noop}
+      onDragEnd={noop}
+    />,
+  );
+  return onToggleFolder;
+}
+
+it("never nests the folder actions inside a button element", () => {
+  renderFolder();
+  for (const button of document.querySelectorAll("button")) {
+    expect(button.parentElement?.closest("button")).toBeNull();
+  }
+});
+
+it("toggles the folder by click, Enter and Space", () => {
+  const onToggle = renderFolder();
+  const header = document.querySelector('[role="button"][aria-expanded]')!;
+  fireEvent.click(header);
+  fireEvent.keyDown(header, { key: "Enter" });
+  fireEvent.keyDown(header, { key: " " });
+  expect(onToggle).toHaveBeenCalledTimes(3);
+  expect(onToggle).toHaveBeenCalledWith("Production");
+});
+
+it("ignores keys pressed on a folder action", () => {
+  const onToggle = renderFolder();
+  const action = document.querySelector("button")!;
+  fireEvent.keyDown(action, { key: "Enter" });
+  expect(onToggle).not.toHaveBeenCalled();
+});