Merge pull request #2141 from dxc-technology/jialecl-slider-ariaLabel

ariaLabel prop added to slider component

Author: GomezIvann

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'</td>
+          </tr>
         </tbody>
       </DxcTable>
     ),

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", () => {

packages/lib/src/slider/Slider.tsx

@@ -248,6 +248,7 @@ const DxcSlider = forwardRef<RefType, SliderPropsType>(
       labelFormatCallback,
       margin,
       size = "fillParent",
+      ariaLabel = "Slider",
     },
     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}

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