Cpatil/added rest props for checkbox and radio components (#928)

* fix: added condition for role attribute in checkboxgroup and radiogroup components

* fix: added rest props in checkbox and radiobutton components

* fix: added null check for items length

src/components/CheckBox/CheckBox.tsx

@@ -55,6 +55,7 @@ export const CheckBox: FC<CheckboxProps> = React.forwardRef(
       value,
       variant = SelectorVariant.Default,
       'data-test-id': dataTestId,
+      ...rest
     },
     ref: Ref<HTMLInputElement>
   ) => {
@@ -208,6 +209,7 @@ export const CheckBox: FC<CheckboxProps> = React.forwardRef(
             value={value}
             readOnly
             role={toggle ? 'switch' : 'checkbox'}
+            {...rest}
           />
           <label htmlFor={checkBoxId.current} className={labelClassNames}>
             {labelPosition == LabelPosition.Start && (

src/components/CheckBox/CheckBoxGroup.tsx

@@ -107,7 +107,7 @@ export const CheckBoxGroup: FC<CheckboxGroupProps> = React.forwardRef(
       <div
         className={checkboxGroupClassNames}
         style={style}
-        role="group"
+        role={items?.length > 1 ? 'group' : undefined}
         aria-label={ariaLabel}
         id={id}
         ref={ref}

src/components/RadioButton/RadioButton.tsx

@@ -52,6 +52,7 @@ export const RadioButton: FC<RadioButtonProps> = React.forwardRef(
       value = '',
       variant = SelectorVariant.Default,
       'data-test-id': dataTestId,
+      ...rest
     },
     ref: Ref<HTMLInputElement>
   ) => {
@@ -195,6 +196,7 @@ export const RadioButton: FC<RadioButtonProps> = React.forwardRef(
             value={value}
             onChange={!allowDisabledFocus ? toggleChecked : null}
             readOnly
+            {...rest}
           />
           <label htmlFor={radioButtonId.current} className={labelClassNames}>
             {labelPosition == LabelPosition.Start && (

src/components/RadioButton/RadioGroup.tsx

@@ -103,7 +103,7 @@ export const RadioGroup: FC<RadioGroupProps> = React.forwardRef(
     return (
       <RadioGroupProvider onChange={onChange} value={value}>
         <div
-          role="group"
+          role={items.length > 1 ? 'group' : undefined}
           className={radioGroupClasses}
           style={style}
           ref={ref}