Fix button focus (#7287)

* add changes to MetaBar index.modul.css

* add href to button

* remove unrelated changes

* apply changes to CodeBox file & Button file

* add change to CodeBox file

* add changes to CodeBox & Button component

* import KeyboardEvent & MouseEvent from react at Button index.file

* refactor: consolidate React imports into a single line

* refactor: consolidate React imports into a single line

* refactor: Button component & CodeBox compnent

* Update: Button component modified in case of type-saftey at some part

* omit unnecessary comment-lines, handle-proper naming

* omit unnecessary comment-lines, handle-proper naming

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

Signed-off-by: Claudio W <[email protected]>

---------

Signed-off-by: Claudio W <[email protected]>
Co-authored-by: Claudio W <[email protected]>

Author: faridomarAf

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

@@ -1,13 +1,19 @@
+'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';
 
 import styles from './index.module.css';
 
 type ButtonProps = AnchorHTMLAttributes<HTMLAnchorElement> & {
   kind?: 'neutral' | 'primary' | 'secondary' | 'special';
-  // We have an extra `disabled` prop as we simulate a button
   disabled?: boolean;
 };
 
@@ -17,17 +23,48 @@ 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>
-);
+}) => {
+  const onKeyDownHandler = (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>);
+      }
+    }
+  };
+
+  const onClickHandler = (e: MouseEvent<HTMLAnchorElement>) => {
+    if (disabled) {
+      e.preventDefault();
+      return;
+    }
+
+    if (typeof onClick === 'function') {
+      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={onKeyDownHandler}
+      {...props}
+    >
+      {children}
+    </Link>
+  );
+};
 
 export default Button;