From bd115e5cb5cf6d05ac08b0f1679c494066033974 Mon Sep 17 00:00:00 2001
From: sai6855 <fayazceg@gmail.com>
Date: Thu, 16 Oct 2025 17:17:44 +0530
Subject: [PATCH] [docs][slider] Fix a11y issues in demos

---
 .../demos/edge-alignment/css-modules/index.tsx       |  2 +-
 .../slider/demos/edge-alignment/tailwind/index.tsx   |  5 ++++-
 .../slider/demos/hero/css-modules/index.tsx          |  2 +-
 .../components/slider/demos/hero/tailwind/index.tsx  |  5 ++++-
 .../slider/demos/range-slider/css-modules/index.tsx  | 12 ++++++++++--
 .../slider/demos/range-slider/tailwind/index.tsx     |  2 ++
 6 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/docs/src/app/(public)/(content)/react/components/slider/demos/edge-alignment/css-modules/index.tsx b/docs/src/app/(public)/(content)/react/components/slider/demos/edge-alignment/css-modules/index.tsx
index 0a2c1688d14..4d01143bc73 100644
--- a/docs/src/app/(public)/(content)/react/components/slider/demos/edge-alignment/css-modules/index.tsx
+++ b/docs/src/app/(public)/(content)/react/components/slider/demos/edge-alignment/css-modules/index.tsx
@@ -8,7 +8,7 @@ export default function EdgeAlignedThumb() {
       <Slider.Control className={styles.Control}>
         <Slider.Track className={styles.Track}>
           <Slider.Indicator className={styles.Indicator} />
-          <Slider.Thumb className={styles.Thumb} />
+          <Slider.Thumb getAriaLabel={() => 'edge-aligned-thumb'} className={styles.Thumb} />
         </Slider.Track>
       </Slider.Control>
     </Slider.Root>
diff --git a/docs/src/app/(public)/(content)/react/components/slider/demos/edge-alignment/tailwind/index.tsx b/docs/src/app/(public)/(content)/react/components/slider/demos/edge-alignment/tailwind/index.tsx
index d790e370bde..0b160025e4c 100644
--- a/docs/src/app/(public)/(content)/react/components/slider/demos/edge-alignment/tailwind/index.tsx
+++ b/docs/src/app/(public)/(content)/react/components/slider/demos/edge-alignment/tailwind/index.tsx
@@ -7,7 +7,10 @@ export default function EdgeAlignedThumb() {
       <Slider.Control className="flex w-56 touch-none items-center py-3 select-none">
         <Slider.Track className="h-1 w-full rounded bg-gray-200 shadow-[inset_0_0_0_1px] shadow-gray-200 select-none">
           <Slider.Indicator className="rounded bg-gray-700 select-none" />
-          <Slider.Thumb className="size-4 rounded-full bg-white outline outline-1 outline-gray-300 select-none has-[:focus-visible]:outline has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-blue-800" />
+          <Slider.Thumb
+            getAriaLabel={() => 'edge-aligned-thumb'}
+            className="size-4 rounded-full bg-white outline outline-1 outline-gray-300 select-none has-[:focus-visible]:outline has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-blue-800"
+          />
         </Slider.Track>
       </Slider.Control>
     </Slider.Root>
diff --git a/docs/src/app/(public)/(content)/react/components/slider/demos/hero/css-modules/index.tsx b/docs/src/app/(public)/(content)/react/components/slider/demos/hero/css-modules/index.tsx
index 154ebca5468..a17bec44766 100644
--- a/docs/src/app/(public)/(content)/react/components/slider/demos/hero/css-modules/index.tsx
+++ b/docs/src/app/(public)/(content)/react/components/slider/demos/hero/css-modules/index.tsx
@@ -8,7 +8,7 @@ export default function ExampleSlider() {
       <Slider.Control className={styles.Control}>
         <Slider.Track className={styles.Track}>
           <Slider.Indicator className={styles.Indicator} />
-          <Slider.Thumb className={styles.Thumb} />
+          <Slider.Thumb getAriaLabel={() => 'slider-thumb'} className={styles.Thumb} />
         </Slider.Track>
       </Slider.Control>
     </Slider.Root>
diff --git a/docs/src/app/(public)/(content)/react/components/slider/demos/hero/tailwind/index.tsx b/docs/src/app/(public)/(content)/react/components/slider/demos/hero/tailwind/index.tsx
index 7ed30d5626f..18214bae9ab 100644
--- a/docs/src/app/(public)/(content)/react/components/slider/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(public)/(content)/react/components/slider/demos/hero/tailwind/index.tsx
@@ -7,7 +7,10 @@ export default function ExampleSlider() {
       <Slider.Control className="flex w-56 touch-none items-center py-3 select-none">
         <Slider.Track className="h-1 w-full rounded bg-gray-200 shadow-[inset_0_0_0_1px] shadow-gray-200 select-none">
           <Slider.Indicator className="rounded bg-gray-700 select-none" />
-          <Slider.Thumb className="size-4 rounded-full bg-white outline outline-1 outline-gray-300 select-none has-[:focus-visible]:outline has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-blue-800" />
+          <Slider.Thumb
+            getAriaLabel={() => 'slider-thumb'}
+            className="size-4 rounded-full bg-white outline outline-1 outline-gray-300 select-none has-[:focus-visible]:outline has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-blue-800"
+          />
         </Slider.Track>
       </Slider.Control>
     </Slider.Root>
diff --git a/docs/src/app/(public)/(content)/react/components/slider/demos/range-slider/css-modules/index.tsx b/docs/src/app/(public)/(content)/react/components/slider/demos/range-slider/css-modules/index.tsx
index f4cf662b096..c94f1f34fc9 100644
--- a/docs/src/app/(public)/(content)/react/components/slider/demos/range-slider/css-modules/index.tsx
+++ b/docs/src/app/(public)/(content)/react/components/slider/demos/range-slider/css-modules/index.tsx
@@ -8,8 +8,16 @@ export default function RangeSlider() {
       <Slider.Control className={styles.Control}>
         <Slider.Track className={styles.Track}>
           <Slider.Indicator className={styles.Indicator} />
-          <Slider.Thumb index={0} className={styles.Thumb} />
-          <Slider.Thumb index={1} className={styles.Thumb} />
+          <Slider.Thumb
+            getAriaLabel={(index) => `range-slider-thumb-${index}`}
+            index={0}
+            className={styles.Thumb}
+          />
+          <Slider.Thumb
+            getAriaLabel={(index) => `range-slider-thumb-${index}`}
+            index={1}
+            className={styles.Thumb}
+          />
         </Slider.Track>
       </Slider.Control>
     </Slider.Root>
diff --git a/docs/src/app/(public)/(content)/react/components/slider/demos/range-slider/tailwind/index.tsx b/docs/src/app/(public)/(content)/react/components/slider/demos/range-slider/tailwind/index.tsx
index bd4fbcb8141..6a50ad93d77 100644
--- a/docs/src/app/(public)/(content)/react/components/slider/demos/range-slider/tailwind/index.tsx
+++ b/docs/src/app/(public)/(content)/react/components/slider/demos/range-slider/tailwind/index.tsx
@@ -9,10 +9,12 @@ export default function RangeSlider() {
           <Slider.Indicator className="rounded bg-gray-700 select-none" />
           <Slider.Thumb
             index={0}
+            aria-label="range-slider"
             className="size-4 rounded-full bg-white outline outline-1 outline-gray-300 select-none has-[:focus-visible]:outline has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-blue-800"
           />
           <Slider.Thumb
             index={1}
+            aria-label="range-slider"
             className="size-4 rounded-full bg-white outline outline-1 outline-gray-300 select-none has-[:focus-visible]:outline has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-blue-800"
           />
         </Slider.Track>