Merge pull request #2143 from dxc-technology/jialecl-switch-ariaLabel

ariaLabel prop added to switch component

Author: Mil4n0r

apps/website/screens/components/switch/code/SwitchCodePage.tsx

@@ -152,6 +152,14 @@ 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 switch element when no `label` is provided.</td>
+            <td>'Switch'</td>
+          </tr>
         </tbody>
       </DxcTable>
     ),

packages/lib/src/switch/Switch.test.tsx

@@ -101,6 +101,13 @@ describe("Switch component tests", () => {
     const label = getByText("Default label");
     expect(switchEl.getAttribute("aria-labelledby")).toBe(label.id);
     expect(switchEl.getAttribute("aria-checked")).toBe("false");
+    expect(switchEl.getAttribute("aria-label")).toBeNull();
+  });
+
+  test("Renders with correct aria-label", () => {
+    const { getByRole } = render(<DxcSwitch ariaLabel="Example aria label" />);
+    const switchEl = getByRole("switch");
+    expect(switchEl.getAttribute("aria-label")).toBe("Example aria label");
   });
 
   test("Renders disabled switch correctly", () => {

packages/lib/src/switch/Switch.tsx

@@ -20,6 +20,7 @@ const DxcSwitch = forwardRef<RefType, SwitchPropsType>(
       margin,
       size = "fitContent",
       tabIndex = 0,
+      ariaLabel = "Switch",
     },
     ref
   ): JSX.Element => {
@@ -83,6 +84,7 @@ const DxcSwitch = forwardRef<RefType, SwitchPropsType>(
               aria-disabled={disabled}
               disabled={disabled}
               aria-labelledby={labelId}
+              aria-label={label ? undefined : ariaLabel}
               tabIndex={!disabled ? tabIndex : -1}
               ref={refTrack}
             />

packages/lib/src/switch/types.ts

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