From e7735e7c545e1f1ce181310b465c57f8ad90a03b 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] fix: accessibility issue with slider ariaLabelledBy

---
 packages/pluggableWidgets/slider-web/package.json              | 2 +-
 .../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 +++
 packages/pluggableWidgets/slider-web/src/package.xml           | 2 +-
 5 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/packages/pluggableWidgets/slider-web/package.json b/packages/pluggableWidgets/slider-web/package.json
index 855a907417..30510b597d 100644
--- a/packages/pluggableWidgets/slider-web/package.json
+++ b/packages/pluggableWidgets/slider-web/package.json
@@ -1,7 +1,7 @@
 {
     "name": "@mendix/slider-web",
     "widgetName": "Slider",
-    "version": "2.1.4",
+    "version": "2.1.5",
     "description": "Change a number value using a slider",
     "copyright": "© Mendix Technology BV 2025. All rights reserved.",
     "license": "Apache-2.0",
diff --git a/packages/pluggableWidgets/slider-web/src/components/Container.tsx b/packages/pluggableWidgets/slider-web/src/components/Container.tsx
index 0d35df9a6f..2506f77824 100644
--- a/packages/pluggableWidgets/slider-web/src/components/Container.tsx
+++ b/packages/pluggableWidgets/slider-web/src/components/Container.tsx
@@ -42,6 +42,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
@@ -58,6 +60,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"
diff --git a/packages/pluggableWidgets/slider-web/src/package.xml b/packages/pluggableWidgets/slider-web/src/package.xml
index 4b58071280..03f67a46f7 100644
--- a/packages/pluggableWidgets/slider-web/src/package.xml
+++ b/packages/pluggableWidgets/slider-web/src/package.xml
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8" ?>
 <package xmlns="http://www.mendix.com/package/1.0/">
-    <clientModule name="Slider" version="2.1.4" xmlns="http://www.mendix.com/clientModule/1.0/">
+    <clientModule name="Slider" version="2.1.5" xmlns="http://www.mendix.com/clientModule/1.0/">
         <widgetFiles>
             <widgetFile path="Slider.xml" />
         </widgetFiles>