feat: add autoFocus to CheckBox

packages/core/src/components/Checkbox/Checkbox.tsx

@@ -36,6 +36,8 @@ export interface CheckBoxProps extends VibeComponentProps {
   checked?: boolean;
   /** An in between state to display a non selected */
   indeterminate?: boolean;
+  /** is autoFocus */
+  autoFocus?: boolean;
   /** Set the option to be disabled */
   disabled?: boolean;
   /** the default value which the checkbox will start from  */
@@ -63,6 +65,7 @@ const Checkbox: VibeComponent<CheckBoxProps, HTMLInputElement> = forwardRef(
       ariaLabelledBy,
       onChange = NOOP,
       checked,
+      autoFocus,
       indeterminate = false,
       disabled = false,
       defaultChecked,
@@ -127,6 +130,7 @@ const Checkbox: VibeComponent<CheckBoxProps, HTMLInputElement> = forwardRef(
           value={value}
           name={name}
           type="checkbox"
+          autoFocus={autoFocus}
           onChange={onChange}
           defaultChecked={overrideDefaultChecked}
           disabled={disabled}

packages/core/src/components/Checkbox/__tests__/__snapshots__/checkbox-snapshot-tests.jest.tsx.snap

@@ -1,5 +1,52 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Checkbox renders correctly when autoFocus 1`] = `
+<label
+  className="wrapper"
+  data-testid="checkbox"
+  onClickCapture={[Function]}
+  onMouseUp={[Function]}
+>
+  <input
+    aria-label=""
+    autoFocus={true}
+    className="input"
+    defaultChecked={false}
+    disabled={false}
+    name=""
+    onChange={[Function]}
+    type="checkbox"
+    value=""
+  />
+  <div
+    className="checkbox"
+    data-testid="checkbox-checkbox"
+  >
+    <svg
+      aria-hidden={true}
+      className="icon icon noFocusStyle"
+      data-testid="icon"
+      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="typography primary start singleLineEllipsis text text2Normal label"
+    data-testid="checkbox-label"
+  />
+</label>
+`;
+
 exports[`Checkbox renders correctly when checked 1`] = `
 <label
   className="wrapper"

packages/core/src/components/Checkbox/__tests__/checkbox-snapshot-tests.jest.tsx

@@ -25,6 +25,11 @@ describe("Checkbox renders correctly", () => {
     expect(tree).toMatchSnapshot();
   });
 
+  it("when autoFocus", () => {
+    const tree = renderer.create(<Checkbox autoFocus />).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
   it("with name", () => {
     const tree = renderer.create(<Checkbox name="checkbox" />).toJSON();
     expect(tree).toMatchSnapshot();

packages/core/src/components/Checkbox/__tests__/checkbox-tests.jest.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import "@testing-library/jest-dom";
 import { fireEvent, render, cleanup, screen } from "@testing-library/react";
 import Checkbox from "../Checkbox";
 
@@ -39,6 +40,8 @@ type RenderHelper = {
   option3Text: string;
   option3Value: string;
   onChangeMock3: jest.MockedFunction<MockedFunction>;
+  defaultChecked?: boolean;
+  autoFocusOption2?: boolean;
 };
 
 function renderCheckboxes({
@@ -54,18 +57,26 @@ function renderCheckboxes({
   checkbox3Name,
   option3Text,
   option3Value,
-  onChangeMock3
+  onChangeMock3,
+  defaultChecked,
+  autoFocusOption2
 }: RenderHelper) {
   render(
     <form name={formName}>
       <Checkbox
         name={checkbox1Name}
         value={option1Value}
         label={option1Text}
-        defaultChecked={true}
+        defaultChecked={defaultChecked}
         onChange={onChangeMock1}
       />
-      <Checkbox name={checkbox2Name} value={option2Value} label={option2Text} onChange={onChangeMock2} />
+      <Checkbox
+        name={checkbox2Name}
+        value={option2Value}
+        label={option2Text}
+        onChange={onChangeMock2}
+        autoFocus={autoFocusOption2}
+      />
       <Checkbox name={checkbox3Name} value={option3Value} label={option3Text} onChange={onChangeMock3} />
     </form>
   );
@@ -87,23 +98,24 @@ function testUnselectFirstOption(
 }
 
 describe("Checkbox tests", () => {
-  describe("regular checkbox tests", () => {
-    const {
-      formName,
-      checkbox1Name,
-      option1Value,
-      option1Text,
-      checkbox2Name,
-      option2Value,
-      option2Text,
-      checkbox3Name,
-      option3Value,
-      option3Text
-    } = createCheckboxesVariables();
+  const {
+    formName,
+    checkbox1Name,
+    option1Value,
+    option1Text,
+    checkbox2Name,
+    option2Value,
+    option2Text,
+    checkbox3Name,
+    option3Value,
+    option3Text
+  } = createCheckboxesVariables();
 
-    let onChangeMock1: jest.MockedFunction<MockedFunction>,
-      onChangeMock2: jest.MockedFunction<MockedFunction>,
-      onChangeMock3: jest.MockedFunction<MockedFunction>;
+  let onChangeMock1: jest.MockedFunction<MockedFunction>,
+    onChangeMock2: jest.MockedFunction<MockedFunction>,
+    onChangeMock3: jest.MockedFunction<MockedFunction>;
+
+  describe("regular checkbox tests with default checked", () => {
     beforeEach(() => {
       onChangeMock1 = jest.fn();
       onChangeMock2 = jest.fn();
@@ -122,7 +134,8 @@ describe("Checkbox tests", () => {
         option1Value,
         checkbox1Name,
         checkbox2Name,
-        checkbox3Name
+        checkbox3Name,
+        defaultChecked: true
       });
     });
 
@@ -139,7 +152,7 @@ describe("Checkbox tests", () => {
       expect(option3.checked).toBeFalsy();
     });
 
-    it("should unselect  1st option", () => {
+    it("should unselect 1st option", () => {
       testUnselectFirstOption(option1Text, option2Text, option3Text);
     });
 
@@ -179,6 +192,51 @@ describe("Checkbox tests", () => {
       });
     });
   });
+
+  describe("regular checkbox tests with no default checked", () => {
+    it("should auto focus 2nd checkbox", () => {
+      renderCheckboxes({
+        formName,
+        onChangeMock1,
+        onChangeMock2,
+        onChangeMock3,
+        option3Text,
+        option3Value,
+        option2Text,
+        option2Value,
+        option1Text,
+        option1Value,
+        checkbox1Name,
+        checkbox2Name,
+        checkbox3Name,
+        autoFocusOption2: true
+      });
+
+      const option1 = screen.getByLabelText<HTMLInputElement>(option1Text);
+      const option2 = screen.getByLabelText<HTMLInputElement>(option2Text);
+      const option3 = screen.getByLabelText<HTMLInputElement>(option3Text);
+      expect(option1).not.toHaveFocus();
+      expect(option2).toHaveFocus();
+      expect(option3).not.toHaveFocus();
+    });
+  });
+
+  describe("a11y", () => {
+    it("should add the label", () => {
+      const ariaLabel = "Lable Name";
+      const { getByLabelText } = render(<Checkbox label={ariaLabel} />);
+      const checkboxComponent = getByLabelText(ariaLabel);
+      expect(checkboxComponent).toBeTruthy();
+    });
+
+    it("should be the same text", () => {
+      const ariaLabel = "Lable Name";
+      const { getByText } = render(<Checkbox label={ariaLabel} />);
+      const checkboxComponentText = getByText(ariaLabel);
+      expect(checkboxComponentText).toBeTruthy();
+    });
+  });
+
   describe("specific firefox checkbox tests", () => {
     const {
       formName,
@@ -230,7 +288,8 @@ describe("Checkbox tests", () => {
         option1Value,
         checkbox1Name,
         checkbox2Name,
-        checkbox3Name
+        checkbox3Name,
+        defaultChecked: true
       });
     });