From d3031380a382de059490623160d27e579db82a34 Mon Sep 17 00:00:00 2001
From: Merge Resolver <merge-resolver@roo-code.com>
Date: Thu, 21 Aug 2025 17:08:26 -0600
Subject: [PATCH] fix(webview-ui): accessible DisclosureHeader and refactor
 error/diff_error headers (aria, keyboard, chevron consistency)

---
 webview-ui/src/components/chat/ChatRow.tsx    | 147 +++++-------------
 .../src/components/chat/DisclosureHeader.tsx  |  73 +++++++++
 2 files changed, 115 insertions(+), 105 deletions(-)
 create mode 100644 webview-ui/src/components/chat/DisclosureHeader.tsx

diff --git a/webview-ui/src/components/chat/ChatRow.tsx b/webview-ui/src/components/chat/ChatRow.tsx
index 919530749c..32b61be08d 100644
--- a/webview-ui/src/components/chat/ChatRow.tsx
+++ b/webview-ui/src/components/chat/ChatRow.tsx
@@ -33,7 +33,8 @@ import MarkdownBlock from "../common/MarkdownBlock"
 import { ReasoningBlock } from "./ReasoningBlock"
 import Thumbnails from "../common/Thumbnails"
 import McpResourceRow from "../mcp/McpResourceRow"
-import { IconButton } from "./IconButton"
+
+import { DisclosureHeader } from "./DisclosureHeader"
 
 import { Mention } from "./Mention"
 import { CheckpointSaved } from "./checkpoints/CheckpointSaved"
@@ -864,60 +865,29 @@ export const ChatRowContent = ({
 									overflow: "hidden",
 									marginBottom: "8px",
 								}}>
-								<div
-									style={{
-										borderBottom: isDiffErrorExpanded
-											? "1px solid var(--vscode-editorGroup-border)"
-											: "none",
-										fontWeight: "normal",
-										fontSize: "var(--vscode-font-size)",
-										color: "var(--vscode-editor-foreground)",
-										display: "flex",
-										alignItems: "center",
-										justifyContent: "space-between",
-										cursor: "pointer",
+								<DisclosureHeader
+									contentId={`diff-error-${message.ts}`}
+									iconClass="codicon-warning"
+									iconStyle={{ color: "var(--vscode-editorWarning-foreground)", opacity: 0.8 }}
+									title={<span style={{ fontWeight: "bold" }}>{t("chat:diffError.title")}</span>}
+									expanded={isDiffErrorExpanded}
+									onToggle={() => setIsDiffErrorExpanded(!isDiffErrorExpanded)}
+									onCopy={() => {
+										copyWithFeedback(message.text || "").then((success) => {
+											if (success) {
+												setShowCopySuccess(true)
+												setTimeout(() => {
+													setShowCopySuccess(false)
+												}, 1000)
+											}
+										})
 									}}
-									onClick={() => setIsDiffErrorExpanded(!isDiffErrorExpanded)}>
-									<div
-										style={{
-											display: "flex",
-											alignItems: "center",
-											gap: "10px",
-											flexGrow: 1,
-										}}>
-										<span
-											className="codicon codicon-warning"
-											style={{
-												color: "var(--vscode-editorWarning-foreground)",
-												opacity: 0.8,
-												fontSize: 16,
-												marginBottom: "-1.5px",
-											}}></span>
-										<span style={{ fontWeight: "bold" }}>{t("chat:diffError.title")}</span>
-									</div>
-									<div style={{ display: "flex", alignItems: "center" }}>
-										<IconButton
-											iconClass={showCopySuccess ? "codicon-check" : "codicon-copy"}
-											title={t("chat:codeblock.tooltips.copy_code")}
-											onClick={(e: React.MouseEvent) => {
-												e.stopPropagation()
-												copyWithFeedback(message.text || "").then((success) => {
-													if (success) {
-														setShowCopySuccess(true)
-														setTimeout(() => {
-															setShowCopySuccess(false)
-														}, 1000)
-													}
-												})
-											}}
-											style={{ marginRight: "4px" }}
-										/>
-										<span
-											className={`codicon codicon-chevron-${isDiffErrorExpanded ? "up" : "down"}`}></span>
-									</div>
-								</div>
+									copyTitle={t("chat:codeblock.tooltips.copy_code")}
+									copyIconClass={showCopySuccess ? "codicon-check" : "codicon-copy"}
+								/>
 								{isDiffErrorExpanded && (
 									<div
+										id={`diff-error-${message.ts}`}
 										style={{
 											padding: "8px",
 											backgroundColor: "var(--vscode-editor-background)",
@@ -1127,62 +1097,29 @@ export const ChatRowContent = ({
 									overflow: "hidden",
 									marginBottom: "8px",
 								}}>
-								<div
-									style={{
-										borderBottom: isErrorExpanded
-											? "1px solid var(--vscode-editorGroup-border)"
-											: "none",
-										fontWeight: "normal",
-										fontSize: "var(--vscode-font-size)",
-										color: "var(--vscode-editor-foreground)",
-										display: "flex",
-										alignItems: "center",
-										justifyContent: "space-between",
-										cursor: "pointer",
+								<DisclosureHeader
+									contentId={`error-${message.ts}`}
+									iconClass="codicon-error"
+									iconStyle={{ color: "var(--vscode-errorForeground)", opacity: 0.8 }}
+									title={<span style={{ fontWeight: "bold" }}>{t("chat:error")}</span>}
+									expanded={isErrorExpanded}
+									onToggle={() => setIsErrorExpanded(!isErrorExpanded)}
+									onCopy={() => {
+										copyWithFeedback(message.text || "").then((success) => {
+											if (success) {
+												setShowErrorCopySuccess(true)
+												setTimeout(() => {
+													setShowErrorCopySuccess(false)
+												}, 1000)
+											}
+										})
 									}}
-									onClick={() => setIsErrorExpanded(!isErrorExpanded)}>
-									<div
-										style={{
-											display: "flex",
-											alignItems: "center",
-											gap: "10px",
-											flexGrow: 1,
-										}}>
-										<span
-											className="codicon codicon-error"
-											style={{
-												color: "var(--vscode-errorForeground)",
-												opacity: 0.8,
-												fontSize: 16,
-												marginBottom: "-1.5px",
-											}}></span>
-										<span style={{ fontWeight: "bold", color: "var(--vscode-errorForeground)" }}>
-											{t("chat:error")}
-										</span>
-									</div>
-									<div style={{ display: "flex", alignItems: "center" }}>
-										<IconButton
-											iconClass={showErrorCopySuccess ? "codicon-check" : "codicon-copy"}
-											title={t("chat:codeblock.tooltips.copy_code")}
-											onClick={(e: React.MouseEvent) => {
-												e.stopPropagation()
-												copyWithFeedback(message.text || "").then((success) => {
-													if (success) {
-														setShowErrorCopySuccess(true)
-														setTimeout(() => {
-															setShowErrorCopySuccess(false)
-														}, 1000)
-													}
-												})
-											}}
-											style={{ marginRight: "4px" }}
-										/>
-										<span
-											className={`codicon codicon-chevron-${isErrorExpanded ? "up" : "down"}`}></span>
-									</div>
-								</div>
+									copyTitle={t("chat:codeblock.tooltips.copy_code")}
+									copyIconClass={showErrorCopySuccess ? "codicon-check" : "codicon-copy"}
+								/>
 								{isErrorExpanded && (
 									<div
+										id={`error-${message.ts}`}
 										style={{
 											padding: "8px",
 											backgroundColor: "var(--vscode-editor-background)",
diff --git a/webview-ui/src/components/chat/DisclosureHeader.tsx b/webview-ui/src/components/chat/DisclosureHeader.tsx
new file mode 100644
index 0000000000..a8a8162949
--- /dev/null
+++ b/webview-ui/src/components/chat/DisclosureHeader.tsx
@@ -0,0 +1,73 @@
+import React from "react"
+import { cn } from "@/lib/utils"
+import { IconButton } from "./IconButton"
+
+interface DisclosureHeaderProps {
+	contentId: string
+	iconClass: string
+	iconStyle?: React.CSSProperties
+	title: React.ReactNode
+	expanded: boolean
+	onToggle: () => void
+	onCopy?: (e: React.MouseEvent) => void
+	copyTitle?: string
+	copyIconClass?: string // e.g. "codicon-copy" | "codicon-check"
+	className?: string
+}
+
+export const DisclosureHeader: React.FC<DisclosureHeaderProps> = ({
+	contentId,
+	iconClass,
+	iconStyle,
+	title,
+	expanded,
+	onToggle,
+	onCopy,
+	copyTitle,
+	copyIconClass,
+	className,
+}) => {
+	return (
+		<div
+			className={cn("flex items-center justify-between", className)}
+			style={{
+				fontWeight: "normal",
+				fontSize: "var(--vscode-font-size)",
+				color: "var(--vscode-editor-foreground)",
+				borderBottom: expanded ? "1px solid var(--vscode-editorGroup-border)" : "none",
+			}}>
+			<button
+				type="button"
+				aria-expanded={expanded}
+				aria-controls={contentId}
+				onClick={onToggle}
+				className={cn(
+					"flex items-center justify-between gap-2",
+					"bg-transparent border-0 p-0 m-0 cursor-pointer",
+					"focus:outline-none focus-visible:ring-1 focus-visible:ring-vscode-focusBorder",
+				)}
+				style={{ width: "100%", textAlign: "left" }}>
+				<div style={{ display: "flex", alignItems: "center", gap: "10px", flexGrow: 1 }}>
+					<span
+						className={cn("codicon", iconClass)}
+						style={{ fontSize: 16, marginBottom: "-1.5px", ...iconStyle }}
+					/>
+					<span>{title}</span>
+				</div>
+				<span className={`codicon codicon-chevron-${expanded ? "down" : "right"}`} />
+			</button>
+
+			{onCopy && (
+				<IconButton
+					iconClass={copyIconClass ?? "codicon-copy"}
+					title={copyTitle ?? "Copy"}
+					onClick={(e) => {
+						e.stopPropagation()
+						onCopy(e)
+					}}
+					style={{ marginLeft: 4 }}
+				/>
+			)}
+		</div>
+	)
+}