From e6ee5f44d82f7f2b87d6f3719e97fa9e2bfd0813 Mon Sep 17 00:00:00 2001
From: shindigira <shindigira@gmail.com>
Date: Fri, 2 Feb 2024 14:14:44 -0500
Subject: [PATCH 1/2] fix: spread properties to the actual checkbox element

---
 src/components/Checkbox/Checkbox.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Checkbox/Checkbox.tsx b/src/components/Checkbox/Checkbox.tsx
index 727108a8..d2b2ca8d 100644
--- a/src/components/Checkbox/Checkbox.tsx
+++ b/src/components/Checkbox/Checkbox.tsx
@@ -38,7 +38,7 @@ export interface CheckboxProperties {
   /** An event handler function that will be called when the checkbox's value is changed  */
   onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
   /** Border status */
-  status: 'success' | 'warning' | 'error';
+  status: 'error' | 'success' | 'warning';
 }
 
 const containerBaseStyles = ['m-form-field m-form-field__checkbox'];
@@ -84,7 +84,6 @@ export const Checkbox = ({
     <div
       className={classnames(containerClasses)}
       data-testid={`${id}-container`}
-      {...properties}
     >
       <input
         id={id}
@@ -98,6 +97,7 @@ export const Checkbox = ({
         ref={inputRef}
         disabled={disabled}
         onChange={onChangeHandler}
+        {...properties}
       />
       <Label
         id={`${id}-label`}

From 3a2027d7d2530650e91fb1e92d5d57f7abdb4599 Mon Sep 17 00:00:00 2001
From: shindigira <shindigira@gmail.com>
Date: Fri, 2 Feb 2024 14:45:14 -0500
Subject: [PATCH 2/2] fix: checkbox tests

---
 src/components/Checkbox/Checkbox.test.tsx | 3 ++-
 src/components/Checkbox/Checkbox.tsx      | 6 +++---
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/components/Checkbox/Checkbox.test.tsx b/src/components/Checkbox/Checkbox.test.tsx
index aae96c8c..a06180d2 100644
--- a/src/components/Checkbox/Checkbox.test.tsx
+++ b/src/components/Checkbox/Checkbox.test.tsx
@@ -6,6 +6,7 @@ import { CheckboxTestWrapper } from './Checkbox.utils';
 const id = 'default';
 const label = 'this is a label';
 const testId = `${id}-container`;
+const inputTestId = `${id}-input`;
 
 const attributeAria = 'aria-checked';
 const attributeClass = 'class';
@@ -18,7 +19,7 @@ describe('Checkbox', () => {
     const testTitle = 'test-title';
 
     render(<Checkbox {...defaultProps} title={testTitle} />);
-    const checkbox = screen.getByTestId(testId);
+    const checkbox = screen.getByTestId(inputTestId);
 
     expect(checkbox).toBeInTheDocument();
     expect(checkbox).toHaveAttribute(attributeTitle, testTitle);
diff --git a/src/components/Checkbox/Checkbox.tsx b/src/components/Checkbox/Checkbox.tsx
index d2b2ca8d..d483fcc9 100644
--- a/src/components/Checkbox/Checkbox.tsx
+++ b/src/components/Checkbox/Checkbox.tsx
@@ -65,7 +65,7 @@ export const Checkbox = ({
   onChange,
   status,
   ...properties
-}: CheckboxProperties): ReactElement => {
+}: CheckboxProperties & JSX.IntrinsicElements['input']): ReactElement => {
   const onChangeHandler = useCallback(
     (event: ChangeEvent<HTMLInputElement>): void => {
       onChange?.(event);
@@ -91,13 +91,13 @@ export const Checkbox = ({
         checked={checked}
         aria-checked={checked}
         aria-labelledby={`${id}-label`}
-        data-testid={`${id}-input`}
         name={name ?? id}
-        className={classnames(['a-checkbox', inputClassName])}
         ref={inputRef}
         disabled={disabled}
         onChange={onChangeHandler}
         {...properties}
+        data-testid={`${id}-input`}
+        className={classnames(['a-checkbox', inputClassName])}
       />
       <Label
         id={`${id}-label`}