From 0f76cd013adf595b8d618000c9f5532333d8cc1f Mon Sep 17 00:00:00 2001
From: Simon Yu <simony@andrew.cmu.edu>
Date: Tue, 9 Dec 2025 16:15:34 -0500
Subject: [PATCH] fix: prevent profile tooltips from opening on keyboard focus

  Resolves accessibility issue where profile cards automatically opened
  popup tooltips when receiving keyboard focus, violating WCAG 2.1 guidelines.

  - Add trigger: 'mouseenter' to ProfileTooltip to prevent focus-triggered popups
  - Add keyboard navigation (Enter/Space) to open full profile pages
  - Add proper ARIA attributes for screen readers

  Fixes #1949
---
 .../src/components/profile/ProfileTooltip.tsx |  2 +
 .../src/components/profile/UserShortInfo.tsx  | 42 +++++++++++++++----
 2 files changed, 36 insertions(+), 8 deletions(-)

diff --git a/packages/shared/src/components/profile/ProfileTooltip.tsx b/packages/shared/src/components/profile/ProfileTooltip.tsx
index 80a602352c..ba38cb5041 100644
--- a/packages/shared/src/components/profile/ProfileTooltip.tsx
+++ b/packages/shared/src/components/profile/ProfileTooltip.tsx
@@ -122,6 +122,8 @@ export function ProfileTooltip({
     content: !isLoading && data ? <UserEntityCard user={data} /> : null,
     plugins:
       onTooltipMouseEnter || onTooltipMouseLeave ? [hoverPlugin] : undefined,
+    // Remove focus from trigger to prevent keyboard accessibility issues
+    trigger: 'mouseenter',
     ...tooltip,
     onShow: (instance) => {
       if (id !== userId) {
diff --git a/packages/shared/src/components/profile/UserShortInfo.tsx b/packages/shared/src/components/profile/UserShortInfo.tsx
index 4690098f0f..eb0b697486 100644
--- a/packages/shared/src/components/profile/UserShortInfo.tsx
+++ b/packages/shared/src/components/profile/UserShortInfo.tsx
@@ -26,6 +26,10 @@ import { formatCoresCurrency } from '../../lib/utils';
 import { Image } from '../image/Image';
 import { ButtonVariant } from '../buttons/Button';
 
+const getProfileUrl = (username: string): string => {
+  return `https://app.daily.dev/${username}`;
+};
+
 type PropsOf<Tag> = Tag extends keyof JSX.IntrinsicElements
   ? JSX.IntrinsicElements[Tag]
   : Tag extends React.ComponentType<infer Props>
@@ -97,15 +101,37 @@ const UserShortInfoComponent = <Tag extends React.ElementType>(
     visible: disableTooltip ? false : undefined,
   };
 
+  const handleKeyDown = (event: React.KeyboardEvent) => {
+    if ((event.key === 'Enter' || event.key === ' ') && !onClick) {
+      event.preventDefault();
+      // Navigate to full profile page instead of showing popup
+      window.open(getProfileUrl(username), '_blank');
+    }
+  };
+
+  // Add proper keyboard accessibility
+  const accessibilityProps =
+    tag === 'a'
+      ? {}
+      : {
+          tabIndex: 0,
+          role: 'button' as const,
+          'aria-label': `View ${name}'s profile`,
+          onKeyDown: handleKeyDown,
+        };
+
+  const elementProps = {
+    ref,
+    ...props,
+    className: classNames(
+      'flex flex-row',
+      className.container ?? defaultClassName.container,
+    ),
+    ...accessibilityProps,
+  };
+
   return (
-    <Element
-      ref={ref}
-      {...props}
-      className={classNames(
-        'flex flex-row',
-        className.container ?? defaultClassName.container,
-      )}
-    >
+    <Element {...elementProps}>
       <ProfileTooltip
         userId={user?.id}
         tooltip={tooltipProps}