Fix: Prevent Accidental Map Zooming While Scrolling on Landing Page

[mdkaifansari04]

Proposed change

Implemented a click-to-activate interaction pattern that prevents accidental zooming while preserving full map functionality

• Disabled default scroll wheel zoom in Leaflet map configuration
• Added interactive overlay with visual indicator "Click to interact with map"
• Map becomes interactive only when user clicks, indicating intent

Video Demonstration

2025-10-29.00-35-53.mov

Checklist

• I've read and followed the contributing guidelines.
• I've run make check-test locally; all checks and tests passed.

[coderabbitai]

Caution

Review failed

The pull request is closed.

Summary by CodeRabbit

Release Notes

• New Features
  • Map now displays an interactive overlay requiring user engagement before enabling scroll wheel zoom, preventing accidental page scrolling while interacting with the map.
  • Added keyboard navigation support (Enter/Space keys) to dismiss the overlay and activate map interactions, improving accessibility for all users.
  • Enhanced map container with responsive full-width and full-height layout.

Walkthrough

The ChapterMap component now includes an interactive overlay that prompts user engagement before enabling scroll wheel zoom. Map state tracks active/inactive status, toggled via click and mouseout events. Comprehensive test coverage validates overlay rendering, keyboard accessibility, and event handler registration.

Changes

Cohort / File(s)	Summary
Component Implementation frontend/src/components/ChapterMap.tsx	Introduces isMapActive state for tracking map interaction status; adds overlay component that displays when map is inactive; registers click and mouseout event listeners to enable/disable scroll wheel zoom and update active state; overlay supports click and keyboard interaction (Enter/Space) with accessibility attributes.
Test Suite Expansion frontend/__tests__/unit/components/ChapterMap.test.tsx	Extends test coverage with fireEvent import; adds mock scrollWheelZoom object with enable/disable methods; verifies container relative positioning and Tailwind class usage (h-full, w-full); introduces new test suites for overlay display/removal, scroll wheel zoom enablement on interaction, keyboard accessibility, and event listener registration for map click/mouseout.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

• Overlay interaction logic: Verify click and keyboard event handlers (Enter/Space) correctly toggle scroll wheel zoom and active state
• Accessibility attributes: Confirm overlay includes proper aria attributes and keyboard support
• State management: Review isMapActive state initialization and update flow across map click, mouseout, and overlay interactions
• Test comprehensiveness: Ensure test coverage adequately validates all new overlay behaviors and edge cases

Possibly related PRs

• test: add comprehensive unit tests for ChapterMap component #1874: Adds comprehensive ChapterMap tests that complement the expanded test suite in this PR covering map initialization and interaction patterns.

Suggested reviewers

• arkid15r
• kasya

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

📜 Recent review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between caa3092 and ddd8592.

📒 Files selected for processing (2)

• frontend/__tests__/unit/components/ChapterMap.test.tsx (6 hunks)
• frontend/src/components/ChapterMap.tsx (4 hunks)

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[github-actions]

The PR must be linked to an issue assigned to the PR author.

[sonarqubecloud]

Quality Gate passed

Issues
5 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud