feat(SW-185): fix typo and updated with aria-label

components/Footer/Details/index.tsx

@@ -9,9 +9,9 @@ import { footer } from "../mockedData"
 
 import styles from "./details.module.css"
 
-import type { IconName } from "@/types/components/icon"
+import { IconName } from "@/types/components/icon"
 
-function socialIcon(iconName: string): JSX.Element | null {
+function SocialIcon({ iconName }: { iconName: string }) {
   const SocialIcon = getIconByIconName(iconName as IconName)
   return SocialIcon ? <SocialIcon color="white" /> : <span>{iconName}</span>
 }
@@ -49,9 +49,9 @@ export default function FooterDetails() {
               href={link.href}
               key={link.id}
               target="_blank"
-              title={link.title}
+              aria-label={link.title}
             >
-              {socialIcon(link.title)}
+              <SocialIcon iconName={link.title} />
             </a>
           ))}
         </nav>
@@ -74,7 +74,6 @@ export default function FooterDetails() {
                   color="peach50"
                   href={link.href}
                   target="_blank"
-                  title={link.title}
                 >
                   {link.title}
                 </Link>

components/Footer/Navigation/SecondaryNav/index.tsx

@@ -5,7 +5,7 @@ import Body from "@/components/TempDesignSystem/Text/Body"
 import styles from "./secondarynav.module.css"
 
 import {
-  AppDownnLoadLinks,
+  AppDownLoadLinks,
   type FooterSecondaryNavProps,
 } from "@/types/components/footer/navigation"
 
@@ -22,10 +22,10 @@ export default function FooterSecondaryNav({
         <ul className={styles.secondaryNavigationList}>
           {appDownloads.links.map((link) => (
             <li key={link.id} className={styles.appDownloadItem}>
-              <a href={link.href} target="_blank" rel="noopener noreferrer">
+              <a href={link.href} target="_blank" aria-label={link.title}>
                 <Image
                   src={
-                    AppDownnLoadLinks[link.id as keyof typeof AppDownnLoadLinks]
+                    AppDownLoadLinks[link.id as keyof typeof AppDownLoadLinks]
                   }
                   alt={link.title}
                   width={125}
@@ -49,6 +49,7 @@ export default function FooterSecondaryNav({
                     href={link.href}
                     key={link.title}
                     target={link.openInNewTab ? "_blank" : "_self"}
+                    aria-label={link.title}
                   >
                     {link.title}
                   </a>

types/components/footer/navigation.ts

@@ -31,7 +31,7 @@ export type FooterSecondaryNavProps = {
   }
 }
 
-export enum AppDownnLoadLinks {
+export enum AppDownLoadLinks {
   apple = "/_static/img/app-store-badge.svg",
   google = "/_static/img/google-play-badge.svg",
 }