Issue #49: Adding accesibility to checkbox,button as well a radio button.

src/components/Button/styles.ts

@@ -56,6 +56,9 @@ export const ButtonWrapper = styled.button<StyledButtonType>`
             : `
 
     `}
+    &:focus {
+        outline: auto;
+    }
     .button-face {
         position: relative;
         display: flex;

src/components/Checkbox/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useRef } from 'react';
 import withCheckHOC from '@components/Helpers/withCheckHOC';
 import { CheckmarkWrapper, CheckboxLabel } from './styles';
 import { CheckboxProps } from './types';
@@ -8,6 +8,7 @@ import { isEmpty } from '@utils';
 
 const Checkbox = (props: CheckboxProps) => {
     const { isChecked, handleChange, colorConfig, colorMode, children, ...propsToFwd } = props;
+    const checkboxRef = useRef<HTMLInputElement>(null);
     const defaultColorConfig =
         colorGuide[colorMode === 'light' ? 'lightComponents' : 'darkComponents'].checkbox;
     const checkboxColorConfig = isEmpty(colorConfig)
@@ -16,12 +17,32 @@ const Checkbox = (props: CheckboxProps) => {
 
     return (
         <CheckboxLabel>
-            <input {...propsToFwd} type="checkbox" checked={isChecked} onChange={handleChange} />
+            <input
+                tabIndex={-1}
+                {...propsToFwd}
+                type="checkbox"
+                checked={isChecked}
+                onChange={handleChange}
+                ref={checkboxRef}
+            />
             <Row>
                 <CheckmarkWrapper
                     colorConfig={checkboxColorConfig}
                     hasChildren={children ? true : false}
                     checked={isChecked}
+                    tabIndex={0}
+                    onClick={(clickEvent) => {
+                        clickEvent.preventDefault();
+                        checkboxRef.current?.click();
+                    }}
+                    role="checkbox"
+                    aria-checked={isChecked}
+                    onKeyDown={(keydownEvent) => {
+                        let key = keydownEvent.code;
+                        if (key === 'Space' || key === 'Enter') {
+                            checkboxRef.current?.click();
+                        }
+                    }}
                 >
                     <span className="checkmark">
                         <svg

src/components/Radio/index.tsx

@@ -14,17 +14,26 @@ const Radio = (props: RadioProps) => {
 
     const RadioStyledButton = () => (
         <StyledRadio
-            onClick={() => radioRef?.current?.click()}
+            onClick={(clickEvent) => {
+                clickEvent.preventDefault();
+                radioRef?.current?.click();
+            }}
+            onKeyDown={(clickEvent) => {
+                const key = clickEvent.code;
+                if (key === 'Enter' || key === 'Space') radioRef?.current?.click();
+            }}
             colorConfig={
                 isEmpty(colorConfig) ? defaultColorConfig : colorConfig ?? defaultColorConfig
             }
+            tabIndex={0}
         >
             <input
                 id={id}
                 ref={radioRef}
                 type="radio"
                 checked={isChecked}
                 onChange={handleChange}
+                tabIndex={-1}
                 {...propsToFwd}
             />
             <span className="checkmark"> </span>