From 07cd3daa5d43d54ccc53a2f642f8bd679e0fe8f8 Mon Sep 17 00:00:00 2001
From: yyh <yuanyouhuilyz@gmail.com>
Date: Sun, 10 May 2026 21:54:40 +0800
Subject: [PATCH] fix(web): expose names for base controls

---
 .../base/float-right-container/__tests__/index.spec.tsx  | 2 +-
 web/app/components/base/float-right-container/index.tsx  | 1 -
 .../form/components/field/__tests__/checkbox.spec.tsx    | 2 +-
 .../components/base/form/components/field/checkbox.tsx   | 1 +
 web/app/components/base/input/__tests__/index.spec.tsx   | 2 +-
 web/app/components/base/input/index.tsx                  | 9 +++++----
 6 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/web/app/components/base/float-right-container/__tests__/index.spec.tsx b/web/app/components/base/float-right-container/__tests__/index.spec.tsx
index 4466b2cadc..6f84e5afd8 100644
--- a/web/app/components/base/float-right-container/__tests__/index.spec.tsx
+++ b/web/app/components/base/float-right-container/__tests__/index.spec.tsx
@@ -90,7 +90,7 @@ describe('FloatRightContainer', () => {
       )
 
       await screen.findByRole('dialog')
-      const closeIcon = screen.getByTestId('close-icon')
+      const closeIcon = screen.getByRole('button', { name: 'common.operation.close' })
       expect(closeIcon).toBeInTheDocument()
 
       await userEvent.click(closeIcon)
diff --git a/web/app/components/base/float-right-container/index.tsx b/web/app/components/base/float-right-container/index.tsx
index db3b73da95..ee79b22226 100644
--- a/web/app/components/base/float-right-container/index.tsx
+++ b/web/app/components/base/float-right-container/index.tsx
@@ -63,7 +63,6 @@ const FloatRightContainer = ({
                         <DrawerCloseButton
                           aria-label={t('operation.close', { ns: 'common' })}
                           className="h-6 w-6 rounded-md"
-                          data-testid="close-icon"
                         />
                       )}
                     </div>
diff --git a/web/app/components/base/form/components/field/__tests__/checkbox.spec.tsx b/web/app/components/base/form/components/field/__tests__/checkbox.spec.tsx
index 6005d9261b..d5e5a6d25c 100644
--- a/web/app/components/base/form/components/field/__tests__/checkbox.spec.tsx
+++ b/web/app/components/base/form/components/field/__tests__/checkbox.spec.tsx
@@ -21,7 +21,7 @@ describe('CheckboxField', () => {
   it('should toggle on when unchecked users click the checkbox', () => {
     mockField.state.value = false
     render(<CheckboxField label="Enable feature" />)
-    fireEvent.click(screen.getByTestId('checkbox-checkbox-field'))
+    fireEvent.click(screen.getByRole('checkbox', { name: 'Enable feature' }))
     expect(mockField.handleChange).toHaveBeenCalledWith(true)
   })
 
diff --git a/web/app/components/base/form/components/field/checkbox.tsx b/web/app/components/base/form/components/field/checkbox.tsx
index cd5b95f2fa..29ba50d56b 100644
--- a/web/app/components/base/form/components/field/checkbox.tsx
+++ b/web/app/components/base/form/components/field/checkbox.tsx
@@ -19,6 +19,7 @@ const CheckboxField = ({
         <Checkbox
           id={field.name}
           checked={field.state.value}
+          ariaLabel={label}
           onCheck={() => {
             field.handleChange(!field.state.value)
           }}
diff --git a/web/app/components/base/input/__tests__/index.spec.tsx b/web/app/components/base/input/__tests__/index.spec.tsx
index 7dc5d22eab..90bac0095f 100644
--- a/web/app/components/base/input/__tests__/index.spec.tsx
+++ b/web/app/components/base/input/__tests__/index.spec.tsx
@@ -66,7 +66,7 @@ describe('Input component', () => {
   it('calls onClear when clear icon is clicked', () => {
     const onClear = vi.fn()
     render(<Input showClearIcon value="test" onClear={onClear} />)
-    const clearIconContainer = screen.getByTestId('input-clear')
+    const clearIconContainer = screen.getByRole('button', { name: 'common.operation.clear' })
     fireEvent.click(clearIconContainer!)
     expect(onClear).toHaveBeenCalledTimes(1)
   })
diff --git a/web/app/components/base/input/index.tsx b/web/app/components/base/input/index.tsx
index d41cd2c0cf..ba69670d2d 100644
--- a/web/app/components/base/input/index.tsx
+++ b/web/app/components/base/input/index.tsx
@@ -109,13 +109,14 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(({
         {...props}
       />
       {!!(showClearIcon && value && !disabled && !destructive) && (
-        <div
+        <button
+          type="button"
+          aria-label={t('operation.clear', { ns: 'common' })}
           className={cn('group absolute top-1/2 right-2 -translate-y-1/2 cursor-pointer p-px')}
           onClick={onClear}
-          data-testid="input-clear"
         >
-          <span className="i-ri-close-circle-fill h-3.5 w-3.5 cursor-pointer text-text-quaternary group-hover:text-text-tertiary" />
-        </div>
+          <span className="i-ri-close-circle-fill h-3.5 w-3.5 cursor-pointer text-text-quaternary group-hover:text-text-tertiary" aria-hidden="true" />
+        </button>
       )}
       {destructive && (
         <span className="absolute top-1/2 right-2 i-ri-error-warning-line h-4 w-4 -translate-y-1/2 text-text-destructive-secondary" />