Fix button focus

apps/site/components/Common/Button/index.tsx

@@ -1,5 +1,12 @@
+'use client';
+
 import classNames from 'classnames';
-import type { FC, AnchorHTMLAttributes } from 'react';
+import type {
+  FC,
+  AnchorHTMLAttributes,
+  KeyboardEvent,
+  MouseEvent,
+} from 'react';
 
 import Link from '@/components/Link';
 
@@ -17,17 +24,49 @@ const Button: FC<ButtonProps> = ({
   href = undefined,
   children,
   className,
+  onClick,
   ...props
-}) => (
-  <Link
-    role="button"
-    href={disabled ? undefined : href}
-    aria-disabled={disabled}
-    className={classNames(styles.button, styles[kind], className)}
-    {...props}
-  >
-    {children}
-  </Link>
-);
+}) => {
+  //to handle the keyboard interactions, specifically for Enter and Space keys
+  const handleKeyDown = (e: KeyboardEvent<HTMLAnchorElement>) => {
+    if (disabled) {
+      e.preventDefault();
+      return;
+    }
+
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      if (typeof onClick === 'function') {
+        onClick(e as unknown as MouseEvent<HTMLAnchorElement>);
+      }
+    }
+  };
+
+  // to manage mouse click events for the component, providing behavior consistent with the disabled state
+  const onClickHandler = (e: MouseEvent<HTMLAnchorElement>) => {
+    if (disabled) {
+      e.preventDefault();
+      return;
+    }
+    if (onClick) {
+      onClick(e);
+    }
+  };
+
+  return (
+    <Link
+      role="button"
+      href={disabled ? undefined : href}
+      aria-disabled={disabled}
+      className={classNames(styles.button, styles[kind], className)}
+      tabIndex={disabled ? -1 : 0} // Ensure focusable if not disabled
+      onClick={onClickHandler}
+      onKeyDown={handleKeyDown}
+      {...props}
+    >
+      {children}
+    </Link>
+  );
+};
 
 export default Button;