[FE-22] Build ConfirmationModal component

[mftee]

Problem

Destructive actions such as deleting a document, revoking a verification, or removing a user have no confirmation step. Users can accidentally trigger irreversible actions without any warning.

Proposed Solution

Create a reusable ConfirmationModal component inside frontend/module/components/confirmation-modal/ that wraps any destructive action behind a modal confirmation dialog.

Acceptance Criteria

• Accepts title, message, confirmLabel (default Delete), cancelLabel (default Cancel), onConfirm, onCancel, and isOpen props
• Renders a modal overlay that traps focus while open
• Confirm button has a red (danger) styling to communicate the destructive nature of the action
• Calls onConfirm when the confirm button is clicked, onCancel when the cancel button or overlay background is clicked
• Supports an isLoading prop that shows a spinner on the confirm button and disables both buttons while an async action is in progress
• Closes when the Escape key is pressed
• Manages focus correctly — focus moves into the modal on open and returns to the trigger element on close
• All component files live inside frontend/module/components/confirmation-modal/

[Auwal007]

@Auwal007 has applied to work on this issue as part of the Stellar Wave Program's 5th wave.

I can build this reusable ConfirmationModal. I'll make sure the accessibility requirements are airtight by implementing a strict focus trap while the modal is open, listening for the Escape key to close, and cleanly restoring focus to the original trigger element upon unmounting. Having engineered accessible design system components in React before, I'll ensure all functionality is isolated perfectly within the new confirmation-modal/ directory.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Auwal007 to this issue.

[NteinPrecious]

@NteinPrecious has applied to work on this issue as part of the Stellar Wave Program's 5th wave.

https://www.drips.network/wave/stellar/issues/d3df4daa-0d29-4187-ae46-dea1a5c3a0da?filters=eyJyZXBvSWQiOiJjY2Y0YjMxNy0wYmMyLTQ5YmItYTA3Mi02NGE4YzZmMmZhNmMiLCJzdGF0ZSI6Im9wZW4ifQ%3D%3D&sortBy=createdAt

ℹ️ Repo Maintainers: To accept this application, review their application or assign @NteinPrecious to this issue.

[drips-wave]

Congratulations, @NteinPrecious! 🎉 Your application was accepted by the repo's maintainers, and the issue is due on June 2, 2026.

🧑‍💻 @NteinPrecious: Please resolve the issue such that the repo's maintainers have enough time to review your contribution before the due date. You'll earn Points for completing the issue on-time, which will make you eligible for a share of the Stellar Wave Program's reward pool.

Warning

When opening a PR, please link it to this issue to ensure it gets tracked accurately. Points are awarded when this issue is marked as completed by the maintainer.

🤠 Repo maintainers: Please keep an eye on the contributor's progress and review their work before the due date. You can manage this issue, including adjusting its complexity and points, here.

🌊 Happy Wave 🌊

[drips-wave]

This issue has been completed by @NteinPrecious as part of the Stellar Wave Program's 5th Wave 🥳

😎 @NteinPrecious: You earned 200 Points for completing this issue! After the current Wave ends, you'll be eligible for a percentage of the Wave's reward pool based on the percentage of total points you've earned. Learn more here. You can also Leave a review to share your experience working on this issue.

🧑‍💻 Repo maintainers: How'd the contributor do? Leave a review to share your experience working with them.