From c944a255857cd87bb9c2d611010e81fbece34246 Mon Sep 17 00:00:00 2001
From: yyh <92089059+lyzno1@users.noreply.github.com>
Date: Mon, 10 Aug 2026 10:56:12 +0800
Subject: [PATCH] fix(web): expose debug toolbar semantics (#40258)

---
 .../debug/__tests__/index.spec.tsx            | 25 ++++++++++++-------
 .../app/configuration/debug/index.tsx         | 11 +++++---
 2 files changed, 24 insertions(+), 12 deletions(-)

diff --git a/web/app/components/app/configuration/debug/__tests__/index.spec.tsx b/web/app/components/app/configuration/debug/__tests__/index.spec.tsx
index b5f6bae70c5..cdaa9bbc3a8 100644
--- a/web/app/components/app/configuration/debug/__tests__/index.spec.tsx
+++ b/web/app/components/app/configuration/debug/__tests__/index.spec.tsx
@@ -158,14 +158,12 @@ vi.mock('@/app/components/app/text-generate/item', () => ({
 vi.mock('@/app/components/base/action-button', () => ({
   default: ({
     children,
-    onClick,
     state,
-  }: {
-    children: React.ReactNode
-    onClick?: () => void
+    ...props
+  }: React.ButtonHTMLAttributes<HTMLButtonElement> & {
     state?: string
   }) => (
-    <button type="button" data-testid="action-button" data-state={state} onClick={onClick}>
+    <button type="button" data-testid="action-button" data-state={state} {...props}>
       {children}
     </button>
   ),
@@ -581,7 +579,7 @@ describe('Debug', () => {
 
       expect(screen.getByTestId('debug-with-single-model'))!.toBeInTheDocument()
 
-      fireEvent.click(screen.getAllByTestId('action-button')[0]!)
+      fireEvent.click(screen.getByRole('button', { name: 'common.operation.refresh' }))
       expect(mockState.mockHandleRestart).toHaveBeenCalledTimes(1)
     })
 
@@ -607,7 +605,14 @@ describe('Debug', () => {
       })
 
       expect(screen.getByTestId('chat-user-input'))!.toBeInTheDocument()
-      fireEvent.click(screen.getAllByTestId('action-button')[1]!)
+      const inputPanelButton = screen.getByRole('button', {
+        name: 'workflow.panel.userInputField',
+      })
+      expect(inputPanelButton).toHaveAttribute('aria-expanded', 'true')
+
+      fireEvent.click(inputPanelButton)
+
+      expect(inputPanelButton).toHaveAttribute('aria-expanded', 'false')
       expect(screen.queryByTestId('chat-user-input')).not.toBeInTheDocument()
     })
 
@@ -619,7 +624,7 @@ describe('Debug', () => {
         },
       })
 
-      fireEvent.click(screen.getAllByTestId('action-button')[0]!)
+      fireEvent.click(screen.getByRole('button', { name: 'common.operation.refresh' }))
       expect(mockState.mockHandleRestart).toHaveBeenCalledTimes(1)
     })
 
@@ -631,7 +636,9 @@ describe('Debug', () => {
         },
       })
 
-      expect(screen.queryByTestId('action-button')).not.toBeInTheDocument()
+      expect(
+        screen.queryByRole('button', { name: 'common.operation.refresh' }),
+      ).not.toBeInTheDocument()
     })
 
     it('should show formatting confirmation and handle cancel', () => {
diff --git a/web/app/components/app/configuration/debug/index.tsx b/web/app/components/app/configuration/debug/index.tsx
index 1fdc4f2bf9b..e3d2f88b6bb 100644
--- a/web/app/components/app/configuration/debug/index.tsx
+++ b/web/app/components/app/configuration/debug/index.tsx
@@ -442,8 +442,11 @@ const Debug: FC<IDebug> = ({
                   <Tooltip>
                     <TooltipTrigger
                       render={
-                        <ActionButton onClick={clearConversation}>
-                          <RefreshCcw01 className="size-4" />
+                        <ActionButton
+                          aria-label={t(($) => $['operation.refresh'], { ns: 'common' })}
+                          onClick={clearConversation}
+                        >
+                          <RefreshCcw01 aria-hidden="true" className="size-4" />
                         </ActionButton>
                       }
                     />
@@ -459,11 +462,13 @@ const Debug: FC<IDebug> = ({
                       <TooltipTrigger
                         render={
                           <ActionButton
+                            aria-expanded={expanded}
+                            aria-label={t(($) => $['panel.userInputField'], { ns: 'workflow' })}
                             state={expanded ? ActionButtonState.Active : undefined}
                             disabled={!canTestAndRun}
                             onClick={() => setExpanded(!expanded)}
                           >
-                            <RiEqualizer2Line className="size-4" />
+                            <RiEqualizer2Line aria-hidden="true" className="size-4" />
                           </ActionButton>
                         }
                       />