refactor(footer): improve code quality and accessibility

- Extract inline JavaScript to external file (newsletter.js)
- Replace inline styles with CSS classes for better maintainability
- Add proper ARIA labels and semantic HTML for accessibility
- Add JSDoc comments for better code documentation
- Add visually-hidden class for accessible form labels
- Use Hugo asset pipeline for JavaScript loading with defer attribute

Author: pankaj-bind

assets/js/newsletter.js

@@ -0,0 +1,69 @@
+// Newsletter subscription form handler
+document.addEventListener('DOMContentLoaded', function() {
+  const form = document.getElementById('newsletter-form');
+  const emailInput = document.getElementById('newsletter-email');
+  const messageDiv = document.getElementById('newsletter-message');
+  
+  if (!form || !emailInput || !messageDiv) return;
+  
+  /**
+   * Display a message to the user
+   * @param {string} text - Message text to display
+   * @param {boolean} isError - Whether this is an error message
+   */
+  function showMessage(text, isError) {
+    messageDiv.textContent = text;
+    messageDiv.style.color = isError ? '#ff6b6b' : '#00d3a9';
+    messageDiv.setAttribute('role', isError ? 'alert' : 'status');
+    messageDiv.setAttribute('aria-live', 'polite');
+  }
+  
+  /**
+   * Clear the message display
+   */
+  function clearMessage() {
+    messageDiv.textContent = '';
+    messageDiv.removeAttribute('role');
+    messageDiv.removeAttribute('aria-live');
+  }
+  
+  /**
+   * Validate email format
+   * @param {string} email - Email address to validate
+   * @returns {boolean} Whether the email is valid
+   */
+  function isValidEmail(email) {
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    return emailRegex.test(email);
+  }
+  
+  // Clear message when user starts typing
+  emailInput.addEventListener('input', clearMessage);
+  
+  // Handle form submission
+  form.addEventListener('submit', function(e) {
+    e.preventDefault();
+    
+    const email = emailInput.value.trim();
+    
+    // Check if email is empty
+    if (!email) {
+      showMessage('Please enter your email address', true);
+      emailInput.focus();
+      return false;
+    }
+    
+    // Validate email format
+    if (!isValidEmail(email)) {
+      showMessage('Please enter a valid email address', true);
+      emailInput.focus();
+      return false;
+    }
+    
+    // Success message
+    showMessage('Thank you for subscribing!', false);
+    emailInput.value = '';
+    
+    return false;
+  });
+});

assets/scss/_footer_project.scss

@@ -280,6 +280,35 @@
     border: none;
   }
 
+  .newsletter-container {
+    display: flex;
+    align-items: flex-start;
+    flex-direction: column;
+  }
+
+  .newsletter-input-row {
+    display: flex;
+    align-items: center;
+  }
+
+  .newsletter-message {
+    margin-top: 0.5rem;
+    font-size: 0.9rem;
+    min-height: 1.5rem;
+  }
+
+  .visually-hidden {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    padding: 0;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+
   .footer-hr {
     width: 100%;
     color: $white;

layouts/partials/footer.html

@@ -62,66 +62,33 @@ <h5 class="footer-h5"><a href="{{ .url }}">{{ .name }}</a></h5>
       </div>
       <div class="row footer-info2 subscribe">
         <div class="footer-end">
-          <form name="contactform" id="newsletter-form">
+          <form name="contactform" id="newsletter-form" aria-label="Newsletter subscription form">
             <div>
               <p>
                 Subscribe to our Newsletter
               </p>
-              <div style="display: flex; align-items: flex-start; flex-direction: column;">
-                <div style="display: flex; align-items: center;">
-                  <input class="footer-input" id="newsletter-email" type="email" placeholder="Email Address" required />
+              <div class="newsletter-container">
+                <div class="newsletter-input-row">
+                  <label for="newsletter-email" class="visually-hidden">Email Address</label>
+                  <input 
+                    class="footer-input" 
+                    id="newsletter-email" 
+                    type="email" 
+                    placeholder="Email Address" 
+                    aria-required="true"
+                    aria-describedby="newsletter-message"
+                    required 
+                  />
                   <button class="footer-button" title="Subscribe" type="submit">Subscribe</button>
                 </div>
-                <div id="newsletter-message" style="margin-top: 0.5rem; font-size: 0.9rem; min-height: 1.5rem;"></div>
+                <div id="newsletter-message" class="newsletter-message" aria-live="polite"></div>
               </div>
             </div>
           </form>
         </div>
       </div>
-      <script>
-        document.addEventListener('DOMContentLoaded', function() {
-          const form = document.getElementById('newsletter-form');
-          const emailInput = document.getElementById('newsletter-email');
-          const messageDiv = document.getElementById('newsletter-message');
-          
-          function showMessage(text, isError) {
-            messageDiv.textContent = text;
-            messageDiv.style.color = isError ? '#ff6b6b' : '#00d3a9';
-          }
-          
-          function clearMessage() {
-            messageDiv.textContent = '';
-          }
-          
-          if (form) {
-            emailInput.addEventListener('input', clearMessage);
-            
-            form.addEventListener('submit', function(e) {
-              e.preventDefault();
-              
-              const email = emailInput.value.trim();
-              
-              if (!email) {
-                showMessage('Please enter your email address', true);
-                emailInput.focus();
-                return false;
-              }
-              
-              const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
-              if (!emailRegex.test(email)) {
-                showMessage('Please enter a valid email address', true);
-                emailInput.focus();
-                return false;
-              }
-              
-              showMessage('Thank you for subscribing!', false);
-              emailInput.value = '';
-              
-              return false;
-            });
-          }
-        });
-      </script>
+      {{ $newsletter := resources.Get "js/newsletter.js" }}
+      <script src="{{ $newsletter.Permalink }}" defer></script>
     </div>
   </div>
   <hr class="footer-hr" />