Introduce a shared accessible Dialog primitive and migrate all modals to it

[1nonlypiece]

📌 Description

Modals are implemented independently across SettlementModal.tsx,
CommitmentCreatedModal.tsx, CommitmentDetailsModal.tsx,
CommitmentEarlyExitModal.tsx, and ExportCommitmentsModal.tsx, each handling
focus and escape differently (or not at all). This inconsistency causes focus-
trap and focus-restoration bugs and duplicated code.

This issue adds a single accessible Dialog primitive (focus trap, escape,
focus restoration, role="dialog", aria-modal, scroll lock) and migrates the
existing modals to it.

🎯 Requirements and Context

• A Dialog component encapsulating focus trapping, restoration, escape, and
  ARIA wiring; respects reduced motion.
• Migrate the listed modals without changing their visible behaviour.
• No regressions to existing modal tests.
• Background scroll lock and inert background while open.

🛠️ Suggested Execution

1. Fork the repo and create a branch

git checkout -b refactor/shared-dialog-primitive

2. Implement changes

• Add src/components/ui/Dialog.tsx and migrate the modals under
  src/components/modals/ and src/components/export/.
• Add src/components/ui/Dialog.test.tsx covering focus trap, restoration,
  escape, ARIA, and scroll lock.
• Add docs/MODAL_SYSTEM.md documenting the primitive and migration.
• Validate accessibility across all migrated modals.

3. Test and commit

• Run pnpm test.
• Cover edge cases: nested focusable elements, no focusable child, escape while
  an async action runs, restore focus to trigger.

Example commit message

refactor: shared accessible Dialog primitive across modals

✅ Guidelines

• Minimum 95% test coverage on the primitive.
• Clear, reviewer-friendly documentation.
• Timeframe: 96 hours.

🏷️ Labels

type-refactor · type-security · area-frontend · MAYBE REWARDED ·
GRANTFOX OSS · OFFICIAL CAMPAIGN

💬 Community & Support

• Join the CommitLabs contributor Discord to coordinate and get unblocked fast:
  https://discord.gg/WV7tdYkJk
• Introduce yourself before starting so we can avoid duplicate work and pair you
  with a reviewer. Maintainers triage actively and review fast.

[Jayking40]

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

I'd like to work on this issue. I have strong experience with typescript, next.js, react, vitest and can deliver a clean, well-tested implementation.

My approach:

1. Analyze the existing codebase and understand the current architecture
2. Implement the solution following project conventions and patterns
3. Write comprehensive tests and ensure all existing tests pass
4. Submit a clean PR with clear documentation

ETA: within 24 hours

I'm available to start immediately and can provide regular progress updates.

GitHub: @Jayking40

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

[GBOYEE]

I'd like to work on this.

Approach:

• I'll add the audit logging with proper schema and query support
• Verify with existing tests + add new ones if needed

Estimated effort: ~1-2 hours. PR incoming shortly.

[GBOYEE]

I'd like to work on this.

Approach:

• I'll add the audit logging with proper schema and query support
• Verify with existing tests + add new ones if needed

Estimated effort: ~1-2 hours. PR incoming shortly.