Newsletter componnet adjustment, improving accessibility score

Author: mariana-caldas

components/layout/Footer.js

@@ -16,7 +16,7 @@ export default function Footer() {
               src='/images/svg/logo.svg'
               height={250}
               width={250}
-              alt='Logo'
+              alt='Our footer logo'
             />
           </a>
         </Link>
@@ -34,20 +34,26 @@ export default function Footer() {
           </nav>
           <div className={footerStyles.footer__socialIcons}>
             <ul className={footerStyles.footer__socialList}>
-              {linksSocial.filter(link => link.isVisible).map(link => (
-                <li className={footerStyles.footer__socialItem} key={link.text}>
-                  <Link href={link.href}>
-                    <a title={link.text} target='_blank'>
-                      <Image
-                        href={link.href}
-                        src={link.src}
-                        height={65}
-                        width={47}
-                      />
-                    </a>
-                  </Link>
-                </li>
-              ))}
+              {linksSocial
+                .filter(link => link.isVisible)
+                .map(link => (
+                  <li
+                    className={footerStyles.footer__socialItem}
+                    key={link.text}
+                  >
+                    <Link href={link.href}>
+                      <a title={link.text} target='_blank'>
+                        <Image
+                          href={link.href}
+                          src={link.src}
+                          height={65}
+                          width={47}
+                          alt={link.alt}
+                        />
+                      </a>
+                    </Link>
+                  </li>
+                ))}
             </ul>
           </div>
         </div>

components/mailchimp/NewsletterForm.js

@@ -1,4 +1,5 @@
 import { createRef, useState } from 'react';
+import Image from 'next/image';
 import { decode } from 'html-entities';
 import Container from '@/components/containers/Container';
 import newsletterStyles from '@/styles/Newsletter.module.scss';
@@ -114,9 +115,18 @@ const NewsletterForm = ({ status, message, onValidated }) => {
   return (
     <section className={newsletterStyles.newsletter}>
       <Container className={newsletterStyles.newsletter__inner}>
-        <h4 className={newsletterStyles.newsletter__title}>
-          Sign up for news &#62;
-        </h4>
+        <h2 className={newsletterStyles.newsletter__title}>
+          Sign up for news
+          <span className={newsletterStyles.newsletter__right_chevron}>
+            <Image
+              src='/images/svg/right-chevron.svg'
+              height={18}
+              width={18}
+              alt='Right Chevron SVG'
+              className={newsletterStyles.newsletter__right_chevron_image}
+            />
+          </span>
+        </h2>
         <div>
           <form
             className={newsletterStyles.newsletter__form}
@@ -125,30 +135,30 @@ const NewsletterForm = ({ status, message, onValidated }) => {
             <input
               className={`${newsletterStyles.newsletter__input} ${newsletterStyles.newsletter__name}`}
               onChange={event => setName(event?.target?.value ?? '')}
-              type="text"
-              name="name"
+              type='text'
+              name='name'
               value={name}
-              placeholder="name"
+              placeholder='name'
             />
             <input
               className={`${newsletterStyles.newsletter__input} ${newsletterStyles.newsletter__email}`}
               onChange={event => setEmail(event?.target?.value ?? '')}
-              type="email"
-              name="email"
+              type='email'
+              name='email'
               value={email}
-              placeholder="email"
+              placeholder='email'
               onKeyUp={event => handleInputKeyEvent(event)}
             />
             <button
               className={newsletterStyles.newsletter__button}
-              type="submit"
+              type='submit'
             >
               Subscribe
             </button>
 
             <ReCAPTCHA
               ref={recaptchaRef}
-              size="invisible"
+              size='invisible'
               sitekey={SITE_KEY}
               onChange={onReCAPTCHAChange}
             />

next.config.js

@@ -7,4 +7,8 @@ module.exports = withPWA({
     skipWaiting: true,
     disable: process.env.NODE_ENV === 'development',
   },
+  i18n: {
+    locales: ['en'],
+    defaultLocale: 'en',
+  },
 });

pages/index.js

@@ -13,7 +13,7 @@ export default function Home() {
         <TwoColumn
           title="Let's grow together."
           image='/images/join-us.webp'
-          altTag='Join us'
+          altTag='Join the project'
           content='The Web Dev Path is a team of professional developers project that aims to provide a comprehensive path for people who seek to begin their web development journey.'
           link='/about'
           customBtnClass='inverted-grey'
@@ -33,13 +33,21 @@ export default function Home() {
 
       <RevealContentContainer>
         <CardsColumns
-          titles={['Join us', 'Volunteer', 'Become a mentor']}
+          titles={[
+            'Join the project',
+            'Volunteer to learn together',
+            'Become a project mentor',
+          ]}
           images={[
             '/images/join-us.webp',
             '/images/volunteer.webp',
             '/images/mentor.webp',
           ]}
-          altTags={['Join us', 'Volunteer', 'Become a mentor']}
+          altTags={[
+            'Join the project',
+            'Volunteer to learn together',
+            'Become a project mentor',
+          ]}
           content={[
             'Are you learning web development and need mentorship? Are you a web dev looking for help or a code buddy for a project? ',
             'Would you like to volunteer? For roles other than mentor/mentee, please get in touch.',

public/images/svg/iconmonstr-github.svg

@@ -40,13 +40,32 @@
     color: $primary-content-color;
     margin: 0;
     white-space: nowrap;
+    display:flex;
+    gap: 0.5rem;
 
     @include medium-desktop {
       font-size: 1.75rem;
+      gap: 1rem;
     }
 
     @include large-desktop {
       font-size: 2.25rem;
+      gap: 1.5rem;
+    }
+  }
+
+  &__right_chevron{
+    position: relative;
+    top: 0.1rem;
+
+    @include large-desktop {
+      top: unset;
+
+      img {
+        width: 1.5rem !important;
+        height: 1.5rem !important;
+      }
+
     }
   }
 
@@ -55,9 +74,6 @@
       display: flex;
       align-items: center;
       gap: 1rem;
-    }
-
-    @include desktop {
       margin-left: auto;
     }
   }
@@ -69,7 +85,7 @@
     height: 2rem;
     margin: 1rem 0;
     padding: 1rem 1.25rem;
-    border: none;
+    border: 1px solid $dark-bg-color;
     width: 100%;
 
     @include large-desktop {

public/images/svg/iconmonstr-twitter.svg

@@ -15,20 +15,23 @@ export const linksSocial = [
     text: 'LinkedIn',
     href: '#',
     src: '/images/svg/LinkedIn.svg',
+    alt: 'Find us on LinkedIn',
     isVisible: false,
   },
   {
     id: 2,
     text: 'YouTube',
     href: 'https://www.youtube.com/channel/UCCLwmU7r4IUWZOtH3bCEN6g',
     src: '/images/svg/YouTube.svg',
+    alt: 'Find us on YouTube',
     isVisible: true,
   },
   {
     id: 3,
     text: 'GitHub',
     href: 'https://github.com/Web-Dev-Path',
     src: '/images/svg/GitHub.svg',
+    alt: 'Find us on GitHub',
     isVisible: true,
   },
 ];