Give the ConfirmDialog backdrop an accessible cancel affordance

[mikewheeleer]

Add an optional, accessible backdrop-click cancel to ConfirmDialog

Description

src/components/ConfirmDialog.tsx already traps focus and handles Escape, but the backdrop overlay is non-interactive — users accustomed to clicking outside a modal to dismiss it cannot, and there is no documented way to enable that. This issue adds an opt-in backdrop-click cancel that is implemented accessibly (not by hijacking dialog clicks).

Requirements and context

• Repository scope: Agentpay-Org/Agentpay-frontend only.
• Add a dismissOnBackdrop?: boolean prop; when enabled, clicking the backdrop (but not the dialog panel) calls onCancel.
• Ensure the backdrop handler does not fire when the click originates inside the dialog, and that it does not break the focus trap or Escape handling.
• Keep role="dialog", aria-modal, aria-labelledby, and focus restoration intact; do not make a non-button element the only way to dismiss (Escape and Cancel remain).

Suggested execution

• Fork the repo and create a branch
• git checkout -b a11y/a11y-confirmdialog-backdrop
• Implement changes
  • Write code in: src/components/ConfirmDialog.tsx.
  • Write comprehensive tests in: extend src/components/__tests__/ConfirmDialog.test.tsx — assert backdrop click cancels only when enabled, dialog-panel clicks do not cancel, and Escape still works.
  • Add documentation: document the new prop in the component JSDoc.
  • Validate the focus trap and restoration are unaffected.
• Test and commit

Test and commit

• Run npm run lint, npm run typecheck, npm test, and npm run build.
• Cover edge cases: backdrop click with prop off (no cancel), click inside panel, and Escape.
• Include the npm test output and an a11y note.

Example commit message

feat(a11y): add opt-in backdrop-click cancel to ConfirmDialog

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.

[ekwe7]

I would love to work on this issue. I have experience building production ready applications and collaborating through GitHub workflows. I'll carefully analyze the current implementation, propose a reliable solution, and submit a well-tested PR. My focus is on clean code, maintainability, and timely delivery

[grantfox-oss]

🎉 This issue has been marked as completed on GrantFox as part of the Official Campaign campaign!

@ekwe7's PR #189 was approved and merged by @mikewheeleer.

🏆 @ekwe7: You earned 40 FoxPoints for this contribution! Your current tier: Builder (2,431 total points). Track your full progress on GrantFox.

👏 Great work, @ekwe7! Keep contributing to Agentpay-Org.