feat: add hover tooltips to dashboard summary stat cards (Closes #484)#798
Closed
orgy272 wants to merge 1 commit intoSolFoundry:mainfrom
Closed
feat: add hover tooltips to dashboard summary stat cards (Closes #484)#798orgy272 wants to merge 1 commit intoSolFoundry:mainfrom
orgy272 wants to merge 1 commit intoSolFoundry:mainfrom
Conversation
…oundry#484) - Added optional tooltip prop to SummaryCard component - Tooltips appear on hover with smooth positioning - Added descriptive tooltips to all 4 dashboard stats: Total Earned, Active Bounties, Pending Payouts, Reputation Rank - Pure CSS tooltip using Tailwind classes, no external dependencies - Supports dark mode with appropriate color scheme - Accessible: uses role='tooltip' attribute - Zero new files, minimal diff — only modifies ContributorDashboard.tsx
📝 WalkthroughWalkthroughThis change extends the Estimated code review effort🎯 3 (Moderate) | ⏱️ ~18 minutes Possibly related issues
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@frontend/src/components/ContributorDashboard.tsx`:
- Around line 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).
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro
Run ID: 6150a222-482f-4bad-803f-97ab1e3603b9
📒 Files selected for processing (1)
frontend/src/components/ContributorDashboard.tsx
Comment on lines
+247
to
+255
| 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)} | ||
| > |
There was a problem hiding this comment.
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:
tabIndex={0}on the card container to make it focusableonFocus/onBlurhandlers to toggleshowTooltiparia-describedbylinking the card to the tooltip'sidfor screen readers- 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).
Contributor
Author
|
Superseded by updated PR with accessibility fixes |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Add informative hover tooltips to all four dashboard summary stat cards, providing users with contextual descriptions of each metric.
Closes #484
Changes
frontend/src/components/ContributorDashboard.tsx— Added optionaltooltipprop toSummaryCardcomponent with hover-triggered tooltip display, and added descriptive tooltips to all 4 stat cards (Total Earned, Active Bounties, Pending Payouts, Reputation Rank).Implementation Details
useStatefor hover state management (already imported)dark:variant classesrole="tooltip"attributeWallet
61FYMEPXMe73ypR53wMAR7PYAWHhZWKFJMNKnG9NwoW