fix(ssr): add screen reader labels to buttons on player page

src/components/Button.tsx

@@ -3,38 +3,38 @@ import { Tooltip, TooltipContent, TooltipTrigger } from "./ui/Tooltip";
 
 interface ButtonProps {
   text?: JSX.Element | string;
-  url?: string;
   icon?: JSX.Element;
   color?: string;
   tooltip?: React.ReactNode;
   className?: string;
+  ariaLabel?: string;
   onClick?: () => void;
 }
 
 export default function Button({
   text,
-  url,
   icon,
   color,
   tooltip,
   className,
+  ariaLabel = "Default button label",
   onClick,
 }: ButtonProps) {
   if (!color) color = "bg-blue-500";
 
   const base = (
-    <a href={url} onClick={onClick}>
-      <p
-        className={clsx(
-          "font-md flex w-fit transform-gpu flex-row items-center gap-1 rounded-md p-1 transition-all hover:opacity-80",
-          className,
-          color,
-        )}
-      >
-        {icon}
-        {text}
-      </p>
-    </a>
+    <button
+      className={clsx(
+        "flex items-center justify-center gap-2 rounded-md px-4 py-2",
+        color,
+        className,
+      )}
+      onClick={onClick}
+      aria-label={ariaLabel}
+    >
+      {icon}
+      {text}
+    </button>
   );
 
   if (tooltip) {

src/components/player/PlayerInfo.tsx

@@ -136,6 +136,7 @@ export default function PlayerInfo({ playerData }: PlayerInfoProps) {
                     onClick={claimProfile}
                     tooltip={<p>Set as your Profile</p>}
                     icon={<HomeIcon width={24} height={24} />}
+                    ariaLabel="Set as your Profile"
                   />
                 )}
 
@@ -147,6 +148,7 @@ export default function PlayerInfo({ playerData }: PlayerInfoProps) {
                         tooltip={<p>Add as Friend</p>}
                         icon={<UserIcon width={24} height={24} />}
                         color="bg-green-500"
+                        ariaLabel="Add Friend"
                       />
                     )}
 
@@ -156,6 +158,7 @@ export default function PlayerInfo({ playerData }: PlayerInfoProps) {
                         tooltip={<p>Remove Friend</p>}
                         icon={<XMarkIcon width={24} height={24} />}
                         color="bg-red-500"
+                        ariaLabel="Remove Friend"
                       />
                     )}
                   </>