fix(web): use button for chat variable panel close (#40333)

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

oxlint-suppressions.json

@@ -5142,14 +5142,6 @@
       "count": 1
     }
   },
-  "web/app/components/workflow/panel/chat-variable-panel/index.tsx": {
-    "jsx_a11y/click-events-have-key-events": {
-      "count": 1
-    },
-    "jsx_a11y/no-static-element-interactions": {
-      "count": 1
-    }
-  },
   "web/app/components/workflow/panel/chat-variable-panel/type.ts": {
     "erasable-syntax-only/enums": {
       "count": 1

web/app/components/workflow/panel/chat-variable-panel/__tests__/index.spec.tsx

@@ -197,7 +197,7 @@ describe('ChatVariablePanel', () => {
 
   it('should toggle the tips area and close the panel', async () => {
     const user = userEvent.setup()
-    const { container } = render(<ChatVariablePanel />)
+    render(<ChatVariablePanel />)
 
     expect(screen.getByText('workflow.chatVariable.panelDescription')).toBeInTheDocument()
 
@@ -205,10 +205,7 @@ describe('ChatVariablePanel', () => {
     await user.click(toggleTipButton)
     expect(screen.queryByText('workflow.chatVariable.panelDescription')).not.toBeInTheDocument()
 
-    const closeButton = container.querySelector(
-      '.flex.size-6.cursor-pointer.items-center.justify-center',
-    ) as HTMLElement
-    await user.click(closeButton)
+    await user.click(screen.getByRole('button', { name: 'common.operation.close' }))
 
     expect(mockSetShowChatVariablePanel).toHaveBeenCalledWith(false)
   })

web/app/components/workflow/panel/chat-variable-panel/index.tsx

@@ -217,12 +217,14 @@ const ChatVariablePanel = () => {
           >
             <RiBookOpenLine className="size-4" />
           </ActionButton>
-          <div
-            className="flex size-6 cursor-pointer items-center justify-center"
+          <button
+            type="button"
+            aria-label={t(($) => $['operation.close'], { ns: 'common' })}
+            className="flex size-6 cursor-pointer appearance-none items-center justify-center rounded-md border-0 bg-transparent p-0 focus-visible:ring-2 focus-visible:ring-state-accent-solid focus-visible:outline-hidden"
             onClick={() => setShowChatVariablePanel(false)}
           >
-            <RiCloseLine className="size-4 text-text-tertiary" />
-          </div>
+            <RiCloseLine aria-hidden="true" className="size-4 text-text-tertiary" />
+          </button>
         </div>
       </div>
       {showTip && (