From 6fa8b4dc9a3b8c1b33e21c28d1b0adef8178f1bc Mon Sep 17 00:00:00 2001
From: yyh <yuanyouhuilyz@gmail.com>
Date: Sun, 9 Aug 2026 14:09:32 +0800
Subject: [PATCH] fix(web): make tool provider cards buttons

---
 oxlint-suppressions.json                      |  8 --------
 .../provider/__tests__/tool-item.spec.tsx     | 20 ++++++++++++++++---
 .../components/tools/provider/tool-item.tsx   |  8 +++++---
 3 files changed, 22 insertions(+), 14 deletions(-)

diff --git a/oxlint-suppressions.json b/oxlint-suppressions.json
index c0b968118fccd1..767132f4e8d35c 100644
--- a/oxlint-suppressions.json
+++ b/oxlint-suppressions.json
@@ -3616,14 +3616,6 @@
       "count": 1
     }
   },
-  "web/app/components/tools/provider/tool-item.tsx": {
-    "jsx_a11y/click-events-have-key-events": {
-      "count": 1
-    },
-    "jsx_a11y/no-static-element-interactions": {
-      "count": 1
-    }
-  },
   "web/app/components/tools/setting/build-in/config-credentials.tsx": {
     "typescript/no-explicit-any": {
       "count": 3
diff --git a/web/app/components/tools/provider/__tests__/tool-item.spec.tsx b/web/app/components/tools/provider/__tests__/tool-item.spec.tsx
index 077a9865c9084e..c6aaca3cbfbc0c 100644
--- a/web/app/components/tools/provider/__tests__/tool-item.spec.tsx
+++ b/web/app/components/tools/provider/__tests__/tool-item.spec.tsx
@@ -1,5 +1,6 @@
 import type { Collection, Tool } from '../../types'
 import { fireEvent, render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
 import { describe, expect, it, vi } from 'vitest'
 import ToolItem from '../tool-item'
 
@@ -38,10 +39,11 @@ const tool = {
 } as Tool
 
 describe('ToolItem', () => {
-  it('opens and closes tool details', () => {
+  it('opens and closes tool details', async () => {
+    const user = userEvent.setup()
     render(<ToolItem collection={collection} tool={tool} isBuiltIn isModel={false} />)
 
-    fireEvent.click(screen.getByText('Tool label'))
+    await user.click(screen.getByRole('button', { name: /Tool label/ }))
     expect(screen.getByTestId('tool-detail')).toBeInTheDocument()
     expect(screen.getByTestId('tool-detail')).toHaveAttribute(
       'data-show-readonly-setting-details',
@@ -52,10 +54,22 @@ describe('ToolItem', () => {
     expect(screen.queryByTestId('tool-detail')).not.toBeInTheDocument()
   })
 
+  it('is reachable and opens tool details from the keyboard', async () => {
+    const user = userEvent.setup()
+    render(<ToolItem collection={collection} tool={tool} isBuiltIn isModel={false} />)
+
+    await user.tab()
+    expect(screen.getByRole('button', { name: /Tool label/ })).toHaveFocus()
+
+    await user.keyboard('{Enter}')
+    expect(screen.getByTestId('tool-detail')).toBeInTheDocument()
+  })
+
   it('does not open tool details when disabled', () => {
     render(<ToolItem collection={collection} tool={tool} isBuiltIn isModel={false} disabled />)
 
-    fireEvent.click(screen.getByText('Tool label'))
+    expect(screen.getByRole('button', { name: /Tool label/ })).toBeDisabled()
+    fireEvent.click(screen.getByRole('button', { name: /Tool label/ }))
 
     expect(screen.queryByTestId('tool-detail')).not.toBeInTheDocument()
   })
diff --git a/web/app/components/tools/provider/tool-item.tsx b/web/app/components/tools/provider/tool-item.tsx
index d562a9202f6394..96c2f27d7d4d40 100644
--- a/web/app/components/tools/provider/tool-item.tsx
+++ b/web/app/components/tools/provider/tool-item.tsx
@@ -22,9 +22,11 @@ const ToolItem = ({ disabled, collection, tool, isBuiltIn, isModel }: Props) =>
 
   return (
     <>
-      <div
+      <button
+        type="button"
+        disabled={disabled}
         className={cn(
-          'bg-components-panel-item-bg cursor-pointer rounded-xl border-[0.5px] border-components-panel-border-subtle px-4 py-3 shadow-xs hover:bg-components-panel-on-panel-item-bg-hover',
+          'bg-components-panel-item-bg w-full cursor-pointer rounded-xl border-[0.5px] border-components-panel-border-subtle px-4 py-3 text-start shadow-xs hover:bg-components-panel-on-panel-item-bg-hover',
           disabled && 'cursor-not-allowed! opacity-50',
         )}
         onClick={() => !disabled && setShowDetail(true)}
@@ -36,7 +38,7 @@ const ToolItem = ({ disabled, collection, tool, isBuiltIn, isModel }: Props) =>
         >
           {tool.description[language]}
         </div>
-      </div>
+      </button>
       {showDetail && (
         <SettingBuiltInTool
           showBackButton