From 394df91bb726593628cb4d6f9bd8a81cbf5b4092 Mon Sep 17 00:00:00 2001
From: J-michalek <jaku.michalek@gmail.com>
Date: Mon, 17 Aug 2026 09:39:03 +0200
Subject: [PATCH 1/2] fix(Slider): forward aria attributes to the thumb

The thumb is the element rendered with `role="slider"`, so route consumer
`aria-*` attributes there instead of the root, which is neither focusable
nor labelable. Dropping the hardcoded label also restores Reka UI's own
`Minimum`/`Maximum` and `Value n of m` names for multi-thumb sliders, and
lets `aria-valuetext` through. A single unnamed thumb still falls back to
`Thumb` so it is never left nameless.

Closes #6782
---
 docs/content/docs/2.components/slider.md      |  4 +
 src/runtime/components/Slider.vue             | 28 ++++--
 test/components/Slider.spec.ts                | 87 +++++++++++++++++++
 .../__snapshots__/Slider-vue.spec.ts.snap     | 16 +++-
 .../__snapshots__/Slider.spec.ts.snap         | 16 +++-
 5 files changed, 140 insertions(+), 11 deletions(-)

diff --git a/docs/content/docs/2.components/slider.md b/docs/content/docs/2.components/slider.md
index 3be12a30be..bb8f9aee5f 100644
--- a/docs/content/docs/2.components/slider.md
+++ b/docs/content/docs/2.components/slider.md
@@ -36,6 +36,10 @@ props:
 ---
 ::
 
+::tip
+Use `aria-label` or `aria-labelledby` to name the Slider, they are forwarded to the thumb which is the element with the `slider` role. Sliders with two thumbs are named `Minimum` / `Maximum` automatically and those with three or more `Value n of m`, so you only need this when a single thumb has no visible label.
+::
+
 ### Min / Max
 
 Use the `min` and `max` props to set the minimum and maximum values of the Slider. Defaults to `0` and `100`.
diff --git a/src/runtime/components/Slider.vue b/src/runtime/components/Slider.vue
index 50c2a7fb11..2d9feb0d6a 100644
--- a/src/runtime/components/Slider.vue
+++ b/src/runtime/components/Slider.vue
@@ -44,7 +44,7 @@ export interface SliderEmits {
 </script>
 
 <script setup lang="ts" generic="T extends number | number[]">
-import { computed } from 'vue'
+import { computed, useAttrs } from 'vue'
 import { SliderRoot, SliderRange, SliderTrack, SliderThumb } from 'reka-ui'
 import { useForwardProps } from '../composables/useForwardProps'
 import { reactivePick } from '@vueuse/core'
@@ -62,6 +62,8 @@ const _props = withDefaults(defineProps<SliderProps>(), {
 })
 const emits = defineEmits<SliderEmits>()
 
+defineOptions({ inheritAttrs: false })
+
 const props = useComponentProps<SliderProps>('slider', _props)
 
 const modelValue = defineModel<T>()
@@ -100,6 +102,22 @@ const sliderValue = computed({
 
 const thumbs = computed(() => sliderValue.value?.length ?? 1)
 
+const attrs = useAttrs()
+
+// The thumb is the element rendered with `role="slider"`, so `aria-*` attributes belong there
+// rather than on the root, which is neither focusable nor labelable and is never announced.
+const thumbAttrs = computed(() => {
+  const ariaAttrs = Object.fromEntries(Object.entries(attrs).filter(([key]) => key.startsWith('aria-')))
+
+  if (thumbs.value === 1 && !ariaAttrs['aria-label'] && !ariaAttrs['aria-labelledby']) {
+    ariaAttrs['aria-label'] = 'Thumb'
+  }
+
+  return ariaAttrs
+})
+
+const rootAttrs = computed(() => Object.fromEntries(Object.entries(attrs).filter(([key]) => !key.startsWith('aria-'))))
+
 // eslint-disable-next-line vue/no-dupe-keys
 const ui = computed(() => tv({ extend: theme, ...(appConfig.ui?.slider || {}) })({
   disabled: disabled.value,
@@ -118,12 +136,12 @@ function onChange(value: any) {
 
 <template>
   <SliderRoot
-    v-bind="rootProps"
     :id="id"
     v-model="sliderValue"
+    data-slot="root"
+    v-bind="{ ...rootProps, ...rootAttrs }"
     :name="name"
     :disabled="disabled"
-    data-slot="root"
     :class="ui.root({ class: [props.ui?.root, props.class] })"
     :default-value="defaultSliderValue"
     @update:model-value="emitFormInput()"
@@ -140,9 +158,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}`" v-bind="ariaAttrs" />
+        <SliderThumb data-slot="thumb" :class="ui.thumb({ class: props.ui?.thumb })" v-bind="{ ...thumbAttrs, ...ariaAttrs }" />
       </UTooltip>
-      <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" />
+      <SliderThumb v-else data-slot="thumb" :class="ui.thumb({ class: props.ui?.thumb })" v-bind="{ ...thumbAttrs, ...ariaAttrs }" />
     </template>
   </SliderRoot>
 </template>
diff --git a/test/components/Slider.spec.ts b/test/components/Slider.spec.ts
index e80bd24fa5..9b297c0fe2 100644
--- a/test/components/Slider.spec.ts
+++ b/test/components/Slider.spec.ts
@@ -1,8 +1,10 @@
+import { defineComponent, h, nextTick, ref } from 'vue'
 import { describe, it, expect, test } from 'vitest'
 import { axe } from 'vitest-axe'
 import { mountSuspended } from '@nuxt/test-utils/runtime'
 import { renderEach } from '../component-render'
 import Slider from '../../src/runtime/components/Slider.vue'
+import FormField from '../../src/runtime/components/FormField.vue'
 import theme from '#build/ui/slider'
 import { flushPromises, mount } from '@vue/test-utils'
 import { renderForm } from '../utils/form'
@@ -25,6 +27,8 @@ describe('Slider', () => {
     ...sizes.map((size: string) => [`with size ${size}`, { props: { size } }]),
     ['with color neutral', { props: { color: 'neutral', defaultValue: 10 } }],
     ['with ariaLabel', { attrs: { 'aria-label': 'Aria label' } }],
+    ['with ariaLabel and multiple thumbs', { props: { defaultValue: [0, 10] }, attrs: { 'aria-label': 'Aria label' } }],
+    ['with ariaValueText', { props: { modelValue: 10 }, attrs: { 'aria-valuetext': '10 milliseconds' } }],
     ['with as', { props: { as: 'section' } }],
     ['with class', { props: { class: 'w-48' } }],
     ['with ui', { props: { ui: { track: 'bg-elevated' } } }]
@@ -40,6 +44,89 @@ describe('Slider', () => {
     expect(await axe(wrapper.element)).toHaveNoViolations()
   })
 
+  describe('aria', () => {
+    async function renderThumbs(options: { props?: any, attrs?: any } = {}) {
+      const wrapper = await mountSuspended(Slider, options)
+      return { wrapper, thumbs: wrapper.findAll('[role="slider"]') }
+    }
+
+    test('names a single thumb from aria-label', async () => {
+      const { wrapper, thumbs } = await renderThumbs({ props: { modelValue: 10 }, attrs: { 'aria-label': 'Volume' } })
+
+      expect(thumbs).toHaveLength(1)
+      expect(thumbs[0]!.attributes('aria-label')).toBe('Volume')
+      expect(wrapper.get('[data-slot="root"]').attributes('aria-label')).toBeUndefined()
+    })
+
+    test('names a single thumb from aria-labelledby', async () => {
+      const { thumbs } = await renderThumbs({ props: { modelValue: 10 }, attrs: { 'aria-labelledby': 'volume-label' } })
+
+      expect(thumbs[0]!.attributes('aria-labelledby')).toBe('volume-label')
+      expect(thumbs[0]!.attributes('aria-label')).toBeUndefined()
+    })
+
+    test('falls back to a default label when a single thumb is unnamed', async () => {
+      const { thumbs } = await renderThumbs({ props: { modelValue: 10 } })
+
+      expect(thumbs[0]!.attributes('aria-label')).toBe('Thumb')
+    })
+
+    test('keeps Reka UI default labels for two thumbs', async () => {
+      const { thumbs } = await renderThumbs({ props: { modelValue: [0, 10] } })
+
+      expect(thumbs.map(thumb => thumb.attributes('aria-label'))).toStrictEqual(['Minimum', 'Maximum'])
+    })
+
+    test('keeps Reka UI default labels for three or more thumbs', async () => {
+      const { thumbs } = await renderThumbs({ props: { modelValue: [0, 10, 20] } })
+
+      expect(thumbs.map(thumb => thumb.attributes('aria-label'))).toStrictEqual(['Value 1 of 3', 'Value 2 of 3', 'Value 3 of 3'])
+    })
+
+    test('forwards aria-valuetext to the thumb', async () => {
+      const { thumbs } = await renderThumbs({ props: { modelValue: 10 }, attrs: { 'aria-valuetext': '10 milliseconds' } })
+
+      expect(thumbs[0]!.attributes('aria-valuetext')).toBe('10 milliseconds')
+    })
+
+    test('keeps non-aria attributes on the root', async () => {
+      const { wrapper, thumbs } = await renderThumbs({ props: { modelValue: 10 }, attrs: { 'data-testid': 'slider' } })
+
+      expect(wrapper.get('[data-slot="root"]').attributes('data-testid')).toBe('slider')
+      expect(thumbs[0]!.attributes('data-testid')).toBeUndefined()
+    })
+
+    // `useAttrs()` is not deeply reactive, so pin that a parent re-render still reaches the thumb.
+    test('tracks aria attributes changed after mount', async () => {
+      const label = ref<string | undefined>('Volume')
+      const Parent = defineComponent({
+        setup: () => () => h(Slider, { 'modelValue': 10, 'aria-label': label.value })
+      })
+
+      const wrapper = await mountSuspended(Parent)
+      expect(wrapper.get('[role="slider"]').attributes('aria-label')).toBe('Volume')
+
+      label.value = undefined
+      await nextTick()
+      await nextTick()
+
+      expect(wrapper.get('[role="slider"]').attributes('aria-label')).toBe('Thumb')
+    })
+
+    // The thumb carries both the caller's `aria-*` and the ones `useFormField` derives.
+    test('merges the form aria attributes with a caller label on the thumb', async () => {
+      const wrapper = await mountSuspended(FormField, {
+        props: { error: 'Error' },
+        slots: { default: () => h(Slider, { 'modelValue': 10, 'aria-label': 'Volume' }) }
+      })
+
+      const thumb = wrapper.get('[role="slider"]')
+      expect(thumb.attributes('aria-label')).toBe('Volume')
+      expect(thumb.attributes('aria-invalid')).toBe('true')
+      expect(thumb.attributes('aria-describedby')).toMatch(/-error$/)
+    })
+  })
+
   describe('emits', () => {
     test('update:modelValue event', async () => {
       const wrapper = mount(Slider)
diff --git a/test/components/__snapshots__/Slider-vue.spec.ts.snap b/test/components/__snapshots__/Slider-vue.spec.ts.snap
index a325f5689f..ab76a2b850 100644
--- a/test/components/__snapshots__/Slider-vue.spec.ts.snap
+++ b/test/components/__snapshots__/Slider-vue.spec.ts.snap
@@ -1,7 +1,17 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
+exports[`Slider > renders with ariaLabel and multiple thumbs correctly 1`] = `
+"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--reka-slider-thumb-transform: translateX(-50%);" data-slot="root" class="relative flex items-center select-none touch-none w-full" aria-disabled="false"><span data-orientation="horizontal" data-slot="track" class="relative bg-accented overflow-hidden rounded-full grow h-[8px]"><span data-orientation="horizontal" style="left: 0%; right: 90%;" data-slot="range" class="absolute rounded-full bg-primary h-full"></span></span><span data-reka-collection-item="" data-slot="thumb" class="rounded-full bg-default ring-2 focus-visible:outline-3 focus-visible:outline-offset-2 ring-primary outline-primary/25 size-4" aria-label="Aria label" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(0% + 0px);" aria-valuenow="0"></span><span data-reka-collection-item="" data-slot="thumb" class="rounded-full bg-default ring-2 focus-visible:outline-3 focus-visible:outline-offset-2 ring-primary outline-primary/25 size-4" aria-label="Aria label" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(10% + 0px);" aria-valuenow="10"></span>
+<!--v-if--></span>"
+`;
+
 exports[`Slider > renders with ariaLabel correctly 1`] = `
-"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--reka-slider-thumb-transform: translateX(-50%);" data-slot="root" class="relative flex items-center select-none touch-none w-full" aria-label="Aria label" aria-disabled="false"><span data-orientation="horizontal" data-slot="track" class="relative bg-accented overflow-hidden rounded-full grow h-[8px]"><span data-orientation="horizontal" style="left: 0%; right: 100%;" data-slot="range" class="absolute rounded-full bg-primary h-full"></span></span><span data-reka-collection-item="" data-slot="thumb" class="rounded-full bg-default ring-2 focus-visible:outline-3 focus-visible:outline-offset-2 ring-primary outline-primary/25 size-4" aria-label="Thumb" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(0% + 0px);" aria-valuenow="0"></span>
+"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--reka-slider-thumb-transform: translateX(-50%);" data-slot="root" class="relative flex items-center select-none touch-none w-full" aria-disabled="false"><span data-orientation="horizontal" data-slot="track" class="relative bg-accented overflow-hidden rounded-full grow h-[8px]"><span data-orientation="horizontal" style="left: 0%; right: 100%;" data-slot="range" class="absolute rounded-full bg-primary h-full"></span></span><span data-reka-collection-item="" data-slot="thumb" class="rounded-full bg-default ring-2 focus-visible:outline-3 focus-visible:outline-offset-2 ring-primary outline-primary/25 size-4" aria-label="Aria label" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(0% + 0px);" aria-valuenow="0"></span>
+<!--v-if--></span>"
+`;
+
+exports[`Slider > renders with ariaValueText correctly 1`] = `
+"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--reka-slider-thumb-transform: translateX(-50%);" data-slot="root" class="relative flex items-center select-none touch-none w-full" aria-disabled="false"><span data-orientation="horizontal" data-slot="track" class="relative bg-accented overflow-hidden rounded-full grow h-[8px]"><span data-orientation="horizontal" style="left: 0%; right: 90%;" data-slot="range" class="absolute rounded-full bg-primary h-full"></span></span><span data-reka-collection-item="" data-slot="thumb" class="rounded-full bg-default ring-2 focus-visible:outline-3 focus-visible:outline-offset-2 ring-primary outline-primary/25 size-4" aria-valuetext="10 milliseconds" aria-label="Thumb" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(10% + 0px);" aria-valuenow="10"></span>
 <!--v-if--></span>"
 `;
 
@@ -42,7 +52,7 @@ exports[`Slider > renders with min max step correctly 1`] = `
 `;
 
 exports[`Slider > renders with min steps between thumbs correctly 1`] = `
-"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--reka-slider-thumb-transform: translateX(-50%);" data-slot="root" class="relative flex items-center select-none touch-none w-full" aria-disabled="false"><span data-orientation="horizontal" data-slot="track" class="relative bg-accented overflow-hidden rounded-full grow h-[8px]"><span data-orientation="horizontal" style="left: 0%; right: 70%;" data-slot="range" class="absolute rounded-full bg-primary h-full"></span></span><span data-reka-collection-item="" data-slot="thumb" class="rounded-full bg-default ring-2 focus-visible:outline-3 focus-visible:outline-offset-2 ring-primary outline-primary/25 size-4" aria-label="Thumb 1 of 2" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(0% + 0px);" aria-valuenow="0"></span><span data-reka-collection-item="" data-slot="thumb" class="rounded-full bg-default ring-2 focus-visible:outline-3 focus-visible:outline-offset-2 ring-primary outline-primary/25 size-4" aria-label="Thumb 2 of 2" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(30% + 0px);" aria-valuenow="30"></span>
+"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--reka-slider-thumb-transform: translateX(-50%);" data-slot="root" class="relative flex items-center select-none touch-none w-full" aria-disabled="false"><span data-orientation="horizontal" data-slot="track" class="relative bg-accented overflow-hidden rounded-full grow h-[8px]"><span data-orientation="horizontal" style="left: 0%; right: 70%;" data-slot="range" class="absolute rounded-full bg-primary h-full"></span></span><span data-reka-collection-item="" data-slot="thumb" class="rounded-full bg-default ring-2 focus-visible:outline-3 focus-visible:outline-offset-2 ring-primary outline-primary/25 size-4" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(0% + 0px);" aria-label="Minimum" aria-valuenow="0"></span><span data-reka-collection-item="" data-slot="thumb" class="rounded-full bg-default ring-2 focus-visible:outline-3 focus-visible:outline-offset-2 ring-primary outline-primary/25 size-4" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(30% + 0px);" aria-label="Maximum" aria-valuenow="30"></span>
 <!--v-if--></span>"
 `;
 
@@ -52,7 +62,7 @@ exports[`Slider > renders with modelValue correctly 1`] = `
 `;
 
 exports[`Slider > renders with multiple thumbs correctly 1`] = `
-"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--reka-slider-thumb-transform: translateX(-50%);" data-slot="root" class="relative flex items-center select-none touch-none w-full" aria-disabled="false"><span data-orientation="horizontal" data-slot="track" class="relative bg-accented overflow-hidden rounded-full grow h-[8px]"><span data-orientation="horizontal" style="left: 0%; right: 90%;" data-slot="range" class="absolute rounded-full bg-primary h-full"></span></span><span data-reka-collection-item="" data-slot="thumb" class="rounded-full bg-default ring-2 focus-visible:outline-3 focus-visible:outline-offset-2 ring-primary outline-primary/25 size-4" aria-label="Thumb 1 of 2" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(0% + 0px);" aria-valuenow="0"></span><span data-reka-collection-item="" data-slot="thumb" class="rounded-full bg-default ring-2 focus-visible:outline-3 focus-visible:outline-offset-2 ring-primary outline-primary/25 size-4" aria-label="Thumb 2 of 2" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(10% + 0px);" aria-valuenow="10"></span>
+"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--reka-slider-thumb-transform: translateX(-50%);" data-slot="root" class="relative flex items-center select-none touch-none w-full" aria-disabled="false"><span data-orientation="horizontal" data-slot="track" class="relative bg-accented overflow-hidden rounded-full grow h-[8px]"><span data-orientation="horizontal" style="left: 0%; right: 90%;" data-slot="range" class="absolute rounded-full bg-primary h-full"></span></span><span data-reka-collection-item="" data-slot="thumb" class="rounded-full bg-default ring-2 focus-visible:outline-3 focus-visible:outline-offset-2 ring-primary outline-primary/25 size-4" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(0% + 0px);" aria-label="Minimum" aria-valuenow="0"></span><span data-reka-collection-item="" data-slot="thumb" class="rounded-full bg-default ring-2 focus-visible:outline-3 focus-visible:outline-offset-2 ring-primary outline-primary/25 size-4" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(10% + 0px);" aria-label="Maximum" aria-valuenow="10"></span>
 <!--v-if--></span>"
 `;
 
diff --git a/test/components/__snapshots__/Slider.spec.ts.snap b/test/components/__snapshots__/Slider.spec.ts.snap
index a325f5689f..ab76a2b850 100644
--- a/test/components/__snapshots__/Slider.spec.ts.snap
+++ b/test/components/__snapshots__/Slider.spec.ts.snap
@@ -1,7 +1,17 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
+exports[`Slider > renders with ariaLabel and multiple thumbs correctly 1`] = `
+"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--reka-slider-thumb-transform: translateX(-50%);" data-slot="root" class="relative flex items-center select-none touch-none w-full" aria-disabled="false"><span data-orientation="horizontal" data-slot="track" class="relative bg-accented overflow-hidden rounded-full grow h-[8px]"><span data-orientation="horizontal" style="left: 0%; right: 90%;" data-slot="range" class="absolute rounded-full bg-primary h-full"></span></span><span data-reka-collection-item="" data-slot="thumb" class="rounded-full bg-default ring-2 focus-visible:outline-3 focus-visible:outline-offset-2 ring-primary outline-primary/25 size-4" aria-label="Aria label" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(0% + 0px);" aria-valuenow="0"></span><span data-reka-collection-item="" data-slot="thumb" class="rounded-full bg-default ring-2 focus-visible:outline-3 focus-visible:outline-offset-2 ring-primary outline-primary/25 size-4" aria-label="Aria label" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(10% + 0px);" aria-valuenow="10"></span>
+<!--v-if--></span>"
+`;
+
 exports[`Slider > renders with ariaLabel correctly 1`] = `
-"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--reka-slider-thumb-transform: translateX(-50%);" data-slot="root" class="relative flex items-center select-none touch-none w-full" aria-label="Aria label" aria-disabled="false"><span data-orientation="horizontal" data-slot="track" class="relative bg-accented overflow-hidden rounded-full grow h-[8px]"><span data-orientation="horizontal" style="left: 0%; right: 100%;" data-slot="range" class="absolute rounded-full bg-primary h-full"></span></span><span data-reka-collection-item="" data-slot="thumb" class="rounded-full bg-default ring-2 focus-visible:outline-3 focus-visible:outline-offset-2 ring-primary outline-primary/25 size-4" aria-label="Thumb" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(0% + 0px);" aria-valuenow="0"></span>
+"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--reka-slider-thumb-transform: translateX(-50%);" data-slot="root" class="relative flex items-center select-none touch-none w-full" aria-disabled="false"><span data-orientation="horizontal" data-slot="track" class="relative bg-accented overflow-hidden rounded-full grow h-[8px]"><span data-orientation="horizontal" style="left: 0%; right: 100%;" data-slot="range" class="absolute rounded-full bg-primary h-full"></span></span><span data-reka-collection-item="" data-slot="thumb" class="rounded-full bg-default ring-2 focus-visible:outline-3 focus-visible:outline-offset-2 ring-primary outline-primary/25 size-4" aria-label="Aria label" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(0% + 0px);" aria-valuenow="0"></span>
+<!--v-if--></span>"
+`;
+
+exports[`Slider > renders with ariaValueText correctly 1`] = `
+"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--reka-slider-thumb-transform: translateX(-50%);" data-slot="root" class="relative flex items-center select-none touch-none w-full" aria-disabled="false"><span data-orientation="horizontal" data-slot="track" class="relative bg-accented overflow-hidden rounded-full grow h-[8px]"><span data-orientation="horizontal" style="left: 0%; right: 90%;" data-slot="range" class="absolute rounded-full bg-primary h-full"></span></span><span data-reka-collection-item="" data-slot="thumb" class="rounded-full bg-default ring-2 focus-visible:outline-3 focus-visible:outline-offset-2 ring-primary outline-primary/25 size-4" aria-valuetext="10 milliseconds" aria-label="Thumb" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(10% + 0px);" aria-valuenow="10"></span>
 <!--v-if--></span>"
 `;
 
@@ -42,7 +52,7 @@ exports[`Slider > renders with min max step correctly 1`] = `
 `;
 
 exports[`Slider > renders with min steps between thumbs correctly 1`] = `
-"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--reka-slider-thumb-transform: translateX(-50%);" data-slot="root" class="relative flex items-center select-none touch-none w-full" aria-disabled="false"><span data-orientation="horizontal" data-slot="track" class="relative bg-accented overflow-hidden rounded-full grow h-[8px]"><span data-orientation="horizontal" style="left: 0%; right: 70%;" data-slot="range" class="absolute rounded-full bg-primary h-full"></span></span><span data-reka-collection-item="" data-slot="thumb" class="rounded-full bg-default ring-2 focus-visible:outline-3 focus-visible:outline-offset-2 ring-primary outline-primary/25 size-4" aria-label="Thumb 1 of 2" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(0% + 0px);" aria-valuenow="0"></span><span data-reka-collection-item="" data-slot="thumb" class="rounded-full bg-default ring-2 focus-visible:outline-3 focus-visible:outline-offset-2 ring-primary outline-primary/25 size-4" aria-label="Thumb 2 of 2" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(30% + 0px);" aria-valuenow="30"></span>
+"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--reka-slider-thumb-transform: translateX(-50%);" data-slot="root" class="relative flex items-center select-none touch-none w-full" aria-disabled="false"><span data-orientation="horizontal" data-slot="track" class="relative bg-accented overflow-hidden rounded-full grow h-[8px]"><span data-orientation="horizontal" style="left: 0%; right: 70%;" data-slot="range" class="absolute rounded-full bg-primary h-full"></span></span><span data-reka-collection-item="" data-slot="thumb" class="rounded-full bg-default ring-2 focus-visible:outline-3 focus-visible:outline-offset-2 ring-primary outline-primary/25 size-4" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(0% + 0px);" aria-label="Minimum" aria-valuenow="0"></span><span data-reka-collection-item="" data-slot="thumb" class="rounded-full bg-default ring-2 focus-visible:outline-3 focus-visible:outline-offset-2 ring-primary outline-primary/25 size-4" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(30% + 0px);" aria-label="Maximum" aria-valuenow="30"></span>
 <!--v-if--></span>"
 `;
 
@@ -52,7 +62,7 @@ exports[`Slider > renders with modelValue correctly 1`] = `
 `;
 
 exports[`Slider > renders with multiple thumbs correctly 1`] = `
-"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--reka-slider-thumb-transform: translateX(-50%);" data-slot="root" class="relative flex items-center select-none touch-none w-full" aria-disabled="false"><span data-orientation="horizontal" data-slot="track" class="relative bg-accented overflow-hidden rounded-full grow h-[8px]"><span data-orientation="horizontal" style="left: 0%; right: 90%;" data-slot="range" class="absolute rounded-full bg-primary h-full"></span></span><span data-reka-collection-item="" data-slot="thumb" class="rounded-full bg-default ring-2 focus-visible:outline-3 focus-visible:outline-offset-2 ring-primary outline-primary/25 size-4" aria-label="Thumb 1 of 2" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(0% + 0px);" aria-valuenow="0"></span><span data-reka-collection-item="" data-slot="thumb" class="rounded-full bg-default ring-2 focus-visible:outline-3 focus-visible:outline-offset-2 ring-primary outline-primary/25 size-4" aria-label="Thumb 2 of 2" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(10% + 0px);" aria-valuenow="10"></span>
+"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--reka-slider-thumb-transform: translateX(-50%);" data-slot="root" class="relative flex items-center select-none touch-none w-full" aria-disabled="false"><span data-orientation="horizontal" data-slot="track" class="relative bg-accented overflow-hidden rounded-full grow h-[8px]"><span data-orientation="horizontal" style="left: 0%; right: 90%;" data-slot="range" class="absolute rounded-full bg-primary h-full"></span></span><span data-reka-collection-item="" data-slot="thumb" class="rounded-full bg-default ring-2 focus-visible:outline-3 focus-visible:outline-offset-2 ring-primary outline-primary/25 size-4" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(0% + 0px);" aria-label="Minimum" aria-valuenow="0"></span><span data-reka-collection-item="" data-slot="thumb" class="rounded-full bg-default ring-2 focus-visible:outline-3 focus-visible:outline-offset-2 ring-primary outline-primary/25 size-4" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(10% + 0px);" aria-label="Maximum" aria-valuenow="10"></span>
 <!--v-if--></span>"
 `;
 

From f05615de8e63641098427068108f3c2fa3b2f90e Mon Sep 17 00:00:00 2001
From: Jakub <jakub.michalek@freelo.io>
Date: Thu, 20 Aug 2026 16:29:04 +0200
Subject: [PATCH 2/2] fix(Slider): keep positional thumb labels on multiple
 thumbs

Reka UI names the thumbs of a range slider by their position, `Minimum` /
`Maximum` for two and `Value n of m` for three or more. Forwarding one
`aria-label` to every thumb replaced those with the same string, leaving
the thumbs indistinguishable.

Only a single thumb now takes the consumer `aria-*` attributes. A label
that the thumbs do not take stays on the root, which is given a `group`
role so the name is actually exposed, `aria-label` on a roleless element
being ignored when the accessible name is computed.
---
 docs/content/docs/2.components/slider.md      |  4 ++-
 src/runtime/components/Slider.vue             | 16 +++++++++---
 test/components/Slider.spec.ts                | 26 +++++++++++++++++++
 .../__snapshots__/Slider-vue.spec.ts.snap     |  2 +-
 .../__snapshots__/Slider.spec.ts.snap         |  2 +-
 5 files changed, 43 insertions(+), 7 deletions(-)

diff --git a/docs/content/docs/2.components/slider.md b/docs/content/docs/2.components/slider.md
index bb8f9aee5f..1598b0ef7a 100644
--- a/docs/content/docs/2.components/slider.md
+++ b/docs/content/docs/2.components/slider.md
@@ -37,7 +37,9 @@ props:
 ::
 
 ::tip
-Use `aria-label` or `aria-labelledby` to name the Slider, they are forwarded to the thumb which is the element with the `slider` role. Sliders with two thumbs are named `Minimum` / `Maximum` automatically and those with three or more `Value n of m`, so you only need this when a single thumb has no visible label.
+Use `aria-label` or `aria-labelledby` to name a single thumb Slider, they are forwarded to the thumb which is the element with the `slider` role.
+
+The thumbs of a multiple thumbs Slider are named by their position so they can be told apart, `Minimum` / `Maximum` for two thumbs and `Value n of m` for three or more. Those names are kept, and an `aria-label` names the Slider as a whole through a `group` role on the root instead of being repeated on every thumb.
 ::
 
 ### Min / Max
diff --git a/src/runtime/components/Slider.vue b/src/runtime/components/Slider.vue
index 2d9feb0d6a..b13cbe95dc 100644
--- a/src/runtime/components/Slider.vue
+++ b/src/runtime/components/Slider.vue
@@ -104,19 +104,27 @@ const thumbs = computed(() => sliderValue.value?.length ?? 1)
 
 const attrs = useAttrs()
 
-// The thumb is the element rendered with `role="slider"`, so `aria-*` attributes belong there
-// rather than on the root, which is neither focusable nor labelable and is never announced.
 const thumbAttrs = computed(() => {
+  if (thumbs.value > 1) return {}
+
   const ariaAttrs = Object.fromEntries(Object.entries(attrs).filter(([key]) => key.startsWith('aria-')))
 
-  if (thumbs.value === 1 && !ariaAttrs['aria-label'] && !ariaAttrs['aria-labelledby']) {
+  if (!ariaAttrs['aria-label'] && !ariaAttrs['aria-labelledby']) {
     ariaAttrs['aria-label'] = 'Thumb'
   }
 
   return ariaAttrs
 })
 
-const rootAttrs = computed(() => Object.fromEntries(Object.entries(attrs).filter(([key]) => !key.startsWith('aria-'))))
+const rootAttrs = computed(() => {
+  const rest = Object.fromEntries(Object.entries(attrs).filter(([key]) => !(key in thumbAttrs.value)))
+
+  if (rest['aria-label'] || rest['aria-labelledby']) {
+    rest.role = 'group'
+  }
+
+  return rest
+})
 
 // eslint-disable-next-line vue/no-dupe-keys
 const ui = computed(() => tv({ extend: theme, ...(appConfig.ui?.slider || {}) })({
diff --git a/test/components/Slider.spec.ts b/test/components/Slider.spec.ts
index 9b297c0fe2..7d4ce05fba 100644
--- a/test/components/Slider.spec.ts
+++ b/test/components/Slider.spec.ts
@@ -83,6 +83,32 @@ describe('Slider', () => {
       expect(thumbs.map(thumb => thumb.attributes('aria-label'))).toStrictEqual(['Value 1 of 3', 'Value 2 of 3', 'Value 3 of 3'])
     })
 
+    test('groups multiple thumbs under an aria-label instead of naming each of them', async () => {
+      const { wrapper, thumbs } = await renderThumbs({ props: { modelValue: [10, 90] }, attrs: { 'aria-label': 'Price range' } })
+
+      expect(thumbs.map(thumb => thumb.attributes('aria-label'))).toStrictEqual(['Minimum', 'Maximum'])
+
+      const root = wrapper.get('[data-slot="root"]')
+      expect(root.attributes('aria-label')).toBe('Price range')
+      expect(root.attributes('role')).toBe('group')
+    })
+
+    test('groups three or more thumbs under an aria-label instead of naming each of them', async () => {
+      const { wrapper, thumbs } = await renderThumbs({ props: { modelValue: [0, 10, 20] }, attrs: { 'aria-label': 'Levels' } })
+
+      expect(thumbs.map(thumb => thumb.attributes('aria-label'))).toStrictEqual(['Value 1 of 3', 'Value 2 of 3', 'Value 3 of 3'])
+
+      const root = wrapper.get('[data-slot="root"]')
+      expect(root.attributes('aria-label')).toBe('Levels')
+      expect(root.attributes('role')).toBe('group')
+    })
+
+    test('does not group an unlabelled slider', async () => {
+      const { wrapper } = await renderThumbs({ props: { modelValue: [10, 90] } })
+
+      expect(wrapper.get('[data-slot="root"]').attributes('role')).toBeUndefined()
+    })
+
     test('forwards aria-valuetext to the thumb', async () => {
       const { thumbs } = await renderThumbs({ props: { modelValue: 10 }, attrs: { 'aria-valuetext': '10 milliseconds' } })
 
diff --git a/test/components/__snapshots__/Slider-vue.spec.ts.snap b/test/components/__snapshots__/Slider-vue.spec.ts.snap
index ab76a2b850..329572045f 100644
--- a/test/components/__snapshots__/Slider-vue.spec.ts.snap
+++ b/test/components/__snapshots__/Slider-vue.spec.ts.snap
@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Slider > renders with ariaLabel and multiple thumbs correctly 1`] = `
-"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--reka-slider-thumb-transform: translateX(-50%);" data-slot="root" class="relative flex items-center select-none touch-none w-full" aria-disabled="false"><span data-orientation="horizontal" data-slot="track" class="relative bg-accented overflow-hidden rounded-full grow h-[8px]"><span data-orientation="horizontal" style="left: 0%; right: 90%;" data-slot="range" class="absolute rounded-full bg-primary h-full"></span></span><span data-reka-collection-item="" data-slot="thumb" class="rounded-full bg-default ring-2 focus-visible:outline-3 focus-visible:outline-offset-2 ring-primary outline-primary/25 size-4" aria-label="Aria label" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(0% + 0px);" aria-valuenow="0"></span><span data-reka-collection-item="" data-slot="thumb" class="rounded-full bg-default ring-2 focus-visible:outline-3 focus-visible:outline-offset-2 ring-primary outline-primary/25 size-4" aria-label="Aria label" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(10% + 0px);" aria-valuenow="10"></span>
+"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--reka-slider-thumb-transform: translateX(-50%);" data-slot="root" aria-label="Aria label" role="group" class="relative flex items-center select-none touch-none w-full" aria-disabled="false"><span data-orientation="horizontal" data-slot="track" class="relative bg-accented overflow-hidden rounded-full grow h-[8px]"><span data-orientation="horizontal" style="left: 0%; right: 90%;" data-slot="range" class="absolute rounded-full bg-primary h-full"></span></span><span data-reka-collection-item="" data-slot="thumb" class="rounded-full bg-default ring-2 focus-visible:outline-3 focus-visible:outline-offset-2 ring-primary outline-primary/25 size-4" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(0% + 0px);" aria-label="Minimum" aria-valuenow="0"></span><span data-reka-collection-item="" data-slot="thumb" class="rounded-full bg-default ring-2 focus-visible:outline-3 focus-visible:outline-offset-2 ring-primary outline-primary/25 size-4" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(10% + 0px);" aria-label="Maximum" aria-valuenow="10"></span>
 <!--v-if--></span>"
 `;
 
diff --git a/test/components/__snapshots__/Slider.spec.ts.snap b/test/components/__snapshots__/Slider.spec.ts.snap
index ab76a2b850..329572045f 100644
--- a/test/components/__snapshots__/Slider.spec.ts.snap
+++ b/test/components/__snapshots__/Slider.spec.ts.snap
@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Slider > renders with ariaLabel and multiple thumbs correctly 1`] = `
-"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--reka-slider-thumb-transform: translateX(-50%);" data-slot="root" class="relative flex items-center select-none touch-none w-full" aria-disabled="false"><span data-orientation="horizontal" data-slot="track" class="relative bg-accented overflow-hidden rounded-full grow h-[8px]"><span data-orientation="horizontal" style="left: 0%; right: 90%;" data-slot="range" class="absolute rounded-full bg-primary h-full"></span></span><span data-reka-collection-item="" data-slot="thumb" class="rounded-full bg-default ring-2 focus-visible:outline-3 focus-visible:outline-offset-2 ring-primary outline-primary/25 size-4" aria-label="Aria label" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(0% + 0px);" aria-valuenow="0"></span><span data-reka-collection-item="" data-slot="thumb" class="rounded-full bg-default ring-2 focus-visible:outline-3 focus-visible:outline-offset-2 ring-primary outline-primary/25 size-4" aria-label="Aria label" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(10% + 0px);" aria-valuenow="10"></span>
+"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--reka-slider-thumb-transform: translateX(-50%);" data-slot="root" aria-label="Aria label" role="group" class="relative flex items-center select-none touch-none w-full" aria-disabled="false"><span data-orientation="horizontal" data-slot="track" class="relative bg-accented overflow-hidden rounded-full grow h-[8px]"><span data-orientation="horizontal" style="left: 0%; right: 90%;" data-slot="range" class="absolute rounded-full bg-primary h-full"></span></span><span data-reka-collection-item="" data-slot="thumb" class="rounded-full bg-default ring-2 focus-visible:outline-3 focus-visible:outline-offset-2 ring-primary outline-primary/25 size-4" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(0% + 0px);" aria-label="Minimum" aria-valuenow="0"></span><span data-reka-collection-item="" data-slot="thumb" class="rounded-full bg-default ring-2 focus-visible:outline-3 focus-visible:outline-offset-2 ring-primary outline-primary/25 size-4" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(10% + 0px);" aria-label="Maximum" aria-valuenow="10"></span>
 <!--v-if--></span>"
 `;