refactor(web): migrate document metadata input (#41276)

oxlint-suppressions.json

@@ -2234,11 +2234,6 @@
       "count": 1
     }
   },
-  "web/app/components/datasets/documents/detail/metadata/components/field-info.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
   "web/app/components/datasets/documents/detail/metadata/index.tsx": {
     "no-barrel-files/no-barrel-files": {
       "count": 1
@@ -5475,4 +5470,4 @@
       "count": 2
     }
   }
-}
+}

web/app/components/base/auto-height-textarea/index.tsx

@@ -3,6 +3,7 @@ import { useEffect, useRef } from 'react'
 import { sleep } from '@/utils'
 
 type IProps = {
+  'aria-label'?: string
   placeholder?: string
   value: string
   onChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => void
@@ -17,6 +18,7 @@ type IProps = {
 }
 
 const AutoHeightTextarea = ({
+  'aria-label': ariaLabel,
   ref: outerRef,
   value,
   onChange,
@@ -74,6 +76,7 @@ const AutoHeightTextarea = ({
       </div>
       <textarea
         ref={ref}
+        aria-label={ariaLabel}
         autoFocus={autoFocus}
         className={cn(className, 'absolute inset-0 resize-none overflow-auto')}
         style={{

web/app/components/datasets/documents/detail/metadata/components/__tests__/field-info.spec.tsx

@@ -45,7 +45,7 @@ describe('FieldInfo', () => {
     it('should render input field by default in edit mode', () => {
       render(<FieldInfo label="Title" value="Test" showEdit={true} inputType="input" />)
 
-      const input = screen.getByRole('textbox')
+      const input = screen.getByRole('textbox', { name: 'Title' })
       expect(input).toBeInTheDocument()
       expect(input).toHaveValue('Test')
     })
@@ -53,7 +53,7 @@ describe('FieldInfo', () => {
     it('should render textarea when inputType is textarea', () => {
       render(<FieldInfo label="Desc" value="Long text" showEdit={true} inputType="textarea" />)
 
-      const textarea = screen.getByRole('textbox')
+      const textarea = screen.getByRole('textbox', { name: 'Desc' })
       expect(textarea).toBeInTheDocument()
       expect(textarea).toHaveValue('Long text')
     })
@@ -73,8 +73,7 @@ describe('FieldInfo', () => {
         />,
       )
 
-      // SimpleSelect renders a button-like trigger
-      expect(screen.getByText('English')).toBeInTheDocument()
+      expect(screen.getByRole('combobox', { name: 'Language' })).toHaveTextContent('English')
     })
 
     it('should call onUpdate when input value changes', () => {
@@ -83,7 +82,9 @@ describe('FieldInfo', () => {
         <FieldInfo label="Title" value="" showEdit={true} inputType="input" onUpdate={onUpdate} />,
       )
 
-      fireEvent.change(screen.getByRole('textbox'), { target: { value: 'New' } })
+      fireEvent.change(screen.getByRole('textbox', { name: 'Title' }), {
+        target: { value: 'New' },
+      })
 
       expect(onUpdate).toHaveBeenCalledWith('New')
     })
@@ -100,7 +101,9 @@ describe('FieldInfo', () => {
         />,
       )
 
-      fireEvent.change(screen.getByRole('textbox'), { target: { value: 'Updated' } })
+      fireEvent.change(screen.getByRole('textbox', { name: 'Desc' }), {
+        target: { value: 'Updated' },
+      })
 
       expect(onUpdate).toHaveBeenCalledWith('Updated')
     })
@@ -110,7 +113,7 @@ describe('FieldInfo', () => {
     it('should render with default value prop', () => {
       render(<FieldInfo label="Field" showEdit={true} inputType="input" defaultValue="default" />)
 
-      expect(screen.getByRole('textbox')).toBeInTheDocument()
+      expect(screen.getByRole('textbox', { name: 'Field' })).toBeInTheDocument()
     })
   })
 })

web/app/components/datasets/documents/detail/metadata/components/field-info.tsx

@@ -2,6 +2,7 @@
 import type { FC, ReactNode } from 'react'
 import type { inputType } from '@/hooks/use-metadata'
 import { cn } from '@langgenius/dify-ui/cn'
+import { Input } from '@langgenius/dify-ui/input'
 import {
   Select,
   SelectContent,
@@ -12,7 +13,6 @@ import {
 } from '@langgenius/dify-ui/select'
 import { useTranslation } from 'react-i18next'
 import AutoHeightTextarea from '@/app/components/base/auto-height-textarea'
-import Input from '@/app/components/base/input'
 import { getTextWidthWithCanvas } from '@/utils'
 import s from '../style.module.css'
 
@@ -57,7 +57,7 @@ const FieldInfo: FC<FieldInfoProps> = ({
             onUpdate?.(nextValue)
           }}
         >
-          <SelectTrigger className={cn(s.select, s.selectWrapper)}>
+          <SelectTrigger aria-label={label} className={cn(s.select, s.selectWrapper)}>
             {selectedOption?.name ??
               `${t(($) => $['metadata.placeholder.select'], { ns: 'datasetDocuments' })}${label}`}
           </SelectTrigger>
@@ -76,6 +76,7 @@ const FieldInfo: FC<FieldInfoProps> = ({
     if (inputType === 'textarea') {
       return (
         <AutoHeightTextarea
+          aria-label={label}
           onChange={(e) => onUpdate?.(e.target.value)}
           value={value}
           className={s.textArea}
@@ -86,7 +87,8 @@ const FieldInfo: FC<FieldInfoProps> = ({
 
     return (
       <Input
-        onChange={(e) => onUpdate?.(e.target.value)}
+        aria-label={label}
+        onValueChange={(nextValue) => onUpdate?.(nextValue)}
         value={value}
         defaultValue={defaultValue}
         placeholder={`${t(($) => $['metadata.placeholder.add'], { ns: 'datasetDocuments' })}${label}`}