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; }; /**