fix(web): use button for tool detail toggle (#40349)

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

oxlint-suppressions.json

@@ -839,14 +839,6 @@
       "count": 1
     }
   },
-  "web/app/components/base/chat/chat/answer/tool-detail.tsx": {
-    "jsx_a11y/click-events-have-key-events": {
-      "count": 1
-    },
-    "jsx_a11y/no-static-element-interactions": {
-      "count": 1
-    }
-  },
   "web/app/components/base/chat/chat/answer/workflow-process.tsx": {
     "eslint-react/set-state-in-effect": {
       "count": 1

web/app/components/base/chat/chat/answer/__tests__/tool-detail.spec.tsx

@@ -23,6 +23,9 @@ describe('ToolDetail', () => {
 
     expect(screen.getByText('Test Tool Label')).toBeInTheDocument()
     expect(screen.getByText('tools.thought.used')).toBeInTheDocument()
+    expect(
+      screen.getByRole('button', { name: 'tools.thought.used Test Tool Label' }),
+    ).toHaveAttribute('aria-expanded', 'false')
   })
 
   it('should render the knowledge label and "using" state when not finished and name is a dataset', () => {
@@ -30,28 +33,47 @@ describe('ToolDetail', () => {
 
     expect(screen.getByText('dataset.knowledge')).toBeInTheDocument()
     expect(screen.getByText('tools.thought.using')).toBeInTheDocument()
+    expect(
+      screen.getByRole('button', { name: 'tools.thought.using dataset.knowledge' }),
+    ).toHaveAttribute('aria-expanded', 'false')
   })
 
   it('should toggle expansion and show request/response details on click', async () => {
     const user = userEvent.setup()
     render(<ToolDetail payload={mockPayload} />)
 
-    // Initially collapsed: request/response titles should not be visible
     expect(screen.queryByText('tools.thought.requestTitle')).not.toBeInTheDocument()
     expect(screen.queryByText(mockPayload.input)).not.toBeInTheDocument()
 
-    // Click to expand
-    const label = screen.getByText('Test Tool Label')
-    await user.click(label)
+    const toggle = screen.getByRole('button', {
+      name: 'tools.thought.used Test Tool Label',
+    })
+    expect(toggle).toHaveAttribute('aria-expanded', 'false')
+    await user.click(toggle)
 
-    // Now expanded
+    expect(toggle).toHaveAttribute('aria-expanded', 'true')
     expect(screen.getByText('tools.thought.requestTitle')).toBeInTheDocument()
     expect(screen.getByText(mockPayload.input)).toBeInTheDocument()
     expect(screen.getByText('tools.thought.responseTitle')).toBeInTheDocument()
     expect(screen.getByText(mockPayload.output)).toBeInTheDocument()
 
-    // Click again to collapse
-    await user.click(label)
+    await user.click(toggle)
+    expect(toggle).toHaveAttribute('aria-expanded', 'false')
+    expect(screen.queryByText('tools.thought.requestTitle')).not.toBeInTheDocument()
+  })
+
+  it('should toggle details with Space and Enter', async () => {
+    const user = userEvent.setup()
+    render(<ToolDetail payload={mockPayload} />)
+
+    const toggle = screen.getByRole('button', {
+      name: 'tools.thought.used Test Tool Label',
+    })
+    toggle.focus()
+    await user.keyboard(' ')
+    expect(screen.getByText('tools.thought.requestTitle')).toBeInTheDocument()
+
+    await user.keyboard('{Enter}')
     expect(screen.queryByText('tools.thought.requestTitle')).not.toBeInTheDocument()
   })
 })

web/app/components/base/chat/chat/answer/tool-detail.tsx

@@ -21,20 +21,22 @@ const ToolDetail = ({ payload }: ToolDetailProps) => {
         expand && 'border-[0.5px] border-components-panel-border-subtle bg-background-section-burn',
       )}
     >
-      <div
+      <button
+        type="button"
+        aria-expanded={expand}
         className={cn(
-          'flex cursor-pointer items-center px-2.5 py-2 system-xs-medium text-text-tertiary',
+          'flex w-full cursor-pointer appearance-none items-center rounded-xl px-2.5 py-2 text-start system-xs-medium text-text-tertiary focus-visible:ring-2 focus-visible:ring-state-accent-solid focus-visible:outline-hidden',
           expand && 'pb-1.5',
         )}
         onClick={() => setExpand(!expand)}
       >
-        {isFinished && <RiHammerFill className="mr-1 size-3.5" />}
-        {!isFinished && <RiLoader2Line className="mr-1 size-3.5 animate-spin" />}
+        {isFinished && <RiHammerFill aria-hidden="true" className="mr-1 size-3.5" />}
+        {!isFinished && <RiLoader2Line aria-hidden="true" className="mr-1 size-3.5 animate-spin" />}
         {t(($) => $[`thought.${isFinished ? 'used' : 'using'}`], { ns: 'tools' })}
-        <div className="mx-1 text-text-secondary">{toolLabel}</div>
-        {!expand && <RiArrowRightSLine className="size-4" />}
-        {expand && <RiArrowDownSLine className="ml-auto size-4" />}
-      </div>
+        <span className="mx-1 text-text-secondary">{toolLabel}</span>
+        {!expand && <RiArrowRightSLine aria-hidden="true" className="size-4" />}
+        {expand && <RiArrowDownSLine aria-hidden="true" className="ml-auto size-4" />}
+      </button>
       {expand && (
         <>
           <div className="mx-1 mb-0.5 rounded-[10px] bg-components-panel-on-panel-item-bg text-text-secondary">