Skip to content

fix(ui): replace window.confirm dialogs with in-app confirmation modal#418

Merged
utksh1 merged 12 commits into
utksh1:mainfrom
siddiqui7864:fix/33-confirm-modals-v2
May 31, 2026
Merged

fix(ui): replace window.confirm dialogs with in-app confirmation modal#418
utksh1 merged 12 commits into
utksh1:mainfrom
siddiqui7864:fix/33-confirm-modals-v2

Conversation

@siddiqui7864
Copy link
Copy Markdown
Contributor

Closes #33

Changes

  • Added reusable ConfirmModal component with full accessibility support
  • Replaced 5 window.confirm() calls (Scans.tsx: 3, Settings.tsx: 2)
  • Modal matches neo-brutalist design system

Accessibility Features Implemented

✅ Focus automatically moves to confirm button on open
✅ Tab key is trapped within modal (cycles between buttons)
✅ Escape key cancels, Enter key confirms (safe from button focus)
✅ Background hidden from screen readers with aria-hidden
✅ Focus returns to trigger element after modal closes
✅ Proper ARIA attributes (role="dialog", aria-modal, etc.)

Testing

  • ✅ 5 unit tests for accessibility features (all passing)
  • ✅ All frontend tests: 159 passed
  • ✅ Manual testing of all 5 confirmation dialogs

Ready for review! 🚀

- Add ConfirmModal component with full accessibility support
- Focus trapping, ARIA labels, keyboard navigation
- Replace 5 window.confirm dialogs (Scans: 3, Settings: 2)
- Add comprehensive unit tests for accessibility features

Closes utksh1#33
@siddiqui7864 siddiqui7864 force-pushed the fix/33-confirm-modals-v2 branch from 4da6874 to d4e7e68 Compare May 29, 2026 18:34
@siddiqui7864
Copy link
Copy Markdown
Contributor Author

@utksh1 This PR has been rebased and all conflicts resolved. All 5 accessibility requirements are implemented with passing tests. Please review when you have time.

@utksh1 utksh1 added level:intermediate 35 pts difficulty label for moderate contributor PRs type:accessibility Accessibility work category bonus label type:feature Feature work category bonus label area:frontend Frontend React/UI work labels May 30, 2026
Copy link
Copy Markdown
Owner

@utksh1 utksh1 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for replacing the confirm dialogs. This needs another pass before merge: sets on , but the modal itself is rendered inside , which can hide the dialog from assistive technologies while it is open. Please either portal the modal outside the app root before hiding background content, or remove/adjust that root-level handling. Also remove unrelated/generated files from the diff (, lockfile metadata churn, and any backup/Zone.Identifier artifacts) so the PR stays focused.

@utksh1
Copy link
Copy Markdown
Owner

utksh1 commented May 30, 2026

Clarifying the requested change: ConfirmModal currently sets aria-hidden=true on #root while the dialog is also rendered inside #root, which can hide the open dialog from assistive tech. Please portal it outside #root or adjust/remove that root-level aria-hidden behavior. Also remove backend/package-lock.json, lockfile metadata churn, and generated backup/Zone.Identifier artifacts from the PR.

- Use createPortal to render modal directly in document.body
- Remove aria-hidden from root (no longer needed since modal is outside)
- Remove backend/package-lock.json from PR
- Update .gitignore to prevent backend lock files
@siddiqui7864
Copy link
Copy Markdown
Contributor Author

@utksh1 Thank you for the detailed review! I've made the requested changes:

React Portal - Modal now renders outside #root using createPortal
Removed aria-hidden from root - No longer needed since modal is outside
Cleaned up PR - Removed backend/package-lock.json from the diff
Updated .gitignore - Prevents backend lock files from appearing again

The modal is now fully accessible and the PR contains only relevant changes.

Ready for re-review! 🚀

@siddiqui7864
Copy link
Copy Markdown
Contributor Author

@utksh1 All requested changes have been implemented. The following issues have been addressed:

Changes Made

1. Accessibility Improvements

  • Implemented React Portal to render the ConfirmModal outside #root, ensuring screen readers can access the dialog properly
  • Removed aria-hidden from root element (no longer needed with Portal implementation)
  • Added focus trapping with Tab key navigation
  • Added keyboard support (Enter to confirm, Escape to cancel)
  • Added proper ARIA attributes (role="dialog", aria-modal, aria-labelledby, aria-describedby)

2. Code Cleanup

  • Removed trailing whitespace from Settings.tsx (resolved formatting-hygiene failure)
  • Removed unnecessary files (backend/package-lock.json, backup files, Zone.Identifier artifacts)
  • Updated .gitignore to prevent future inclusion of backend lock files

3. Test Updates

  • Updated SettingsSaveReset.test.tsx to work with the new ConfirmModal instead of window.confirm
  • All 5 accessibility tests passing
  • All frontend tests passing (159 tests total)

4. Conflict Resolution

  • Successfully rebased onto latest upstream/main
  • Resolved all merge conflicts in Settings.tsx
  • Preserved upstream theme system features while adding modal functionality

Current Status

  • ✅ All CI checks passing (6/6)
  • ✅ No merge conflicts
  • ✅ Ready for final review

This PR is now ready to be merged. Thank you for your detailed review and guidance.

Copy link
Copy Markdown
Owner

@utksh1 utksh1 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I removed the unrelated .gitignore and frontend/package-lock.json churn from the branch. The remaining diff is focused on replacing confirmation dialogs with the portal-based modal, updating Scans/Settings, and covering the modal/reset behavior. Checks are green, so this is good to merge.

@utksh1 utksh1 added the gssoc:approved Admin validation: approved for GSSoC scoring label May 31, 2026
Copy link
Copy Markdown
Owner

@utksh1 utksh1 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Re-reviewed after the final main sync. The merge commit only brings in current main, the modal diff remains focused, and all checks are green.

@utksh1 utksh1 merged commit 90d2d14 into utksh1:main May 31, 2026
6 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

area:frontend Frontend React/UI work gssoc:approved Admin validation: approved for GSSoC scoring level:intermediate 35 pts difficulty label for moderate contributor PRs type:accessibility Accessibility work category bonus label type:feature Feature work category bonus label

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[UX/FIX] Replace browser confirm dialogs on Scans page with in-app confirmation modals

2 participants