CRED-CLUB · RustyCoderX · May 22, 2026
diff --git a/src/components/Back/index.tsx b/src/components/Back/index.tsx
@@ -16,7 +16,21 @@ const Back = (props: BackProps) => {
     return (
         <Row className="h-center" style={{ padding: '12px 0px' }}>
             <Row className="h-center">
-                <Row className="h-center" style={{ height: '36px' }} onClick={onClick}>
+                <button
+                    type="button"
+                    onClick={onClick}
+                    aria-label={heading ? `Back to ${heading}` : 'Back'}
+                    style={{
+                        background: 'transparent',
+                        border: 'none',
+                        padding: 0,
+                        margin: 0,
+                        height: '36px',
+                        display: 'flex',
+                        alignItems: 'center',
+                        cursor: 'pointer',
+                    }}
+                >
                     <svg width="32" height="12" viewBox="0 0 32 12" fill="none">
                         <path
                             d="M31 6L0.999999 6"
@@ -36,7 +50,7 @@ const Back = (props: BackProps) => {
                             strokeWidth="1.5"
                         />
                     </svg>
-                </Row>
+                </button>
                 <VerticalSpacer n={4} />
                 {heading ? (
                     <Typography {...textStyle} color={color ?? mainColors.white}>

diff --git a/src/components/Checkbox/styles.ts b/src/components/Checkbox/styles.ts
@@ -20,13 +20,23 @@ export const CheckboxLabel = styled.label`
     user-select: none;
     -webkit-tap-highlight-color: transparent;
 
-    /* Hide the browser's default checkbox */
+    /* Keep the native input present and focusable but visually hidden */
     input {
         position: absolute;
         opacity: 0;
         cursor: pointer;
-        height: 0;
-        width: 0;
+        height: ${BOX_SIZE}px;
+        width: ${BOX_SIZE}px;
+        left: 0;
+        top: 0;
+        margin: 0;
+        z-index: 3;
+    }
+
+    /* Visible focus state for keyboard users */
+    input:focus + div .checkmark {
+        outline: none;
+        box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.25);
     }
 `;
 

diff --git a/src/components/Dropdown/styles.ts b/src/components/Dropdown/styles.ts
@@ -1,7 +1,7 @@
 import styled from 'styled-components';
 import { DropdownConfig } from './types';
 
-export const DropdownContainer = styled.div`
+export const DropdownContainer = styled.button`
     display: inline-flex;
     align-items: center;
     justify-content: center;
@@ -10,6 +10,11 @@ export const DropdownContainer = styled.div`
     --webkit-user-select: none;
     padding: 10px 15px;
     border: ${({ border }: DropdownConfig) => `1px solid ${border}`};
+    background: transparent;
+    margin: 0;
+    padding: 10px 15px;
+    outline: none;
+    cursor: pointer;
     &.no-label {
         width: 22px;
         min-width: 22px;

diff --git a/src/components/Helpers/index.tsx b/src/components/Helpers/index.tsx
@@ -122,9 +122,22 @@ export const Pointer = ({
         </svg>
     );
 
-export const Cross = ({ color = mainColors.white, onClick }: CrossProps) => (
-    <svg width="12" height="12" viewBox="0 0 12 12" fill="none" onClick={onClick}>
-        <path d="M2 10L6 6L2 2" stroke={color} strokeWidth="1.5" strokeLinecap="square" />
-        <path d="M10 10L6 6L10 2" stroke={color} strokeWidth="1.5" strokeLinecap="square" />
-    </svg>
+export const Cross = ({ color = mainColors.white, onClick, ariaLabel = 'close' }: CrossProps) => (
+    <button
+        type="button"
+        onClick={onClick}
+        aria-label={ariaLabel}
+        style={{
+            background: 'transparent',
+            border: 'none',
+            padding: 0,
+            margin: 0,
+            cursor: 'pointer',
+        }}
+    >
+        <svg width="12" height="12" viewBox="0 0 12 12" fill="none" aria-hidden>
+            <path d="M2 10L6 6L2 2" stroke={color} strokeWidth="1.5" strokeLinecap="square" />
+            <path d="M10 10L6 6L10 2" stroke={color} strokeWidth="1.5" strokeLinecap="square" />
+        </svg>
+    </button>
 );
diff --git a/src/components/Helpers/types.ts b/src/components/Helpers/types.ts
@@ -17,4 +17,5 @@ export type PointerProps = ChevronProps & {
 export interface CrossProps {
     color: string;
     onClick: () => void;
+    ariaLabel?: string;
 }
diff --git a/src/components/Radio/index.tsx b/src/components/Radio/index.tsx
@@ -14,7 +14,6 @@ const Radio = (props: RadioProps) => {
 
     const RadioStyledButton = () => (
         <StyledRadio
-            onClick={() => radioRef?.current?.click()}
             colorConfig={
                 isEmpty(colorConfig) ? defaultColorConfig : colorConfig ?? defaultColorConfig
             }

diff --git a/src/components/Radio/styles.ts b/src/components/Radio/styles.ts
@@ -4,7 +4,7 @@ import { RadioContainerColorConfig, StyledRadioProps } from './types';
 
 const RADIO_SIZE = 20;
 
-export const StyledRadio = styled.div<StyledRadioProps>`
+export const StyledRadio = styled.label<StyledRadioProps>`
     display: block;
     position: relative;
     cursor: pointer;
@@ -16,12 +16,17 @@ export const StyledRadio = styled.div<StyledRadioProps>`
     width: ${RADIO_SIZE}px;
     height: ${RADIO_SIZE}px;
 
-    /* Hide the browser's default radio button */
+    /* Keep native radio present & focusable but visually hidden */
     input {
         position: absolute;
         opacity: 0;
         cursor: pointer;
         left: 0;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        margin: 0;
+        z-index: 3;
     }
 
     /* Create a custom radio button */

diff --git a/src/components/SearchBar/index.tsx b/src/components/SearchBar/index.tsx
@@ -46,20 +46,15 @@ const SearchBar = (props: SearchBarProps) => {
         : inputColorConfig ?? defaultInputFieldColorConfig;
 
     return (
-        <SearchBarContainer
-            {...searchColorConfig}
-            className={isActive ? 'active' : ''}
-            onClick={() => setIsActive(true)}
-            onBlur={() => {
-                setIsActive(false);
-            }}
-        >
+        <SearchBarContainer {...searchColorConfig} className={isActive ? 'active' : ''}>
             {iconUrl ? <img src={iconUrl} alt="search" className="icon" /> : null}
             <div className="input">
                 <form onSubmit={handleSubmit} style={{ margin: '0', padding: '0' }}>
                     <InputField
                         inputRef={inputRef}
                         autoFocus={isActive}
+                        onFocus={() => setIsActive(true)}
+                        onBlur={() => setIsActive(false)}
                         textStyle={{
                             input: textStyle,
                             label: typographyGuide.inputFields.label,

diff --git a/src/components/Toast/components/ToastPortal.tsx b/src/components/Toast/components/ToastPortal.tsx
@@ -36,12 +36,22 @@ export const Toast = (props: ToastProps) => {
 
     return (
         <ToastItem
+            as={dismissOnClick ? 'button' : 'div'}
+            type={dismissOnClick ? 'button' : undefined}
+            tabIndex={dismissOnClick ? 0 : undefined}
             background={colorConfig.background}
             autoCloseTime={autoCloseTime}
             fullWidth={fullWidth}
             onClick={() => {
                 if (dismissOnClick && id) removeToast?.(id);
             }}
+            onKeyDown={(e: React.KeyboardEvent) => {
+                if (!dismissOnClick) return;
+                if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault();
+                    if (id) removeToast?.(id);
+                }
+            }}
         >
             <Column>
                 <Typography {...textStyle.heading} color={colorConfig.color}>

diff --git a/src/components/Toggle/index.tsx b/src/components/Toggle/index.tsx
@@ -16,7 +16,6 @@ const Toggle = (props: ToggleProps) => {
             colorConfig={
                 isEmpty(colorConfig) ? defaultColorConfig : colorConfig ?? defaultColorConfig
             }
-            onClick={() => toggleRef?.current?.click()}
         >
             <input type="checkbox" ref={toggleRef} checked={isChecked} onChange={handleChange} />
             <div className="mark" />

diff --git a/src/components/Toggle/styles.ts b/src/components/Toggle/styles.ts
@@ -1,7 +1,7 @@
 import styled from 'styled-components';
 import { StyledToggleProps } from './types';
 
-export const ToggleBtn = styled.div<StyledToggleProps>`
+export const ToggleBtn = styled.label<StyledToggleProps>`
     width: 40px;
     height: 22px;
     border: 1px solid ${(props) => props.colorConfig.on.switchBorder};
@@ -22,9 +22,13 @@ export const ToggleBtn = styled.div<StyledToggleProps>`
 
     input {
         opacity: 0;
-        width: 0;
-        height: 0;
+        width: 100%;
+        height: 100%;
         position: absolute;
+        left: 0;
+        top: 0;
+        margin: 0;
+        z-index: 3;
     }
 
     /* Create a custom toggle box */