From cce5af83a4f246897ce5dd535626476b0771f35e Mon Sep 17 00:00:00 2001
From: Pontus Dreij <pontus.dreij@scandichotels.com>
Date: Wed, 28 Aug 2024 08:52:59 +0200
Subject: [PATCH] feat(SW-185): fix typo and updated with aria-label

---
 components/Footer/Details/index.tsx                 | 9 ++++-----
 components/Footer/Navigation/SecondaryNav/index.tsx | 7 ++++---
 types/components/footer/navigation.ts               | 2 +-
 3 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/components/Footer/Details/index.tsx b/components/Footer/Details/index.tsx
index 830abfb2c..7d0961527 100644
--- a/components/Footer/Details/index.tsx
+++ b/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>
diff --git a/components/Footer/Navigation/SecondaryNav/index.tsx b/components/Footer/Navigation/SecondaryNav/index.tsx
index afbf36dd4..adb2d3163 100644
--- a/components/Footer/Navigation/SecondaryNav/index.tsx
+++ b/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>
diff --git a/types/components/footer/navigation.ts b/types/components/footer/navigation.ts
index 5c62059d7..2e828298c 100644
--- a/types/components/footer/navigation.ts
+++ b/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",
 }