fix(web): expose names for base controls

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)

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>

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)
   })
 

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)
           }}

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)
   })

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" />