Slider form accessibility attributes are applied to the non-focusable root

[nononavasgit]

Environment

| | |
| | Operating system Windows 10.0.19045 |
| | CPU Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz (12 cores) |
| | Node.js version v24.14.0 |
| | nuxt/cli version 3.37.0 |
| | Package manager npm 11.9.0 |
| | Nuxt version - |
| | Nitro version - |
| | Builder vite 8.1.4 |
| | Config - |
| | Modules - |
| |

Is this bug related to Nuxt or Vue?

Vue

Package

v4.x

Version

v4.10.0

Reproduction

https://ui.nuxt.com/docs/components/form#input-events -> Slider component when is invalid

Description

Description

When Slider is used inside a FormField, the accessibility attributes returned by useFormField, such as:

• aria-invalid
• aria-describedby
• aria-labelledby
• aria-required
  etc...

are currently applied to SliderRoot.

However, SliderRoot is not the focusable element and does not have the slider role. The actual interactive and focusable element is SliderThumb, which renders with role="slider".

As a result, form validation state, the field label and the error or help message may be associated with a non-focusable wrapper instead of the element exposed to assistive technologies as the slider control.

Expected behavior

The form accessibility attributes returned by useFormField should be applied to each SliderThumb, since the thumb is the focusable element with role="slider".

For example, the resulting structure should associate the attributes with the interactive element:

<span
  role="slider"
  tabindex="0"
  aria-labelledby="field-label"
  aria-describedby="field-error"
  aria-invalid="true"
></span>

### Additional context

_No response_

### Logs

```shell-script

[coderabbitai]

🔗 Related PRs

#6572 - fix(SelectMenu): bind id and aria attributes on trigger [merged]
#6653 - fix(FileUpload): add aria-disabled attribute when disabled [merged]

---

📝 Issue Planner

_{Check the box below or use the @coderabbitai plan command to generate an implementation plan and prompts that you can use with your favorite coding assistant.}

• Create Plan

---

🧪 Issue enrichment is currently in open beta.

You can configure auto-planning by selecting labels in the issue_enrichment configuration.

To disable automatic issue enrichment, add the following to your .coderabbit.yaml:

issue_enrichment:
  auto_enrich:
    enabled: false

💬 Have feedback or questions? Drop into our discord!