From d2e9bcb030ab170dec88a113f000fcb4243da476 Mon Sep 17 00:00:00 2001
From: Jialecl <jialestrabajos@gmail.com>
Date: Tue, 14 Jan 2025 14:38:43 +0100
Subject: [PATCH 1/2] ariaLabel prop added to slider component

---
 .../components/slider/code/SliderCodePage.tsx        | 10 ++++++++++
 packages/lib/src/slider/Slider.test.tsx              |  9 +++++++++
 packages/lib/src/slider/Slider.tsx                   | 12 ++++++++----
 packages/lib/src/slider/types.ts                     |  4 ++++
 4 files changed, 31 insertions(+), 4 deletions(-)

diff --git a/apps/website/screens/components/slider/code/SliderCodePage.tsx b/apps/website/screens/components/slider/code/SliderCodePage.tsx
index 1b8e05a4b7..fce914cfa5 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 = [
             <td>Reference to the component.</td>
             <td>-</td>
           </tr>
+          <tr>
+            <td>ariaLabel</td>
+            <td>
+              <TableCode>string</TableCode>
+            </td>
+            <td>
+              Specifies a string to be used as the name for the slider element when no <Code>label</Code> is provided.
+            </td>
+            <td>'Slider input'</td>
+          </tr>
         </tbody>
       </DxcTable>
     ),
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(
+      <DxcSlider ariaLabel="Example aria label" minValue={0} maxValue={100} showLimitsValues />
+    );
+    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..6027f4c2c7 100644
--- a/packages/lib/src/slider/Slider.tsx
+++ b/packages/lib/src/slider/Slider.tsx
@@ -248,6 +248,7 @@ const DxcSlider = forwardRef<RefType, SliderPropsType>(
       labelFormatCallback,
       margin,
       size = "fillParent",
+      ariaLabel = "Slider input",
     },
     ref
   ): JSX.Element => {
@@ -319,9 +320,11 @@ const DxcSlider = forwardRef<RefType, SliderPropsType>(
     return (
       <ThemeProvider theme={colorsTheme.slider}>
         <Container margin={margin} size={size} ref={ref}>
-          <Label id={labelId} disabled={disabled}>
-            {label}
-          </Label>
+          {label && (
+            <Label id={labelId} disabled={disabled}>
+              {label}
+            </Label>
+          )}
           <HelperText disabled={disabled}>{helperText}</HelperText>
           <SliderContainer>
             {showLimitsValues && <MinLabelContainer disabled={disabled}>{minLabel}</MinLabelContainer>}
@@ -334,11 +337,12 @@ const DxcSlider = forwardRef<RefType, SliderPropsType>(
                 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;
 };
 
 /**

From 211f80874e9e011b372aa9c1f8038e80e676a582 Mon Sep 17 00:00:00 2001
From: Jialecl <jialestrabajos@gmail.com>
Date: Wed, 15 Jan 2025 11:15:23 +0100
Subject: [PATCH 2/2] removed input from ariaLabel default value

---
 apps/website/screens/components/slider/code/SliderCodePage.tsx | 2 +-
 packages/lib/src/slider/Slider.tsx                             | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/website/screens/components/slider/code/SliderCodePage.tsx b/apps/website/screens/components/slider/code/SliderCodePage.tsx
index fce914cfa5..c063cb414a 100644
--- a/apps/website/screens/components/slider/code/SliderCodePage.tsx
+++ b/apps/website/screens/components/slider/code/SliderCodePage.tsx
@@ -221,7 +221,7 @@ const sections = [
             <td>
               Specifies a string to be used as the name for the slider element when no <Code>label</Code> is provided.
             </td>
-            <td>'Slider input'</td>
+            <td>'Slider'</td>
           </tr>
         </tbody>
       </DxcTable>
diff --git a/packages/lib/src/slider/Slider.tsx b/packages/lib/src/slider/Slider.tsx
index 6027f4c2c7..741a49a23d 100644
--- a/packages/lib/src/slider/Slider.tsx
+++ b/packages/lib/src/slider/Slider.tsx
@@ -248,7 +248,7 @@ const DxcSlider = forwardRef<RefType, SliderPropsType>(
       labelFormatCallback,
       margin,
       size = "fillParent",
-      ariaLabel = "Slider input",
+      ariaLabel = "Slider",
     },
     ref
   ): JSX.Element => {