fix: accessibility issue with slider ariaLabelledBy

Author: DiljohnSingh

packages/pluggableWidgets/slider-web/src/components/Container.tsx

@@ -43,6 +43,8 @@ function InnerContainer(props: InnerContainerProps): ReactElement {
         min: props.min,
         max: props.max
     });
+    // Label generated by systemProperty has the format: {widgetId}-label
+    const ariaLabelledByForHandle = `${props.id}-label`;
 
     return (
         <SliderComponent
@@ -59,6 +61,7 @@ function InnerContainer(props: InnerContainerProps): ReactElement {
             step={props.step}
             onChange={onChange}
             marks={marks}
+            ariaLabelledByForHandle={ariaLabelledByForHandle}
             handleRender={handleRender}
             ref={sliderRef}
         />

packages/pluggableWidgets/slider-web/src/components/__tests__/Slider.spec.tsx

@@ -8,7 +8,8 @@ describe("Slider", () => {
     const defaultSliderProps: SliderProps = {
         min: -100,
         max: 100,
-        step: 10
+        step: 10,
+        ariaLabelledByForHandle: "test-slider"
     };
 
     function renderSlider(props?: Partial<SliderProps>): ReturnType<typeof render> {

packages/pluggableWidgets/slider-web/src/components/__tests__/__snapshots__/Slider.spec.tsx.snap

@@ -20,6 +20,7 @@ exports[`Slider renders horizontal Slider correctly 1`] = `
       />
       <div
         aria-disabled="false"
+        aria-labelledby="test-slider"
         aria-orientation="horizontal"
         aria-valuemax="100"
         aria-valuemin="-100"
@@ -75,6 +76,7 @@ exports[`Slider renders markers correctly 1`] = `
       </div>
       <div
         aria-disabled="false"
+        aria-labelledby="test-slider"
         aria-orientation="horizontal"
         aria-valuemax="100"
         aria-valuemin="-100"
@@ -143,6 +145,7 @@ exports[`Slider renders vertical Slider correctly 1`] = `
       />
       <div
         aria-disabled="false"
+        aria-labelledby="test-slider"
         aria-orientation="vertical"
         aria-valuemax="100"
         aria-valuemin="-100"