fix(Range): bind form aria attributes on thumbs instead of root

[IgorShevchik]

Port of nuxt/ui@f3c2ac21 (nuxt/ui#6768). Fourth of six in the queue, after #428.

The defect

useFormField's ariaAttrs — aria-invalid and aria-describedby — were spread onto SliderRoot, which renders no role. Assistive technology therefore read an invalid slider as valid, and never reached the error text. The widget is the thumb, and the thumb is what carries role="slider".

-    v-bind="{ ...rootProps, ...ariaAttrs }"
+    v-bind="rootProps"
...
-        <SliderThumb … :aria-label="…" />
+        <SliderThumb … :aria-label="…" v-bind="ariaAttrs" />

Both thumb sites — the tooltip-wrapped one and the bare one. The defect was ours in full: Range.vue:120 carried the identical spread.

This is the commit that was nearly dropped

Upstream calls the component Slider; here it is Range. That rename is recorded in PORTING.md §1 as of #423 — which exists because this commit was first reported as a no-op, on the grounds that no Slider component exists anywhere in src/ and 249 ledger entries never mention one. Both true; the search was by name, and the name is the one thing that changed.

Only the wrapper is renamed. Every reka-ui export inside the file keeps its own name, so SliderRoot and SliderThumb needed no rewriting and the diff is upstream's line for line, ui → b24ui aside.

Tests

Upstream's case, with the guard renamed to name === 'Range'.

FormField.spec.ts keys describe.each off __name, so the block is reachable only if that value is exactly Range. A guard that never matches is a test that passes without running, so this was checked in the reporter output rather than assumed:

✓ |nuxt| … > FormField > Range integration > binds aria attributes on the thumb

Two mutations, each failing a different assertion — which is what shows both are load-bearing rather than one covering for the other:

mutation	fails on
full revert — attributes back on the root, off the thumbs	expected undefined to be 'slider' — the invalid element is the root
half revert — attributes on root and thumbs	to have a length of 1 but got 2 — duplicated rather than moved

Why no snapshot moved

Worth stating, because a silent snapshot suite normally means a change did nothing. Here it means the opposite.

Range.spec.ts renders the component standalone, outside a FormField, so useFormField yields an empty ariaAttrs — moving an empty object from root to thumb changes no rendered attribute. The 20 role="slider" occurrences in those snapshots come from reka-ui and never carried aria-invalid at all.

The snapshots could not have caught this defect. That is precisely why the fix is pinned by a FormField-level test instead.

Verify (CI=true)

lint · typecheck · test · build — all green. Tests 6708 passed | 6 skipped across 294 files.

No docs:generate — the commit touches no docs/, per §6.

Ledger

f065438d reconciled with #428 and squash c602ea06. cursor → f3c2ac21, entry added.

Remaining: cf5f15e3 and f6d188bd — both showcase entries for sites built with nuxt/ui, so the content half is a no-op here; f6d188bd also widens the screenshotOptions schema in docs/content.config.ts, which is worth taking.

---

Generated by Claude Code