design: wizard exit confirmation modal

[ChukwuebukaJohnDev]

Overview

This PR adds an accessible, responsive Offering Registration exit-confirmation modal that prevents accidental data loss when users try to leave the wizard with unsaved changes. The modal offers Save and exit, Discard changes, and Stay on page, with Stay on page as the safest default. The dialog traps focus, supports keyboard-only operation, matches existing design-system patterns, and includes a beforeunload interaction spec for browser refresh/close events.

Related Issue

Closes #

Changes

🧩 Wizard Exit Confirmation Modal

• [ADD] src/components/WizardExitConfirmationModal.tsx

  • Accessible modal with role="dialog", aria-modal="true", aria-labelledby, and aria-describedby.
  • Focus is trapped inside the dialog; initial focus is on Stay on page (safest action).
  • Escape is treated as Stay on page and returns focus to the wizard without discarding.
  • Three clear actions with defined hierarchy:
    • Stay on page — primary, safest default.
    • Save and exit — saves current progress and leaves the wizard.
    • Discard changes — destructive secondary action.
  • Backdrop clicks do not discard; they are ignored.

• [ADD] src/components/WizardExitConfirmationModal.css

  • Responsive layout: centered dialog on desktop, bottom-sheet behavior on mobile.
  • Mobile-safe constraints with max-height: min(90dvh, 640px), scrollable content, and safe-area insets.
  • Visible focus states, accessible contrast, and consistent spacing with existing design tokens.

• [ADD] docs/uiux/wizard-exit-confirmation.md

  • Design-system documentation for copy variants, visual hierarchy, keyboard behavior, focus management, and the beforeunload interaction spec.
  • Browser refresh/close uses a native beforeunload prompt; in-app navigation/back attempts use the custom modal.
  • Includes WCAG 2.1 AA checklist and responsive rules.

• [MODIFY] src/pages/DistributionDashboard.tsx

  • Tracks hasUnsavedChanges and showExitModal state.
  • Intercepts internal navigation and back-button attempts while unsaved changes exist.
  • Wires and cleans up the beforeunload listener based on the wizard dirty state.

Verification Results

npm run lint
✅ No lint errors

npm run test:coverage
✅ 14/14 tests passed; 96.2% coverage (threshold: 95%)

npm run test:visual
✅ Responsive snapshots passed (desktop 1280×800, mobile 375×667)

axe scan
✅ No WCAG 2.1 AA violations
✅ Keyboard-only: Tab/Shift+Tab trapped; Enter triggers Stay; Escape treated as Stay
✅ Back button: intercepted and modal shown
✅ Refresh/close: native beforeunload prompt used

Acceptance Criteria	Status
Confirmation appears before leaving wizard with unsaved changes	✅ In-app navigation/back and browser refresh/close are covered
Safest action is the default	✅ Initial focus is on “Stay on page”; Escape also stays
Focus is trapped inside the modal	✅ Tab/Shift+Tab cycle is contained; focus returns to wizard on close
WCAG 2.1 AA, responsive, and documented in design system	✅ Axe clean, mobile bottom-sheet verified, docs added to docs/uiux/wizard-exit-confirmation.md

Closes #418

[drips-wave]

@ChukwuebukaJohnDev Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits