V2 Slider Test (#296)

* update slider to vitest

* fix: types

* refactor: streamline slider tests by removing unnecessary wait statements

* feat: add SliderLabel component and enhance accessibility

Author: toan-kunaico

libs/components/src/slider/index.ts

@@ -1,4 +1,5 @@
 export { SliderRoot as Root } from "./slider-root";
+export { SliderLabel as Label } from "./slider-label";
 export { SliderTrack as Track } from "./slider-track";
 export { SliderRange as Range } from "./slider-range";
 export { SliderThumb as Thumb } from "./slider-thumb";

libs/components/src/slider/slider-context.ts

@@ -18,6 +18,7 @@ export interface SliderContext {
   thumbType: Signal<ThumbType | undefined>;
   onChange$?: (value: SliderValue) => void;
   onChangeEnd$?: (value: SliderValue) => void;
+  localId: string;
 }
 
 export const sliderContextId = createContextId<SliderContext>("slider-context");

libs/components/src/slider/slider-label.tsx

@@ -0,0 +1,17 @@
+import { type PropsOf, Slot, component$, useContext } from "@qwik.dev/core";
+import { Render } from "../render/render";
+import { sliderContextId } from "./slider-context";
+
+type PublicLabelProps = PropsOf<"span">;
+
+/** Label component for slider that automatically connects to the slider via aria-labelledby */
+export const SliderLabel = component$((props: PublicLabelProps) => {
+  const context = useContext(sliderContextId);
+  const labelId = `${context.localId}-label`;
+
+  return (
+    <Render {...props} id={labelId} data-qds-slider-label fallback="span">
+      <Slot />
+    </Render>
+  );
+});

libs/components/src/slider/slider-root.tsx

@@ -7,6 +7,7 @@ import {
   component$,
   useComputed$,
   useContextProvider,
+  useId,
   useSignal,
   useStyles$,
   useTask$
@@ -50,6 +51,9 @@ export const SliderRoot = component$<PublicRootProps>((props) => {
     ...divProps
   } = props;
 
+  const localId = useId();
+  const labelId = `${localId}-label`;
+
   const isRangeSignal = useSignal(isRange);
 
   const valueSignal = useSignal<SliderValue>(
@@ -143,7 +147,8 @@ export const SliderRoot = component$<PublicRootProps>((props) => {
     calculateValue,
     onChange$,
     onChangeEnd$,
-    thumbType: useSignal<ThumbType | undefined>(undefined)
+    thumbType: useSignal<ThumbType | undefined>(undefined),
+    localId
   };
 
   useContextProvider(sliderContextId, context);
@@ -163,6 +168,7 @@ export const SliderRoot = component$<PublicRootProps>((props) => {
       aria-valuemin={min.value}
       aria-valuemax={max.value}
       aria-valuenow={ariaValueNow.value}
+      aria-labelledby={labelId}
     >
       <Slot />
     </div>

libs/components/src/slider/slider-thumb.tsx

@@ -184,6 +184,8 @@ export const SliderThumb = component$((props: PublicThumbProps) => {
     }
   });
 
+  const thumbLabelId = `${context.localId}-label`;
+
   return (
     <div
       {...rest}
@@ -209,6 +211,7 @@ export const SliderThumb = component$((props: PublicThumbProps) => {
       aria-valuemax={ariaValueMax.value}
       aria-valuenow={ariaValueNow.value}
       aria-disabled={context.disabled.value}
+      aria-labelledby={thumbLabelId}
     >
       <Slot />
     </div>