add aria label support for checkbox

src/components/Checkbox/Checkbox.js

@@ -15,6 +15,7 @@ export const Checkbox = ({
   className,
   // Backward compatibility for props naming
   componentClassName,
+  ariaLabel,
   label,
   ariaLabelledBy,
   onChange,
@@ -72,7 +73,7 @@ export const Checkbox = ({
         onChange={onChange}
         defaultChecked={overrideDefaultChecked}
         disabled={disabled}
-        aria-label={label}
+        aria-label={ariaLabel || label}
         aria-labelledby={ariaLabelledBy}
         checked={checked}
       />
@@ -103,7 +104,8 @@ Checkbox.propTypes = {
   indeterminate: PropTypes.bool,
   value: PropTypes.string,
   disabled: PropTypes.bool,
-  name: PropTypes.string
+  name: PropTypes.string,
+  ariaLabel: PropTypes.string
 };
 
 Checkbox.defaultProps = {
@@ -117,7 +119,8 @@ Checkbox.defaultProps = {
   ariaLabelledBy: undefined,
   checked: undefined,
   indeterminate: false,
-  defaultChecked: undefined
+  defaultChecked: undefined,
+  ariaLabel: undefined
 };
 
 export default Checkbox;

src/components/Checkbox/__tests__/__snapshots__/checkbox.jest.js.snap

@@ -123,6 +123,49 @@ exports[`Checkbox Tests Snapshot Tests renders correctly when disabled 1`] = `
 </label>
 `;
 
+exports[`Checkbox Tests Snapshot Tests renders correctly with aria label 1`] = `
+<label
+  className="monday-style-checkbox"
+  onMouseUp={[Function]}
+>
+  <input
+    aria-label="aria label"
+    className="monday-style-checkbox__input"
+    defaultChecked={false}
+    disabled={false}
+    name=""
+    onChange={[Function]}
+    type="checkbox"
+    value=""
+  />
+  <div
+    className="monday-style-checkbox__checkbox monday-style-checkbox__prevent-animation"
+  >
+    <svg
+      aria-hidden={true}
+      className="icon_component monday-style-checkbox__icon icon_component--no-focus-style"
+      fill="currentColor"
+      height="16"
+      onClick={[Function]}
+      viewBox="0 0 20 20"
+      width="16"
+    >
+      <path
+        clipRule="evenodd"
+        d="M8.53033 14.2478L8 13.7175L7.46967 14.2478C7.76256 14.5407 8.23744 14.5407 8.53033 14.2478ZM8 12.6569L4.53033 9.18718C4.23744 8.89429 3.76256 8.89429 3.46967 9.18718C3.17678 9.48008 3.17678 9.95495 3.46967 10.2478L7.46967 14.2478L8 13.7175L8.53033 14.2478L16.2478 6.53033C16.5407 6.23743 16.5407 5.76256 16.2478 5.46967C15.955 5.17677 15.4801 5.17677 15.1872 5.46967L8 12.6569Z"
+        fill="currentColor"
+        fillRule="evenodd"
+      />
+    </svg>
+  </div>
+  <span
+    className="monday-style-checkbox__label"
+  >
+    label
+  </span>
+</label>
+`;
+
 exports[`Checkbox Tests Snapshot Tests renders correctly with empty props 1`] = `
 <label
   className="monday-style-checkbox"

src/components/Checkbox/__tests__/checkbox.jest.js

@@ -2,6 +2,7 @@ import React from "react";
 import renderer from "react-test-renderer";
 import { render, screen, cleanup, fireEvent } from "@testing-library/react";
 import { Checkbox } from "../Checkbox";
+import { expect as sinonExpect } from "../../../test/test-helpers";
 
 describe("Checkbox Tests", () => {
   describe("Snapshot Tests", () => {
@@ -26,6 +27,11 @@ describe("Checkbox Tests", () => {
       const tree = renderer.create(<Checkbox disabled />).toJSON();
       expect(tree).toMatchSnapshot();
     });
+
+    it("renders correctly with aria label", () => {
+      const tree = renderer.create(<Checkbox label="label" ariaLabel="aria label" />).toJSON();
+      expect(tree).toMatchSnapshot();
+    });
   });
   describe("Integration Tests", () => {
     const formName = "myForm";
@@ -39,12 +45,17 @@ describe("Checkbox Tests", () => {
     const option3Value = "3";
     const option3Text = "Option 3";
 
+    const option4Value = "4";
+    const option4Text = "Option 4";
+    const option4AriaLabel = "Option 4 aria label";
+
     beforeEach(() => {
       render(
         <form name={formName}>
           <Checkbox name={checkboxName} value={option1Value} label={option1Text} defaultChecked={true} />
           <Checkbox name={checkboxName} value={option2Value} label={option2Text} />
           <Checkbox name={checkboxName} value={option3Value} label={option3Text} />
+          <Checkbox name={checkboxName} value={option4Value} label={option4Text} ariaLabel={option4AriaLabel} />
         </form>
       );
     });
@@ -81,5 +92,10 @@ describe("Checkbox Tests", () => {
       expect(option2.checked).toBeTruthy();
       expect(option3.checked).toBeFalsy();
     });
+
+    it("should find checkbox element by label when ariaLabel defined", () => {
+      const option4 = screen.getByLabelText(option4AriaLabel);
+      sinonExpect(option4).to.be.ok;
+    });
   });
 });