Harden the Tooltip for WCAG 1.4.13 (dismissible, hoverable, persistent)
Description
src/components/Tooltip.tsx shows content on hover/focus and hides on mouseleave/blur, but it cannot be dismissed with the Escape key while leaving the trigger focused, and the tooltip content is not itself hoverable — both violations of WCAG 2.1 SC 1.4.13 (Content on Hover or Focus). This issue brings the component into compliance.
Requirements and context
- Repository scope:
Agentpay-Org/Agentpay-frontend only.
- Add Escape-to-dismiss that hides the tooltip without removing focus from the trigger.
- Make the tooltip content hoverable (do not hide while the pointer is over the tooltip itself), keeping it visible until blur/Escape/mouseleave of the whole region.
- Preserve the
role="tooltip" + aria-describedby association and useId wiring.
Suggested execution
- Fork the repo and create a branch
git checkout -b a11y/a11y-22-tooltip-dismissible
- Implement changes
- Write code in:
src/components/Tooltip.tsx.
- Write comprehensive tests in: create
src/components/__tests__/Tooltip.test.tsx — assert show on focus, hide on Escape (focus retained), and visible while hovering the content.
- Add documentation: add a JSDoc note citing WCAG 1.4.13.
- Validate keyboard-only operability.
- Test and commit
Test and commit
- Run
npm run lint, npm run typecheck, npm test, and npm run build.
- Cover edge cases: rapid focus/blur, Escape when already hidden, and pointer moving from trigger to tooltip.
- Include the
npm test output and an a11y note.
Example commit message
fix(a11y): make Tooltip dismissible and hoverable per WCAG 1.4.13
Guidelines
- Minimum 95 percent test coverage for the component.
- Clear, reviewer-focused documentation.
- Timeframe: 96 hours.
Community & contribution rewards
- 💬 Join the AgentPay community on Discord for questions, reviews, and faster merges: https://discord.gg/eXvRKkgcv
- ⭐ This is a GrantFox OSS / Official Campaign task and may be rewarded. When your PR is merged you'll be prompted to rate the project — if this issue and the maintainers helped you ship, we'd be grateful for a 5-star rating. Clear questions in Discord and tidy, well-tested PRs are the fastest path to a merge and a reward.
Harden the Tooltip for WCAG 1.4.13 (dismissible, hoverable, persistent)
Description
src/components/Tooltip.tsxshows content on hover/focus and hides on mouseleave/blur, but it cannot be dismissed with the Escape key while leaving the trigger focused, and the tooltip content is not itself hoverable — both violations of WCAG 2.1 SC 1.4.13 (Content on Hover or Focus). This issue brings the component into compliance.Requirements and context
Agentpay-Org/Agentpay-frontendonly.role="tooltip"+aria-describedbyassociation anduseIdwiring.Suggested execution
git checkout -b a11y/a11y-22-tooltip-dismissiblesrc/components/Tooltip.tsx.src/components/__tests__/Tooltip.test.tsx— assert show on focus, hide on Escape (focus retained), and visible while hovering the content.Test and commit
npm run lint,npm run typecheck,npm test, andnpm run build.npm testoutput and an a11y note.Example commit message
fix(a11y): make Tooltip dismissible and hoverable per WCAG 1.4.13Guidelines
Community & contribution rewards