Skip to content

Make the Tooltip dismissible with Escape and hoverable per WCAG 1.4.13 #21

@mikewheeleer

Description

@mikewheeleer

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.

Metadata

Metadata

Assignees

No one assigned
    No fields configured for Feature.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions