Skip to content

feat: add hover tooltips to dashboard summary stat cards (Closes #484) #798

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
orgy272 wants to merge 1 commit into from
Closed

feat: add hover tooltips to dashboard summary stat cards (Closes #484) #798

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 22 additions & 2 deletions frontend/src/components/ContributorDashboard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -241,11 +241,18 @@ interface SummaryCardProps {
icon: React.ReactNode;
trend?: 'up' | 'down' | 'neutral';
trendValue?: string;
tooltip?: string;
}

function SummaryCard({ label, value, suffix, icon, trend, trendValue }: SummaryCardProps) {
function SummaryCard({ label, value, suffix, icon, trend, trendValue, tooltip }: SummaryCardProps) {
const [showTooltip, setShowTooltip] = useState(false);

return (
<div className="bg-white dark:bg-surface-100 rounded-xl p-5 border border-gray-200 hover:border-gray-300 dark:border-white/5 dark:hover:border-white/10 transition-colors shadow-sm dark:shadow-none">
<div
className="bg-white dark:bg-surface-100 rounded-xl p-5 border border-gray-200 hover:border-gray-300 dark:border-white/5 dark:hover:border-white/10 transition-colors shadow-sm dark:shadow-none relative"
onMouseEnter={() => tooltip && setShowTooltip(true)}
onMouseLeave={() => setShowTooltip(false)}
>
Comment on lines +247 to +255
Copy link
Copy Markdown

@coderabbitai coderabbitai bot Mar 23, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

Tooltip is not accessible to keyboard users.

The tooltip visibility is controlled solely via onMouseEnter/onMouseLeave, which excludes keyboard navigation. To meet WCAG 2.1 SC 1.4.13 (Content on Hover or Focus), the tooltip must also appear on focus and be dismissible without moving pointer or focus.

Missing requirements:

  1. tabIndex={0} on the card container to make it focusable
  2. onFocus / onBlur handlers to toggle showTooltip
  3. aria-describedby linking the card to the tooltip's id for screen readers
  4. Escape key dismissal (optional but recommended)
♿ Proposed fix for keyboard accessibility 
 function SummaryCard({ label, value, suffix, icon, trend, trendValue, tooltip }: SummaryCardProps) {
   const [showTooltip, setShowTooltip] = useState(false);
+  const tooltipId = tooltip ? `tooltip-${label.replace(/\s+/g, '-').toLowerCase()}` : undefined;

   return (
     <div
-      className="bg-white dark:bg-surface-100 rounded-xl p-5 border border-gray-200 hover:border-gray-300 dark:border-white/5 dark:hover:border-white/10 transition-colors shadow-sm dark:shadow-none relative"
+      className="bg-white dark:bg-surface-100 rounded-xl p-5 border border-gray-200 hover:border-gray-300 dark:border-white/5 dark:hover:border-white/10 transition-colors shadow-sm dark:shadow-none relative focus:outline-none focus:ring-2 focus:ring-solana-purple/50"
+      tabIndex={tooltip ? 0 : undefined}
+      aria-describedby={tooltipId}
       onMouseEnter={() => tooltip && setShowTooltip(true)}
       onMouseLeave={() => setShowTooltip(false)}
+      onFocus={() => tooltip && setShowTooltip(true)}
+      onBlur={() => setShowTooltip(false)}
     >
       {/* ... card content ... */}
       {showTooltip && tooltip && (
         <div
+          id={tooltipId}
           role="tooltip"
           className="absolute z-50 left-1/2 -translate-x-1/2 bottom-full mb-2 px-3 py-2 text-xs text-white bg-gray-900 dark:bg-gray-700 rounded-lg shadow-lg whitespace-nowrap pointer-events-none"
         >

Also applies to: 273-281

🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@frontend/src/components/ContributorDashboard.tsx` around lines 247 - 255, The
SummaryCard component currently toggles the tooltip only via
onMouseEnter/onMouseLeave; update SummaryCard to also support keyboard
accessibility by adding tabIndex={0} on the card container, wire onFocus and
onBlur to setShowTooltip(true/false) alongside the existing mouse handlers,
generate or accept a stable tooltip id (e.g., tooltipId) and add
aria-describedby={tooltipId} to the container and id={tooltipId} on the tooltip
element, and add a keydown handler on the container to dismiss the tooltip on
Escape (clearing showTooltip) while ensuring the tooltip's visibility is
reflected with appropriate aria-hidden/role attributes; apply the same changes
to the other identical card instance referenced (lines ~273-281).

<div className="flex items-center justify-between mb-3">
<span className="text-gray-600 dark:text-gray-400 text-sm">{label}</span>
<div className="w-10 h-10 rounded-lg bg-solana-green/10 flex items-center justify-center">
Expand All @@ -263,6 +270,15 @@ function SummaryCard({ label, value, suffix, icon, trend, trendValue }: SummaryC
{trendValue}
</div>
)}
{showTooltip && tooltip && (
<div
role="tooltip"
className="absolute z-50 left-1/2 -translate-x-1/2 bottom-full mb-2 px-3 py-2 text-xs text-white bg-gray-900 dark:bg-gray-700 rounded-lg shadow-lg whitespace-nowrap pointer-events-none"
>
{tooltip}
<div className="absolute left-1/2 -translate-x-1/2 top-full w-0 h-0 border-x-4 border-x-transparent border-t-4 border-t-gray-900 dark:border-t-gray-700" />
</div>
)}
</div>
);
}
Expand Down Expand Up @@ -793,6 +809,7 @@ export function ContributorDashboard({
<div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
<SummaryCard
label="Total Earned"
tooltip="Total $FNDRY tokens earned from completed bounties"
value={formatNumber(stats.totalEarned)}
suffix="$FNDRY"
trend="up"
Expand All @@ -805,6 +822,7 @@ export function ContributorDashboard({
/>
<SummaryCard
label="Active Bounties"
tooltip="Bounties currently in progress or claimed by you"
value={stats.activeBounties}
icon={
<svg className="w-5 h-5 text-solana-purple" fill="none" viewBox="0 0 24 24" strokeWidth={2} stroke="currentColor">
Expand All @@ -814,6 +832,7 @@ export function ContributorDashboard({
/>
<SummaryCard
label="Pending Payouts"
tooltip="Approved bounties awaiting on-chain payout to your wallet"
value={formatNumber(stats.pendingPayouts)}
suffix="$FNDRY"
icon={
Expand All @@ -824,6 +843,7 @@ export function ContributorDashboard({
/>
<SummaryCard
label="Reputation Rank"
tooltip="Your rank among all contributors based on on-chain reputation score"
value={`#${stats.reputationRank}`}
suffix={`of ${stats.totalContributors}`}
trend="up"
Expand Down
Loading