opensource/coder
3
0
Fork 0
mirror of https://github.com/coder/coder.git synced 2026-09-24 15:04:27 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(site): convert div role="button" to native button in ai-elements tools (#22631)

Browse Source
This commit is contained in:
Danielle Maywood
2026-03-05 09:58:37 +00:00
committed by GitHub
parent 9c91f472b9
commit 024d07350a
4 changed files with 18 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/src/components/ai-elements/tool/ExecuteTool.tsx
+4 -10
View File
@@ -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>
)}
</>
)}
site/src/components/ai-elements/tool/ProcessOutputTool.tsx
+4 -10
View File
@@ -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>
)}
</>
) : (
site/src/components/ai-elements/tool/SubagentTool.tsx
+5 -10
View File
@@ -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
site/src/components/ai-elements/tool/ToolCollapsible.tsx
+5 -11
View File
@@ -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}