Merge branch 'master' into jialecl-switch-ariaLabel

Author: Mil4n0r

apps/website/screens/components/select/code/SelectCodePage.tsx

@@ -268,6 +268,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 select element when no <Code>label</Code> is provided.
+            </td>
+            <td>'Select'</td>
+          </tr>
         </tbody>
       </DxcTable>
     ),

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/select/Select.test.tsx

@@ -114,12 +114,21 @@ describe("Select component tests", () => {
     expect(select.getAttribute("aria-labelledby")).toBe(label.id);
     expect(select.getAttribute("aria-activedescendant")).toBeNull();
     expect(select.getAttribute("aria-invalid")).toBe("false");
+    expect(select.getAttribute("aria-label")).toBeNull();
     await userEvent.click(select);
     const list = getByRole("listbox");
     expect(select.getAttribute("aria-controls")).toBe(list.id);
     expect(list.getAttribute("aria-multiselectable")).toBe("false");
   });
 
+  test("Renders with correct error aria label", () => {
+    const { getByRole } = render(
+      <DxcSelect ariaLabel="Example aria label" placeholder="Example" options={singleOptions} />
+    );
+    const select = getByRole("combobox");
+    expect(select.getAttribute("aria-label")).toBe("Example aria label");
+  });
+
   test("Single selection: Renders with correct default value", async () => {
     const { getByText, getByRole, getAllByRole, queryByRole, container } = render(
       <DxcSelect label="test-select-label" name="test" defaultValue="4" options={singleOptions} />

packages/lib/src/select/Select.tsx

@@ -52,6 +52,7 @@ const DxcSelect = forwardRef<RefType, SelectPropsType>(
       margin,
       size = "medium",
       tabIndex = 0,
+      ariaLabel = "Select",
     },
     ref
   ): JSX.Element => {
@@ -327,6 +328,7 @@ const DxcSelect = forwardRef<RefType, SelectPropsType>(
                 aria-invalid={!!error}
                 aria-errormessage={error ? errorId : undefined}
                 aria-required={!disabled && !optional}
+                aria-label={label ? undefined : ariaLabel}
               >
                 {multiple && Array.isArray(selectedOption) && selectedOption.length > 0 && (
                   <SelectionIndicator>

packages/lib/src/select/types.ts

@@ -94,6 +94,10 @@ type CommonProps = {
    * Value of the tabindex attribute.
    */
   tabIndex?: number;
+  /**
+   * Specifies a string to be used as the name for the select element when no `label` is provided.
+   */
+  ariaLabel?: string;
 };
 
 type SingleSelect = CommonProps & {

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