Missing Form Validation and Accessibility for Newsletter Form

[codeCraft-Ritik]

Summary:

The newsletter subscription form (lines 660-666) lacks essential features:

• ❌ No email validation beyond HTML5's required attribute
• ❌ Submit button contains only an icon with no visible text or aria-label (accessibility issue)
• ❌ No success/error feedback to user
• ❌ Form action attribute is empty (form won't submit anywhere)
• ❌ No aria-labels or descriptions for screen readers

Impact:

High - Reduces conversion rate and violates accessibility standards (WCAG 2.1). Users can't complete newsletter signup and screen reader users can't understand the button's purpose.

Suggested Fix:

<form class="newsletter-form" id="newsletterForm">
  <input 
    type="email" 
    name="email_address" 
    placeholder="Enter your email" 
    required 
    class="email-field"
    aria-label="Email address for newsletter">

  <button 
    type="submit" 
    class="form-btn"
    aria-label="Subscribe to newsletter">
    <ion-icon name="paper-plane" aria-hidden="true"></ion-icon>
    <span class="visually-hidden">Subscribe</span>
  </button>
</form>

<script>
document.getElementById('newsletterForm').addEventListener('submit', function(e) {
  e.preventDefault();
  
  const email = this.querySelector('.email-field').value;
  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  
  if (!emailRegex.test(email)) {
    alert('Please enter a valid email address');
    return;
  }
  
  // Handle form submission (send to backend)
  console.log('Newsletter signup:', email);
  alert('Thank you for subscribing!');
  this.reset();
});
</script>