feat(web): base-ui slider (#34064)

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

web/app/components/base/param-item/__tests__/index-slider.spec.tsx

@@ -14,12 +14,14 @@ describe('ParamItem Slider onChange', () => {
     vi.clearAllMocks()
   })
 
+  const getSlider = () => screen.getByLabelText('Test Param')
+
   it('should divide slider value by 100 when max < 5', async () => {
     const user = userEvent.setup()
     render(<ParamItem {...defaultProps} value={0.5} min={0} max={1} />)
-    const slider = screen.getByRole('slider')
+    const slider = getSlider()
 
-    await user.click(slider)
+    slider.focus()
     await user.keyboard('{ArrowRight}')
 
     // max=1 < 5, so slider value change (50->51) becomes 0.51
@@ -29,9 +31,9 @@ describe('ParamItem Slider onChange', () => {
   it('should not divide slider value when max >= 5', async () => {
     const user = userEvent.setup()
     render(<ParamItem {...defaultProps} value={5} min={1} max={10} />)
-    const slider = screen.getByRole('slider')
+    const slider = getSlider()
 
-    await user.click(slider)
+    slider.focus()
     await user.keyboard('{ArrowRight}')
 
     // max=10 >= 5, so value remains raw (5->6)

web/app/components/base/param-item/__tests__/index.spec.tsx

@@ -17,6 +17,8 @@ describe('ParamItem', () => {
     vi.clearAllMocks()
   })
 
+  const getSlider = () => screen.getByLabelText('Test Param')
+
   describe('Rendering', () => {
     it('should render the parameter name', () => {
       render(<ParamItem {...defaultProps} />)
@@ -54,7 +56,7 @@ describe('ParamItem', () => {
       render(<ParamItem {...defaultProps} />)
 
       expect(screen.getByRole('textbox')).toBeInTheDocument()
-      expect(screen.getByRole('slider')).toBeInTheDocument()
+      expect(getSlider()).toBeInTheDocument()
     })
   })
 
@@ -74,7 +76,7 @@ describe('ParamItem', () => {
     it('should disable Slider when enable is false', () => {
       render(<ParamItem {...defaultProps} enable={false} />)
 
-      expect(screen.getByRole('slider')).toHaveAttribute('aria-disabled', 'true')
+      expect(getSlider()).toBeDisabled()
     })
 
     it('should set switch value based on enable prop', () => {
@@ -135,7 +137,7 @@ describe('ParamItem', () => {
       await user.clear(input)
 
       expect(defaultProps.onChange).toHaveBeenLastCalledWith('test_param', 0)
-      expect(screen.getByRole('slider')).toHaveAttribute('aria-valuenow', '0')
+      expect(getSlider()).toHaveAttribute('aria-valuenow', '0')
 
       await user.tab()
 
@@ -166,12 +168,12 @@ describe('ParamItem', () => {
       await user.type(input, '1.5')
 
       expect(defaultProps.onChange).toHaveBeenLastCalledWith('test_param', 1)
-      expect(screen.getByRole('slider')).toHaveAttribute('aria-valuenow', '100')
+      expect(getSlider()).toHaveAttribute('aria-valuenow', '100')
     })
 
     it('should pass scaled value to slider when max < 5', () => {
       render(<ParamItem {...defaultProps} value={0.5} />)
-      const slider = screen.getByRole('slider')
+      const slider = getSlider()
 
       // When max < 5, slider value = value * 100 = 50
       expect(slider).toHaveAttribute('aria-valuenow', '50')
@@ -179,7 +181,7 @@ describe('ParamItem', () => {
 
     it('should pass raw value to slider when max >= 5', () => {
       render(<ParamItem {...defaultProps} value={5} max={10} />)
-      const slider = screen.getByRole('slider')
+      const slider = getSlider()
 
       // When max >= 5, slider value = value = 5
       expect(slider).toHaveAttribute('aria-valuenow', '5')
@@ -212,15 +214,15 @@ describe('ParamItem', () => {
       render(<ParamItem {...defaultProps} value={0.5} min={0} />)
 
       // Slider should get value * 100 = 50, min * 100 = 0, max * 100 = 100
-      const slider = screen.getByRole('slider')
-      expect(slider).toHaveAttribute('aria-valuemax', '100')
+      const slider = getSlider()
+      expect(slider).toHaveAttribute('max', '100')
     })
 
     it('should not scale slider value when max >= 5', () => {
       render(<ParamItem {...defaultProps} value={5} min={1} max={10} />)
 
-      const slider = screen.getByRole('slider')
-      expect(slider).toHaveAttribute('aria-valuemax', '10')
+      const slider = getSlider()
+      expect(slider).toHaveAttribute('max', '10')
     })
 
     it('should expose default minimum of 0 when min is not provided', () => {

web/app/components/base/param-item/__tests__/score-threshold-item.spec.tsx

@@ -14,6 +14,8 @@ describe('ScoreThresholdItem', () => {
     vi.clearAllMocks()
   })
 
+  const getSlider = () => screen.getByLabelText('appDebug.datasetConfig.score_threshold')
+
   describe('Rendering', () => {
     it('should render the translated parameter name', () => {
       render(<ScoreThresholdItem {...defaultProps} />)
@@ -32,7 +34,7 @@ describe('ScoreThresholdItem', () => {
       render(<ScoreThresholdItem {...defaultProps} />)
 
       expect(screen.getByRole('textbox')).toBeInTheDocument()
-      expect(screen.getByRole('slider')).toBeInTheDocument()
+      expect(getSlider()).toBeInTheDocument()
     })
   })
 
@@ -63,7 +65,7 @@ describe('ScoreThresholdItem', () => {
       render(<ScoreThresholdItem {...defaultProps} enable={false} />)
 
       expect(screen.getByRole('textbox')).toBeDisabled()
-      expect(screen.getByRole('slider')).toHaveAttribute('aria-disabled', 'true')
+      expect(getSlider()).toBeDisabled()
     })
   })
 

web/app/components/base/param-item/__tests__/top-k-item.spec.tsx

@@ -19,6 +19,8 @@ describe('TopKItem', () => {
     vi.clearAllMocks()
   })
 
+  const getSlider = () => screen.getByLabelText('appDebug.datasetConfig.top_k')
+
   describe('Rendering', () => {
     it('should render the translated parameter name', () => {
       render(<TopKItem {...defaultProps} />)
@@ -37,7 +39,7 @@ describe('TopKItem', () => {
       render(<TopKItem {...defaultProps} />)
 
       expect(screen.getByRole('textbox')).toBeInTheDocument()
-      expect(screen.getByRole('slider')).toBeInTheDocument()
+      expect(getSlider()).toBeInTheDocument()
     })
   })
 
@@ -52,7 +54,7 @@ describe('TopKItem', () => {
       render(<TopKItem {...defaultProps} enable={false} />)
 
       expect(screen.getByRole('textbox')).toBeDisabled()
-      expect(screen.getByRole('slider')).toHaveAttribute('aria-disabled', 'true')
+      expect(getSlider()).toBeDisabled()
     })
   })
 
@@ -77,10 +79,10 @@ describe('TopKItem', () => {
 
     it('should render slider with max >= 5 so no scaling is applied', () => {
       render(<TopKItem {...defaultProps} />)
-      const slider = screen.getByRole('slider')
+      const slider = getSlider()
 
       // max=10 >= 5 so slider shows raw values
-      expect(slider).toHaveAttribute('aria-valuemax', '10')
+      expect(slider).toHaveAttribute('max', '10')
     })
 
     it('should not render a switch (no hasSwitch prop)', () => {
@@ -116,9 +118,9 @@ describe('TopKItem', () => {
     it('should call onChange with integer value when slider changes', async () => {
       const user = userEvent.setup()
       render(<TopKItem {...defaultProps} value={2} />)
-      const slider = screen.getByRole('slider')
+      const slider = getSlider()
 
-      await user.click(slider)
+      slider.focus()
       await user.keyboard('{ArrowRight}')
 
       expect(defaultProps.onChange).toHaveBeenLastCalledWith('top_k', 3)

web/app/components/base/param-item/index.tsx

@@ -1,8 +1,8 @@
 'use client'
 import type { FC } from 'react'
-import Slider from '@/app/components/base/slider'
 import Switch from '@/app/components/base/switch'
 import Tooltip from '@/app/components/base/tooltip'
+import { Slider } from '@/app/components/base/ui/slider'
 import {
   NumberField,
   NumberFieldControls,
@@ -78,7 +78,8 @@ const ParamItem: FC<Props> = ({ className, id, name, noTooltip, tip, step = 0.1,
             value={max < 5 ? value * 100 : value}
             min={min < 1 ? min * 100 : min}
             max={max < 5 ? max * 100 : max}
-            onChange={value => onChange(id, value / (max < 5 ? 100 : 1))}
+            onValueChange={value => onChange(id, value / (max < 5 ? 100 : 1))}
+            aria-label={name}
           />
         </div>
       </div>