diff --git a/apps/website/screens/components/slider/code/SliderCodePage.tsx b/apps/website/screens/components/slider/code/SliderCodePage.tsx
index 1b8e05a4b7..c063cb414a 100644
--- a/apps/website/screens/components/slider/code/SliderCodePage.tsx
+++ b/apps/website/screens/components/slider/code/SliderCodePage.tsx
@@ -213,6 +213,16 @@ const sections = [
Reference to the component. |
- |
+
+ | ariaLabel |
+
+ string
+ |
+
+ Specifies a string to be used as the name for the slider element when no label is provided.
+ |
+ 'Slider' |
+
),
diff --git a/packages/lib/src/slider/Slider.test.tsx b/packages/lib/src/slider/Slider.test.tsx
index dda72ef77e..41bf7ca366 100644
--- a/packages/lib/src/slider/Slider.test.tsx
+++ b/packages/lib/src/slider/Slider.test.tsx
@@ -21,6 +21,15 @@ describe("Slider component tests", () => {
const sliderId = getByText("label").getAttribute("id");
expect(getByRole("slider").getAttribute("aria-labelledby")).toBe(sliderId);
expect(getByRole("slider").getAttribute("aria-orientation")).toBe("horizontal");
+ expect(getByRole("slider").getAttribute("aria-label")).toBeNull();
+ });
+
+ test("Renders with correct error aria label", () => {
+ const { getByRole } = render(
+
+ );
+ const slider = getByRole("slider");
+ expect(slider.getAttribute("aria-label")).toBe("Example aria label");
});
test("Slider renders with correct initial value when it is uncontrolled", () => {
diff --git a/packages/lib/src/slider/Slider.tsx b/packages/lib/src/slider/Slider.tsx
index f0e868b79d..741a49a23d 100644
--- a/packages/lib/src/slider/Slider.tsx
+++ b/packages/lib/src/slider/Slider.tsx
@@ -248,6 +248,7 @@ const DxcSlider = forwardRef(
labelFormatCallback,
margin,
size = "fillParent",
+ ariaLabel = "Slider",
},
ref
): JSX.Element => {
@@ -319,9 +320,11 @@ const DxcSlider = forwardRef(
return (
-
+ {label && (
+
+ )}
{helperText}
{showLimitsValues && {minLabel}}
@@ -334,11 +337,12 @@ const DxcSlider = forwardRef(
max={maxValue}
step={step}
disabled={disabled}
- aria-labelledby={labelId}
+ aria-labelledby={label ? labelId : undefined}
aria-orientation="horizontal"
aria-valuemax={maxValue}
aria-valuemin={minValue}
aria-valuenow={value != null && value >= 0 ? value : innerValue}
+ aria-label={label ? undefined : ariaLabel}
onChange={handleSliderChange}
onMouseUp={handleSliderOnChangeCommitted}
onMouseDown={handleSliderDragging}
diff --git a/packages/lib/src/slider/types.ts b/packages/lib/src/slider/types.ts
index 4bc4a4d1fe..56b65570ce 100644
--- a/packages/lib/src/slider/types.ts
+++ b/packages/lib/src/slider/types.ts
@@ -73,6 +73,10 @@ type Props = {
* Size of the component.
*/
size?: "medium" | "large" | "fillParent";
+ /**
+ * Specifies a string to be used as the name for the slider element when no `label` is provided.
+ */
+ ariaLabel?: string;
};
/**