From 024d07350ab731eff1634e4d6b61ea392f19cf40 Mon Sep 17 00:00:00 2001
From: Danielle Maywood <danielle@themaywoods.com>
Date: Thu, 5 Mar 2026 09:58:37 +0000
Subject: [PATCH] fix(site): convert div role="button" to native button in
 ai-elements tools (#22631)

---
 .../components/ai-elements/tool/ExecuteTool.tsx  | 14 ++++----------
 .../ai-elements/tool/ProcessOutputTool.tsx       | 14 ++++----------
 .../components/ai-elements/tool/SubagentTool.tsx | 15 +++++----------
 .../ai-elements/tool/ToolCollapsible.tsx         | 16 +++++-----------
 4 files changed, 18 insertions(+), 41 deletions(-)

diff --git a/site/src/components/ai-elements/tool/ExecuteTool.tsx b/site/src/components/ai-elements/tool/ExecuteTool.tsx
index 2ac2478524..7810654cea 100644
--- a/site/src/components/ai-elements/tool/ExecuteTool.tsx
+++ b/site/src/components/ai-elements/tool/ExecuteTool.tsx
@@ -92,17 +92,11 @@ export const ExecuteTool: React.FC<{
 
 					{/* Expand / collapse toggle at the bottom */}
 					{overflows && (
-						<div
-							role="button"
-							tabIndex={0}
+						<button
+							type="button"
 							aria-expanded={expanded}
 							onClick={() => setExpanded((v) => !v)}
-							onKeyDown={(e) => {
-								if (e.key === "Enter" || e.key === " ") {
-									setExpanded((v) => !v);
-								}
-							}}
-							className="flex w-full cursor-pointer items-center justify-center py-0.5 text-content-secondary transition-colors hover:bg-surface-secondary hover:text-content-primary"
+							className="border-0 bg-transparent m-0 font-[inherit] text-[inherit] flex w-full cursor-pointer items-center justify-center py-0.5 text-content-secondary transition-colors hover:bg-surface-secondary hover:text-content-primary"
 							aria-label={expanded ? "Collapse output" : "Expand output"}
 						>
 							<ChevronDownIcon
@@ -111,7 +105,7 @@ export const ExecuteTool: React.FC<{
 									expanded && "rotate-180",
 								)}
 							/>
-						</div>
+						</button>
 					)}
 				</>
 			)}
diff --git a/site/src/components/ai-elements/tool/ProcessOutputTool.tsx b/site/src/components/ai-elements/tool/ProcessOutputTool.tsx
index 46cbcc4888..aea6deb470 100644
--- a/site/src/components/ai-elements/tool/ProcessOutputTool.tsx
+++ b/site/src/components/ai-elements/tool/ProcessOutputTool.tsx
@@ -73,17 +73,11 @@ export const ProcessOutputTool: React.FC<{
 
 					{/* Expand / collapse toggle at the bottom */}
 					{overflows && (
-						<div
-							role="button"
-							tabIndex={0}
+						<button
+							type="button"
 							aria-expanded={expanded}
 							onClick={() => setExpanded((v) => !v)}
-							onKeyDown={(e) => {
-								if (e.key === "Enter" || e.key === " ") {
-									setExpanded((v) => !v);
-								}
-							}}
-							className="flex w-full cursor-pointer items-center justify-center py-0.5 text-content-secondary transition-colors hover:bg-surface-secondary hover:text-content-primary"
+							className="border-0 bg-transparent m-0 font-[inherit] text-[inherit] flex w-full cursor-pointer items-center justify-center py-0.5 text-content-secondary transition-colors hover:bg-surface-secondary hover:text-content-primary"
 							aria-label={expanded ? "Collapse output" : "Expand output"}
 						>
 							<ChevronDownIcon
@@ -92,7 +86,7 @@ export const ProcessOutputTool: React.FC<{
 									expanded && "rotate-180",
 								)}
 							/>
-						</div>
+						</button>
 					)}
 				</>
 			) : (
diff --git a/site/src/components/ai-elements/tool/SubagentTool.tsx b/site/src/components/ai-elements/tool/SubagentTool.tsx
index d9ae0d3c92..a26eb9bcc7 100644
--- a/site/src/components/ai-elements/tool/SubagentTool.tsx
+++ b/site/src/components/ai-elements/tool/SubagentTool.tsx
@@ -93,18 +93,13 @@ export const SubagentTool: React.FC<{
 
 	return (
 		<div className="w-full">
-			<div
-				role="button"
-				tabIndex={0}
+			<button
+				type="button"
 				aria-expanded={expanded}
 				onClick={() => hasExpandableContent && setExpanded((v) => !v)}
-				onKeyDown={(e) => {
-					if ((e.key === "Enter" || e.key === " ") && hasExpandableContent) {
-						setExpanded((v) => !v);
-					}
-				}}
 				className={cn(
-					"flex items-center gap-2",
+					"border-0 bg-transparent p-0 m-0 font-[inherit] text-[inherit] text-left",
+					"flex w-full items-center gap-2",
 					hasExpandableContent && "cursor-pointer",
 				)}
 			>
@@ -142,7 +137,7 @@ export const SubagentTool: React.FC<{
 						)}
 					/>
 				)}
-			</div>
+			</button>
 
 			{expanded && hasPrompt && (
 				<ScrollArea
diff --git a/site/src/components/ai-elements/tool/ToolCollapsible.tsx b/site/src/components/ai-elements/tool/ToolCollapsible.tsx
index b10ef634b7..3186a9bdf0 100644
--- a/site/src/components/ai-elements/tool/ToolCollapsible.tsx
+++ b/site/src/components/ai-elements/tool/ToolCollapsible.tsx
@@ -24,19 +24,13 @@ export const ToolCollapsible: FC<ToolCollapsibleProps> = ({
 	return (
 		<div className={className}>
 			{hasContent ? (
-				<div
-					role="button"
-					tabIndex={0}
+				<button
+					type="button"
 					aria-expanded={expanded}
 					onClick={() => setExpanded(!expanded)}
-					onKeyDown={(e) => {
-						if (e.key === "Enter" || e.key === " ") {
-							e.preventDefault();
-							setExpanded(!expanded);
-						}
-					}}
 					className={cn(
-						"flex items-center gap-2 cursor-pointer",
+						"border-0 bg-transparent p-0 m-0 font-[inherit] text-[inherit] text-left",
+						"flex w-full items-center gap-2 cursor-pointer",
 						headerClassName,
 					)}
 				>
@@ -47,7 +41,7 @@ export const ToolCollapsible: FC<ToolCollapsibleProps> = ({
 							expanded ? "rotate-0" : "-rotate-90",
 						)}
 					/>
-				</div>
+				</button>
 			) : (
 				<div className={cn("flex items-center gap-2", headerClassName)}>
 					{header}