From 3c274ba7633b94824929c03e172761f49b0a3699 Mon Sep 17 00:00:00 2001
From: Farid <fariedomar43@gmail.com>
Date: Mon, 16 Dec 2024 18:18:54 +0530
Subject: [PATCH] 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 <cwunder@gnome.org>

---------

Signed-off-by: Claudio W <cwunder@gnome.org>
Co-authored-by: Claudio W <cwunder@gnome.org>
---
 apps/site/components/Common/Button/index.tsx | 63 ++++++++++++++++----
 1 file changed, 50 insertions(+), 13 deletions(-)

diff --git a/apps/site/components/Common/Button/index.tsx b/apps/site/components/Common/Button/index.tsx
index cb7f77eed0c89..804cc296ecf46 100644
--- a/apps/site/components/Common/Button/index.tsx
+++ b/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';
 
@@ -7,7 +14,6 @@ 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;