Add Engagement Modal with custom animations and accessibility features

[jeromehardaway]

This pull request introduces a new EngagementModal component, enhancements to animations and accessibility, and minor updates to existing components and dependencies. The changes focus on improving user interaction and modularity across the codebase.

New Features and Components:

• Engagement Modal Implementation: Added a new EngagementModal component with animations, accessibility features (e.g., focus trap and ESC key handling), and session-based display logic. It includes customizable headline, body, and call-to-action buttons. [1] [2]
• Animation Enhancements: Introduced custom "wiggle" animations for emojis in call-to-action buttons, improving visual engagement. [1] [2]

Dependency Updates:

• New Dependency: Added framer-motion to package.json to enable advanced animations in the EngagementModal.

Component Enhancements:

• Section Component Update: Added an optional id prop to the Section component for enhanced accessibility and modularity. [1] [2]
• Newsletter Section Update: Passed a new id prop (newsletter) to the Section component in the newsletter layout for improved accessibility.

Integration:

• Engagement Modal Integration: Imported the EngagementModal component into the main page for potential use.- Implemented EngagementModal component with props for headline, body, and call-to-action buttons.

• Added custom CSS animations for emoji wiggle effect on button hover.
• Integrated Framer Motion for smooth modal transitions.
• Included accessibility features such as focus trapping and ESC key close functionality.
• Added session storage logic to prevent multiple modal displays in a session.
• Provided a development-only button to test modal functionality.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
vets-who-code-app	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jun 17, 2025 0:38am

[Copilot]

Pull Request Overview

This PR introduces a new EngagementModal component with custom animations and enhanced accessibility features, along with minor updates to existing components and dependency changes.

• Added a fully featured EngagementModal with focus trapping, ESC key handling, session-based display logic, and custom "wiggle" animations.
• Updated NewsletterArea and Section components to support an optional id prop for improved accessibility.
• Integrated framer-motion for smooth modal transitions and added new CSS files for modal animations.

Reviewed Changes

Copilot reviewed 12 out of 12 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
src/pages/index.tsx	Added EngagementModal import and integrated the modal on the homepage.
src/containers/newsletter/layout-02/index.tsx	Updated the Section component usage by passing an id ("newsletter") for accessibility.
src/components/ui/section/index.tsx	Modified Section component to accept and pass through an optional id prop.
src/components/EngagementModal.tsx	Implements the EngagementModal with all required accessibility and animation features.
src/components/EngagementModal.tsx.fixed	Contains a variant of the EngagementModal implementation with additional debug code.
src/components/EngagementModal.module.css	Provides module CSS for the modal’s custom "wiggle" animations.
src/assets/css/engagement-modal.css	Provides asset CSS for modal animations (duplicative with the module CSS).
package.json	Added the framer-motion dependency to support advanced animations in the modal.

Comments suppressed due to low confidence (1)

src/components/EngagementModal.tsx.fixed:1

• There are two versions of the EngagementModal component. Please remove the redundant 'EngagementModal.tsx.fixed' file to avoid confusion and ensure maintainability.

import React, { useEffect, useRef, useState } from "react";

[github-actions]

🔍 Code Quality Score Breakdown:

• 📖 Readability: 5/10
• 📈 Scalability: 5/10
• 🚀 Performance: 5/10
• 🛠️ Maintainability: 8/10
• ✅ Overall Score: 5.8/10

💡 Recommendations:

• 🧹 Reduce ESLint warnings to improve readability.
• 📦 Break up complex functions or components.
• ⚙️ Consider splitting large files or lazy-loading.
• 🔁 Refactor to increase your overall score next cycle.