diff --git a/packages/pluggableWidgets/slider-web/package.json b/packages/pluggableWidgets/slider-web/package.json
index 1e2f6bae85..b5ab7ceed4 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 28eb9859e0..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 {
@@ -43,6 +46,10 @@ 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`;
+ const sliderLabel = getSliderLabel(props.id);
+ const hasLabel = useMemo(() => Boolean(sliderLabel), [sliderLabel]);
return (
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): ReturnType {
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`] = `
/>
-
+
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}"]`);