From 7a51a26f452d496bef4abcdb463e7c8dacc5b6c8 Mon Sep 17 00:00:00 2001
From: Diljohn Singh <diljohn.chauhan@gmail.com>
Date: Fri, 14 Nov 2025 12:21:47 +0100
Subject: [PATCH 1/3] fix: accessibility issue with slider ariaLabelledBy

---
 .../pluggableWidgets/slider-web/src/components/Container.tsx   | 3 +++
 .../slider-web/src/components/__tests__/Slider.spec.tsx        | 3 ++-
 .../components/__tests__/__snapshots__/Slider.spec.tsx.snap    | 3 +++
 3 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/packages/pluggableWidgets/slider-web/src/components/Container.tsx b/packages/pluggableWidgets/slider-web/src/components/Container.tsx
index 28eb9859e0..c64cbe7461 100644
--- a/packages/pluggableWidgets/slider-web/src/components/Container.tsx
+++ b/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}
         />
diff --git a/packages/pluggableWidgets/slider-web/src/components/__tests__/Slider.spec.tsx b/packages/pluggableWidgets/slider-web/src/components/__tests__/Slider.spec.tsx
index 138ece3641..16ceedeb80 100644
--- a/packages/pluggableWidgets/slider-web/src/components/__tests__/Slider.spec.tsx
+++ b/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> {
diff --git a/packages/pluggableWidgets/slider-web/src/components/__tests__/__snapshots__/Slider.spec.tsx.snap b/packages/pluggableWidgets/slider-web/src/components/__tests__/__snapshots__/Slider.spec.tsx.snap
index 2470d1be2c..02f3286b92 100644
--- a/packages/pluggableWidgets/slider-web/src/components/__tests__/__snapshots__/Slider.spec.tsx.snap
+++ b/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"

From fc4af9db60f13e72cfec51d2b3797b155c7a67f0 Mon Sep 17 00:00:00 2001
From: Diljohn Singh <diljohn.chauhan@gmail.com>
Date: Wed, 7 Jan 2026 17:24:13 +0100
Subject: [PATCH 2/3] fix: adding aria-labelled by only when label is present

---
 .../slider-web/src/components/Container.tsx              | 9 +++++++--
 .../pluggableWidgets/slider-web/src/utils/helpers.ts     | 1 +
 2 files changed, 8 insertions(+), 2 deletions(-)
 create mode 100644 packages/pluggableWidgets/slider-web/src/utils/helpers.ts

diff --git a/packages/pluggableWidgets/slider-web/src/components/Container.tsx b/packages/pluggableWidgets/slider-web/src/components/Container.tsx
index c64cbe7461..b26135235b 100644
--- a/packages/pluggableWidgets/slider-web/src/components/Container.tsx
+++ b/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}
         />
diff --git a/packages/pluggableWidgets/slider-web/src/utils/helpers.ts b/packages/pluggableWidgets/slider-web/src/utils/helpers.ts
new file mode 100644
index 0000000000..df4a690418
--- /dev/null
+++ b/packages/pluggableWidgets/slider-web/src/utils/helpers.ts
@@ -0,0 +1 @@
+export const getSliderLabel = (sliderId: string): Element | null => document.querySelector(`label[for="${sliderId}"]`);

From 6921b58537fd7a9367b15294969535bcd4369a86 Mon Sep 17 00:00:00 2001
From: gjulivan <grandjulivan@gmail.com>
Date: Wed, 18 Feb 2026 13:33:08 +0100
Subject: [PATCH 3/3] chore(slider-web): add changelog

---
 packages/pluggableWidgets/slider-web/CHANGELOG.md | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/pluggableWidgets/slider-web/CHANGELOG.md b/packages/pluggableWidgets/slider-web/CHANGELOG.md
index 41845d9a13..3ea9e551ef 100644
--- a/packages/pluggableWidgets/slider-web/CHANGELOG.md
+++ b/packages/pluggableWidgets/slider-web/CHANGELOG.md
@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Fixed
+
+- We fixed an accessibility issues with slider handle not linked to the label. Fix contributed by @DiljohnSingh.
+
 ## [3.0.1] - 2026-02-10
 
 ### Added