fix(web): use button for provider tool item (#40362)

oxlint-suppressions.json

@@ -3527,14 +3527,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

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 { 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,24 +39,31 @@ const tool = {
 } as Tool
 
 describe('ToolItem', () => {
-  it('opens and closes tool details', () => {
+  it('opens and closes tool details from the keyboard', async () => {
+    const user = userEvent.setup()
     render(<ToolItem collection={collection} tool={tool} isBuiltIn isModel={false} />)
 
-    fireEvent.click(screen.getByText('Tool label'))
+    const toolButton = screen.getByRole('button', { name: 'Tool label' })
+    toolButton.focus()
+    await user.keyboard('{Enter}')
+
     expect(screen.getByTestId('tool-detail')).toBeInTheDocument()
     expect(screen.getByTestId('tool-detail')).toHaveAttribute(
       'data-show-readonly-setting-details',
       'true',
     )
 
-    fireEvent.click(screen.getByRole('button', { name: 'Close details' }))
+    await user.click(screen.getByRole('button', { name: 'Close details' }))
     expect(screen.queryByTestId('tool-detail')).not.toBeInTheDocument()
   })
 
-  it('does not open tool details when disabled', () => {
+  it('does not open tool details when disabled', async () => {
+    const user = userEvent.setup()
     render(<ToolItem collection={collection} tool={tool} isBuiltIn isModel={false} disabled />)
 
-    fireEvent.click(screen.getByText('Tool label'))
+    const toolButton = screen.getByRole('button', { name: 'Tool label' })
+    expect(toolButton).toBeDisabled()
+    await user.click(toolButton)
 
     expect(screen.queryByTestId('tool-detail')).not.toBeInTheDocument()
   })

web/app/components/tools/provider/tool-item.tsx

@@ -22,21 +22,26 @@ const ToolItem = ({ disabled, collection, tool, isBuiltIn, isModel }: Props) =>
 
   return (
     <>
-      <div
+      <button
+        type="button"
+        aria-label={tool.label[language]}
+        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 appearance-none rounded-xl border-[0.5px] border-components-panel-border-subtle px-4 py-3 text-start shadow-xs outline-hidden hover:bg-components-panel-on-panel-item-bg-hover focus-visible:ring-2 focus-visible:ring-state-accent-solid',
           disabled && 'cursor-not-allowed! opacity-50',
         )}
-        onClick={() => !disabled && setShowDetail(true)}
+        onClick={() => setShowDetail(true)}
       >
-        <div className="pb-0.5 system-md-semibold text-text-secondary">{tool.label[language]}</div>
-        <div
-          className="line-clamp-2 system-xs-regular text-text-tertiary"
+        <span className="block pb-0.5 system-md-semibold text-text-secondary">
+          {tool.label[language]}
+        </span>
+        <span
+          className="line-clamp-2 block system-xs-regular text-text-tertiary"
           title={tool.description[language]}
         >
           {tool.description[language]}
-        </div>
-      </div>
+        </span>
+      </button>
       {showDetail && (
         <SettingBuiltInTool
           showBackButton