[docs] Add demo aria labels (#5084)

aarongarciah · web-flow · commit 70524bdf5eb9 · 2026-06-19T15:58:33.000+02:00
diff --git a/docs/scripts/generateLlmTxt/__snapshots__/mdxToMarkdown.test.mjs.snap b/docs/scripts/generateLlmTxt/__snapshots__/mdxToMarkdown.test.mjs.snap
@@ -977,7 +977,10 @@ export default function ExampleDirectionProvider() {
           <Slider.Control className="flex w-56 touch-none items-center py-3 select-none">
             <Slider.Track className="h-1 w-full bg-neutral-200 select-none dark:bg-neutral-800">
               <Slider.Indicator className="bg-neutral-950 select-none dark:bg-white" />
-              <Slider.Thumb className="size-4 border border-neutral-950 bg-white select-none has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-neutral-950 dark:has-[:focus-visible]:outline-white dark:border-white dark:bg-neutral-950" />
+              <Slider.Thumb
+                aria-label="Volume"
+                className="size-4 border border-neutral-950 bg-white select-none has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-neutral-950 dark:has-[:focus-visible]:outline-white dark:border-white dark:bg-neutral-950"
+              />
             </Slider.Track>
           </Slider.Control>
         </Slider.Root>
@@ -1067,7 +1070,7 @@ export default function ExampleDirectionProvider() {
           <Slider.Control className={styles.Control}>
             <Slider.Track className={styles.Track}>
               <Slider.Indicator className={styles.Indicator} />
-              <Slider.Thumb className={styles.Thumb} />
+              <Slider.Thumb aria-label="Volume" className={styles.Thumb} />
             </Slider.Track>
           </Slider.Control>
         </Slider.Root>
diff --git a/docs/src/app/(docs)/react/components/otp-field/demos/alphanumeric/css-modules/index.tsx b/docs/src/app/(docs)/react/components/otp-field/demos/alphanumeric/css-modules/index.tsx
@@ -24,7 +24,7 @@ export default function OTPFieldAlphanumericDemo() {
           <OTPField.Input
             key={index}
             className={styles.Input}
-            aria-label={`Character ${index + 1} of ${CODE_LENGTH}`}
+            aria-label={index === 0 ? undefined : `Character ${index + 1} of ${CODE_LENGTH}`}
           />
         ))}
       </OTPField.Root>
diff --git a/docs/src/app/(docs)/react/components/otp-field/demos/alphanumeric/tailwind/index.tsx b/docs/src/app/(docs)/react/components/otp-field/demos/alphanumeric/tailwind/index.tsx
@@ -23,7 +23,7 @@ export default function OTPFieldAlphanumericDemo() {
           <OTPField.Input
             key={index}
             className="m-0 h-10 w-10 rounded-none border border-neutral-950 bg-white dark:bg-neutral-950 text-center font-inherit text-base font-normal text-neutral-950 focus:outline-2 focus:-outline-offset-1 focus:outline-neutral-950 dark:focus:outline-white dark:border-white dark:text-white"
-            aria-label={`Character ${index + 1} of ${CODE_LENGTH}`}
+            aria-label={index === 0 ? undefined : `Character ${index + 1} of ${CODE_LENGTH}`}
           />
         ))}
       </OTPField.Root>
diff --git a/docs/src/app/(docs)/react/components/otp-field/demos/custom-sanitize/css-modules/index.tsx b/docs/src/app/(docs)/react/components/otp-field/demos/custom-sanitize/css-modules/index.tsx
@@ -56,7 +56,7 @@ export default function OTPFieldCustomNormalizeDemo() {
           <OTPField.Input
             key={index}
             className={`${styles.Input} ${activeInvalidIndex === index ? invalidClassName : ''}`.trim()}
-            aria-label={`Character ${index + 1} of ${CODE_LENGTH}`}
+            aria-label={index === 0 ? undefined : `Character ${index + 1} of ${CODE_LENGTH}`}
             onFocus={() => {
               setFocusedIndex(index);
             }}
diff --git a/docs/src/app/(docs)/react/components/otp-field/demos/focused-placeholder/css-modules/index.tsx b/docs/src/app/(docs)/react/components/otp-field/demos/focused-placeholder/css-modules/index.tsx
@@ -24,7 +24,7 @@ export default function OTPFieldFocusedPlaceholderDemo() {
             key={index}
             className={styles.Input}
             placeholder="•"
-            aria-label={`Character ${index + 1} of ${CODE_LENGTH}`}
+            aria-label={index === 0 ? undefined : `Character ${index + 1} of ${CODE_LENGTH}`}
           />
         ))}
       </OTPField.Root>
diff --git a/docs/src/app/(docs)/react/components/otp-field/demos/focused-placeholder/tailwind/index.tsx b/docs/src/app/(docs)/react/components/otp-field/demos/focused-placeholder/tailwind/index.tsx
@@ -23,7 +23,7 @@ export default function OTPFieldFocusedPlaceholderDemo() {
             key={index}
             className="m-0 h-10 w-10 rounded-none border border-neutral-950 bg-white dark:bg-neutral-950 text-center font-inherit text-base font-normal text-neutral-950 placeholder:text-neutral-500 focus:outline-2 focus:-outline-offset-1 focus:outline-neutral-950 dark:focus:outline-white focus:placeholder:text-transparent dark:border-white dark:text-white dark:placeholder:text-neutral-400"
             placeholder="•"
-            aria-label={`Character ${index + 1} of ${CODE_LENGTH}`}
+            aria-label={index === 0 ? undefined : `Character ${index + 1} of ${CODE_LENGTH}`}
           />
         ))}
       </OTPField.Root>
diff --git a/docs/src/app/(docs)/react/components/otp-field/demos/grouped/css-modules/index.tsx b/docs/src/app/(docs)/react/components/otp-field/demos/grouped/css-modules/index.tsx
@@ -18,7 +18,7 @@ export default function OTPFieldGroupedDemo() {
             <OTPField.Input
               key={index}
               className={styles.Input}
-              aria-label={`Character ${index + 1} of ${OTP_LENGTH}`}
+              aria-label={index === 0 ? undefined : `Character ${index + 1} of ${OTP_LENGTH}`}
             />
           ))}
         </div>
diff --git a/docs/src/app/(docs)/react/components/otp-field/demos/grouped/tailwind/index.tsx b/docs/src/app/(docs)/react/components/otp-field/demos/grouped/tailwind/index.tsx
@@ -17,7 +17,7 @@ export default function OTPFieldGroupedDemo() {
             <OTPField.Input
               key={index}
               className="m-0 h-10 w-10 rounded-none border border-neutral-950 bg-white dark:bg-neutral-950 text-center font-inherit text-base font-normal text-neutral-950 focus:outline-2 focus:-outline-offset-1 focus:outline-neutral-950 dark:focus:outline-white dark:border-white dark:text-white"
-              aria-label={`Character ${index + 1} of ${OTP_LENGTH}`}
+              aria-label={index === 0 ? undefined : `Character ${index + 1} of ${OTP_LENGTH}`}
             />
           ))}
         </div>
diff --git a/docs/src/app/(docs)/react/components/otp-field/demos/hero/css-modules/index.tsx b/docs/src/app/(docs)/react/components/otp-field/demos/hero/css-modules/index.tsx
@@ -23,7 +23,7 @@ export default function ExampleOTPField() {
           <OTPField.Input
             key={index}
             className={styles.Input}
-            aria-label={`Character ${index + 1} of ${OTP_LENGTH}`}
+            aria-label={index === 0 ? undefined : `Character ${index + 1} of ${OTP_LENGTH}`}
           />
         ))}
       </OTPField.Root>
diff --git a/docs/src/app/(docs)/react/components/otp-field/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/otp-field/demos/hero/tailwind/index.tsx
@@ -22,7 +22,7 @@ export default function ExampleOTPField() {
           <OTPField.Input
             key={index}
             className="m-0 h-10 w-10 rounded-none border border-neutral-950 bg-white dark:bg-neutral-950 text-center font-inherit text-base font-normal text-neutral-950 focus:outline-2 focus:-outline-offset-1 focus:outline-neutral-950 dark:focus:outline-white dark:border-white dark:text-white"
-            aria-label={`Character ${index + 1} of ${OTP_LENGTH}`}
+            aria-label={index === 0 ? undefined : `Character ${index + 1} of ${OTP_LENGTH}`}
           />
         ))}
       </OTPField.Root>
diff --git a/docs/src/app/(docs)/react/components/otp-field/demos/password/css-modules/index.tsx b/docs/src/app/(docs)/react/components/otp-field/demos/password/css-modules/index.tsx
@@ -24,7 +24,7 @@ export default function OTPFieldPasswordDemo() {
           <OTPField.Input
             key={index}
             className={styles.Input}
-            aria-label={`Character ${index + 1} of ${CODE_LENGTH}`}
+            aria-label={index === 0 ? undefined : `Character ${index + 1} of ${CODE_LENGTH}`}
           />
         ))}
       </OTPField.Root>
diff --git a/docs/src/app/(docs)/react/components/otp-field/demos/password/tailwind/index.tsx b/docs/src/app/(docs)/react/components/otp-field/demos/password/tailwind/index.tsx
@@ -23,7 +23,7 @@ export default function OTPFieldPasswordDemo() {
           <OTPField.Input
             key={index}
             className="m-0 h-10 w-10 rounded-none border border-neutral-950 bg-white dark:bg-neutral-950 text-center font-inherit text-base font-normal text-neutral-950 focus:outline-2 focus:-outline-offset-1 focus:outline-neutral-950 dark:focus:outline-white dark:border-white dark:text-white"
-            aria-label={`Character ${index + 1} of ${CODE_LENGTH}`}
+            aria-label={index === 0 ? undefined : `Character ${index + 1} of ${CODE_LENGTH}`}
           />
         ))}
       </OTPField.Root>
diff --git a/docs/src/app/(docs)/react/utils/direction-provider/demos/hero/css-modules/index.tsx b/docs/src/app/(docs)/react/utils/direction-provider/demos/hero/css-modules/index.tsx
@@ -10,7 +10,7 @@ export default function ExampleDirectionProvider() {
           <Slider.Control className={styles.Control}>
             <Slider.Track className={styles.Track}>
               <Slider.Indicator className={styles.Indicator} />
-              <Slider.Thumb className={styles.Thumb} />
+              <Slider.Thumb aria-label="Volume" className={styles.Thumb} />
             </Slider.Track>
           </Slider.Control>
         </Slider.Root>
diff --git a/docs/src/app/(docs)/react/utils/direction-provider/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/utils/direction-provider/demos/hero/tailwind/index.tsx
@@ -9,7 +9,10 @@ export default function ExampleDirectionProvider() {
           <Slider.Control className="flex w-56 touch-none items-center py-3 select-none">
             <Slider.Track className="h-1 w-full bg-neutral-200 select-none dark:bg-neutral-800">
               <Slider.Indicator className="bg-neutral-950 select-none dark:bg-white" />
-              <Slider.Thumb className="size-4 border border-neutral-950 bg-white select-none has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-neutral-950 dark:has-[:focus-visible]:outline-white dark:border-white dark:bg-neutral-950" />
+              <Slider.Thumb
+                aria-label="Volume"
+                className="size-4 border border-neutral-950 bg-white select-none has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-neutral-950 dark:has-[:focus-visible]:outline-white dark:border-white dark:bg-neutral-950"
+              />
             </Slider.Track>
           </Slider.Control>
         </Slider.Root>
