[autofix.ci] apply automated fixes

oxlint-suppressions.json

@@ -5177,14 +5177,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,18 +197,16 @@ 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()
 
-    const toggleTipButton = screen.getAllByRole('button')[0]!
+    const toggleTipButton = screen.getByRole('button', { name: 'TIPS', expanded: true })
     await user.click(toggleTipButton)
     expect(screen.queryByText('workflow.chatVariable.panelDescription')).not.toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'TIPS', expanded: false })).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

@@ -1,14 +1,8 @@
 import type { ConversationVariable } from '@/app/components/workflow/types'
 import { cn } from '@langgenius/dify-ui/cn'
-import { RiBookOpenLine, RiCloseLine } from '@remixicon/react'
 import { memo, useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import ActionButton, { ActionButtonState } from '@/app/components/base/action-button'
-import {
-  BubbleX,
-  LongArrowLeft,
-  LongArrowRight,
-} from '@/app/components/base/icons/src/vender/line/others'
 import BlockIcon from '@/app/components/workflow/block-icon'
 import { webSocketClient } from '@/app/components/workflow/collaboration/core/websocket-manager'
 import RemoveEffectVarConfirm from '@/app/components/workflow/nodes/_base/components/remove-effect-var-confirm'
@@ -212,17 +206,21 @@ const ChatVariablePanel = () => {
         {t(($) => $['chatVariable.panelTitle'], { ns: 'workflow' })}
         <div className="flex items-center gap-1">
           <ActionButton
+            aria-label="TIPS"
+            aria-expanded={showTip}
             state={showTip ? ActionButtonState.Active : undefined}
             onClick={() => setShowTip(!showTip)}
           >
-            <RiBookOpenLine className="size-4" />
+            <span aria-hidden="true" className="i-ri-book-open-line size-4" />
           </ActionButton>
-          <div
+          <button
+            type="button"
+            aria-label={t(($) => $['operation.close'], { ns: 'common' })}
             className="flex size-6 cursor-pointer items-center justify-center"
             onClick={() => setShowChatVariablePanel(false)}
           >
-            <RiCloseLine className="size-4 text-text-tertiary" />
-          </div>
+            <span aria-hidden="true" className="i-ri-close-line size-4 text-text-tertiary" />
+          </button>
         </div>
       </div>
       {showTip && (
@@ -236,14 +234,20 @@ const ChatVariablePanel = () => {
             </div>
             <div className="flex items-center gap-2">
               <div className="flex flex-col rounded-[10px] border border-workflow-block-border bg-workflow-block-bg p-3 pb-4 shadow-md">
-                <BubbleX className="mb-1 size-4 shrink-0 text-util-colors-teal-teal-700" />
+                <span
+                  aria-hidden="true"
+                  className="mb-1 i-custom-vender-line-others-bubble-x size-4 shrink-0 text-util-colors-teal-teal-700"
+                />
                 <div className="system-xs-semibold text-text-secondary">conversation_var</div>
                 <div className="system-2xs-regular text-text-tertiary">String</div>
               </div>
               <div className="grow">
                 <div className="mb-2 flex items-center gap-2 py-1">
                   <div className="flex h-3 w-16 shrink-0 items-center gap-1 px-1">
-                    <LongArrowLeft className="h-2 grow text-text-quaternary" />
+                    <span
+                      aria-hidden="true"
+                      className="i-custom-vender-line-others-long-arrow-left h-2 grow text-text-quaternary"
+                    />
                     <div className="shrink-0 system-2xs-medium text-text-tertiary">WRITE</div>
                   </div>
                   <BlockIcon className="shrink-0" type={BlockEnum.Assigner} />
@@ -254,7 +258,10 @@ const ChatVariablePanel = () => {
                 <div className="flex items-center gap-2 py-1">
                   <div className="flex h-3 w-16 shrink-0 items-center gap-1 px-1">
                     <div className="shrink-0 system-2xs-medium text-text-tertiary">READ</div>
-                    <LongArrowRight className="h-2 grow text-text-quaternary" />
+                    <span
+                      aria-hidden="true"
+                      className="i-custom-vender-line-others-long-arrow-right h-2 grow text-text-quaternary"
+                    />
                   </div>
                   <BlockIcon className="shrink-0" type={BlockEnum.LLM} />
                   <div className="grow truncate system-xs-semibold text-text-secondary">