From f05e209589fd1de9ed3a41208c80fdf440d5004c Mon Sep 17 00:00:00 2001
From: Aditya Singh <adisin650@gmail.com>
Date: Thu, 21 May 2026 16:43:23 -0700
Subject: [PATCH] a11y: add aria-label to response action buttons for screen
 readers

The Insert/Copy/Apply/Diff buttons on chat responses are pure-icon
elements, so NVDA and similar screen readers announce only the
fallback role text. Add an aria-label matching the user-visible
action to each button so assistive tech reads them out as
'Insert at cursor', 'Copy code block', etc. No behavior change.

Part 1 of the broader sidebar a11y work tracked in #12325.

Fixes #12326
---
 .../StepContainerPreToolbar/ApplyActions.tsx                  | 3 +++
 .../StepContainerPreToolbar/CopyButton.tsx                    | 2 ++
 .../StepContainerPreToolbar/CreateFileButton.tsx              | 1 +
 .../StepContainerPreToolbar/InsertButton.tsx                  | 2 ++
 .../StepContainerPreToolbar/RunInTerminalButton.tsx           | 2 ++
 .../StepContainerPreToolbar/ToolbarButtonWithTooltip.tsx      | 4 ++++
 gui/src/components/gui/HeaderButtonWithToolTip.tsx            | 2 ++
 7 files changed, 16 insertions(+)

diff --git a/gui/src/components/StyledMarkdownPreview/StepContainerPreToolbar/ApplyActions.tsx b/gui/src/components/StyledMarkdownPreview/StepContainerPreToolbar/ApplyActions.tsx
index 66e5f97e1e5..743ae67ad52 100644
--- a/gui/src/components/StyledMarkdownPreview/StepContainerPreToolbar/ApplyActions.tsx
+++ b/gui/src/components/StyledMarkdownPreview/StepContainerPreToolbar/ApplyActions.tsx
@@ -39,6 +39,7 @@ export function ApplyActions(props: ApplyActionsProps) {
           <div className="flex items-center">
             <ToolbarButtonWithTooltip
               data-testid="codeblock-toolbar-reject"
+              aria-label="Reject all diffs"
               onClick={onClickReject}
               tooltipContent={`Reject all (${getMetaKeyLabel()}⇧⌫)`}
             >
@@ -47,6 +48,7 @@ export function ApplyActions(props: ApplyActionsProps) {
 
             <ToolbarButtonWithTooltip
               data-testid="codeblock-toolbar-accept"
+              aria-label="Accept all diffs"
               onClick={props.onClickAccept}
               tooltipContent={`Accept all (${getMetaKeyLabel()}⇧⏎)`}
             >
@@ -69,6 +71,7 @@ export function ApplyActions(props: ApplyActionsProps) {
           >
             <button
               data-testid="codeblock-toolbar-apply"
+              aria-label="Apply changes"
               className="text-lightgray flex cursor-pointer items-center border-none bg-transparent pl-0 text-xs outline-none hover:brightness-125"
               onClick={props.onClickApply}
             >
diff --git a/gui/src/components/StyledMarkdownPreview/StepContainerPreToolbar/CopyButton.tsx b/gui/src/components/StyledMarkdownPreview/StepContainerPreToolbar/CopyButton.tsx
index 19ae2aa81e7..5ae4d5e3f14 100644
--- a/gui/src/components/StyledMarkdownPreview/StepContainerPreToolbar/CopyButton.tsx
+++ b/gui/src/components/StyledMarkdownPreview/StepContainerPreToolbar/CopyButton.tsx
@@ -14,6 +14,8 @@ export function CopyButton({ text }: CopyButtonProps) {
     <ToolTip place="top" content="Copy Code">
       <HoverItem className="!p-0">
         <div
+          role="button"
+          aria-label={copied ? "Code copied" : "Copy code block"}
           className="text-lightgray flex cursor-pointer items-center border-none bg-transparent text-xs outline-none hover:brightness-125"
           onClick={copyText}
         >
diff --git a/gui/src/components/StyledMarkdownPreview/StepContainerPreToolbar/CreateFileButton.tsx b/gui/src/components/StyledMarkdownPreview/StepContainerPreToolbar/CreateFileButton.tsx
index 61f9ec680e2..8e12c9a1a6d 100644
--- a/gui/src/components/StyledMarkdownPreview/StepContainerPreToolbar/CreateFileButton.tsx
+++ b/gui/src/components/StyledMarkdownPreview/StepContainerPreToolbar/CreateFileButton.tsx
@@ -13,6 +13,7 @@ export function CreateFileButton({ onClick }: CreateFileButtonProps) {
       <HoverItem className="!p-0">
         <button
           data-testid="codeblock-toolbar-create"
+          aria-label="Create file with code"
           className={`text-lightgray flex items-center border-none bg-transparent pl-0 text-xs text-[${vscForeground}] cursor-pointer outline-none hover:brightness-125`}
           onClick={onClick}
         >
diff --git a/gui/src/components/StyledMarkdownPreview/StepContainerPreToolbar/InsertButton.tsx b/gui/src/components/StyledMarkdownPreview/StepContainerPreToolbar/InsertButton.tsx
index 9fecb2fa34a..078740e1913 100644
--- a/gui/src/components/StyledMarkdownPreview/StepContainerPreToolbar/InsertButton.tsx
+++ b/gui/src/components/StyledMarkdownPreview/StepContainerPreToolbar/InsertButton.tsx
@@ -17,6 +17,8 @@ export function InsertButton({ onInsert }: InsertButtonProps) {
     >
       <ToolTip place="top" content="Insert Code">
         <div
+          role="button"
+          aria-label="Insert at cursor"
           className="text-lightgray flex cursor-pointer items-center border-none bg-transparent text-xs outline-none hover:brightness-125"
           onClick={onInsert}
         >
diff --git a/gui/src/components/StyledMarkdownPreview/StepContainerPreToolbar/RunInTerminalButton.tsx b/gui/src/components/StyledMarkdownPreview/StepContainerPreToolbar/RunInTerminalButton.tsx
index 4d6aa97bd89..3ffac783c30 100644
--- a/gui/src/components/StyledMarkdownPreview/StepContainerPreToolbar/RunInTerminalButton.tsx
+++ b/gui/src/components/StyledMarkdownPreview/StepContainerPreToolbar/RunInTerminalButton.tsx
@@ -19,6 +19,8 @@ export function RunInTerminalButton({ command }: RunInTerminalButtonProps) {
 
   return (
     <div
+      role="button"
+      aria-label="Run command in terminal"
       className={`text-lightgray flex items-center border-none bg-transparent text-xs text-[${vscForeground}] cursor-pointer outline-none hover:brightness-125`}
       onClick={runInTerminal}
     >
diff --git a/gui/src/components/StyledMarkdownPreview/StepContainerPreToolbar/ToolbarButtonWithTooltip.tsx b/gui/src/components/StyledMarkdownPreview/StepContainerPreToolbar/ToolbarButtonWithTooltip.tsx
index fcf3a76b128..95ddce9bbd2 100644
--- a/gui/src/components/StyledMarkdownPreview/StepContainerPreToolbar/ToolbarButtonWithTooltip.tsx
+++ b/gui/src/components/StyledMarkdownPreview/StepContainerPreToolbar/ToolbarButtonWithTooltip.tsx
@@ -6,6 +6,7 @@ interface ToolbarButtonWithTooltipProps {
   children: ReactNode;
   tooltipContent: string;
   "data-testid"?: string;
+  "aria-label"?: string;
 }
 
 export function ToolbarButtonWithTooltip({
@@ -13,10 +14,13 @@ export function ToolbarButtonWithTooltip({
   children,
   tooltipContent,
   "data-testid": testId,
+  "aria-label": ariaLabel,
 }: ToolbarButtonWithTooltipProps) {
   return (
     <ToolTip place="top" content={tooltipContent}>
       <div
+        role="button"
+        aria-label={ariaLabel ?? tooltipContent}
         onClick={(e) => {
           e.stopPropagation();
           onClick();
diff --git a/gui/src/components/gui/HeaderButtonWithToolTip.tsx b/gui/src/components/gui/HeaderButtonWithToolTip.tsx
index 602581e4362..1930d1b0d22 100644
--- a/gui/src/components/gui/HeaderButtonWithToolTip.tsx
+++ b/gui/src/components/gui/HeaderButtonWithToolTip.tsx
@@ -18,6 +18,7 @@ interface HeaderButtonWithToolTipProps {
   hoverBackgroundColor?: string;
   tooltipPlacement?: PlacesType;
   testId?: string;
+  "aria-label"?: string;
 }
 
 const HeaderButtonWithToolTip = React.forwardRef<
@@ -41,6 +42,7 @@ const HeaderButtonWithToolTip = React.forwardRef<
         style={props.style}
         ref={ref}
         tabIndex={props.tabIndex}
+        aria-label={props["aria-label"] ?? props.text}
       >
         {props.children}
       </HeaderButton>