fix: adding aria-labelled by only when label is present

Author: DiljohnSingh

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

@@ -1,10 +1,13 @@
-import { ReactElement, useRef } from "react";
+import { ReactElement, useMemo, useRef } from "react";
 import { SliderContainerProps } from "../../typings/SliderProps";
+
 import { createHandleRender } from "../utils/createHandleRender";
 import { getStyleProp, isVertical, maxProp, minProp, stepProp } from "../utils/prop-utils";
 import { useMarks } from "../utils/useMarks";
 import { useNumber } from "../utils/useNumber";
+import { getSliderLabel } from "../utils/helpers";
 import { useOnChangeDebounced } from "../utils/useOnChangeDebounced";
+
 import { Slider as SliderComponent } from "./Slider";
 
 export function Container(props: SliderContainerProps): ReactElement {
@@ -45,6 +48,8 @@ function InnerContainer(props: InnerContainerProps): ReactElement {
     });
     // Label generated by systemProperty has the format: {widgetId}-label
     const ariaLabelledByForHandle = `${props.id}-label`;
+    const sliderLabel = getSliderLabel(props.id);
+    const hasLabel = useMemo(() => Boolean(sliderLabel), [sliderLabel]);
 
     return (
         <SliderComponent
@@ -61,7 +66,7 @@ function InnerContainer(props: InnerContainerProps): ReactElement {
             step={props.step}
             onChange={onChange}
             marks={marks}
-            ariaLabelledByForHandle={ariaLabelledByForHandle}
+            ariaLabelledByForHandle={hasLabel ? ariaLabelledByForHandle : undefined}
             handleRender={handleRender}
             ref={sliderRef}
         />

packages/pluggableWidgets/slider-web/src/utils/helpers.ts

@@ -0,0 +1 @@
+export const getSliderLabel = (sliderId: string): Element | null => document.querySelector(`label[for="${sliderId}"]`);