fix(Slider): bind form aria attributes on thumbs instead of root (#6768)

Co-authored-by: Claude Fable 5 <noreply@anthropic.com>

Author: 61021

src/runtime/components/Slider.vue

@@ -118,7 +118,7 @@ function onChange(value: any) {
 
 <template>
   <SliderRoot
-    v-bind="{ ...rootProps, ...ariaAttrs }"
+    v-bind="rootProps"
     :id="id"
     v-model="sliderValue"
     :name="name"
@@ -140,9 +140,9 @@ function onChange(value: any) {
         disable-closing-trigger
         v-bind="(typeof props.tooltip === 'object' ? props.tooltip : {})"
       >
-        <SliderThumb data-slot="thumb" :class="ui.thumb({ class: props.ui?.thumb })" :aria-label="thumbs === 1 ? 'Thumb' : `Thumb ${thumb} of ${thumbs}`" />
+        <SliderThumb data-slot="thumb" :class="ui.thumb({ class: props.ui?.thumb })" :aria-label="thumbs === 1 ? 'Thumb' : `Thumb ${thumb} of ${thumbs}`" v-bind="ariaAttrs" />
       </UTooltip>
-      <SliderThumb v-else data-slot="thumb" :class="ui.thumb({ class: props.ui?.thumb })" :aria-label="thumbs === 1 ? 'Thumb' : `Thumb ${thumb} of ${thumbs}`" />
+      <SliderThumb v-else data-slot="thumb" :class="ui.thumb({ class: props.ui?.thumb })" :aria-label="thumbs === 1 ? 'Thumb' : `Thumb ${thumb} of ${thumbs}`" v-bind="ariaAttrs" />
     </template>
   </SliderRoot>
 </template>

test/components/FormField.spec.ts

@@ -133,6 +133,20 @@ describe('FormField', () => {
       })
     }
 
+    if (name === 'Slider') {
+      test('binds aria attributes on the thumb', async () => {
+        const wrapper = await renderFormField({
+          props: { error: 'Error' },
+          inputComponent
+        })
+
+        const invalid = wrapper.findAll('[aria-invalid="true"]')
+        expect(invalid).toHaveLength(1)
+        expect(invalid[0]!.attributes('role')).toBe('slider')
+        expect(invalid[0]!.attributes('aria-describedby')).toBe('v-0-0-error')
+      })
+    }
+
     test('binds hints with aria-describedby', async () => {
       const wrapper = await renderFormField({
         props: { hint: 'somehint' },