Feat/BOOK-117 svg accessibility

* feat(BOOK-117): Added aria-label to Scandic Friends levels
* feat(BOOK-117): Added aria-label to hotel logos
* feat(BOOK-117): Added alt text to app download images
* feat(BOOK-117): Added same logo component to footer as the one in the header
* feat(BOOK-117): Added aria attributes to icons similar to how we handled MaterialIcon aria attributes

Approved-by: Bianca Widstam
Approved-by: Matilda Landström

apps/scandic-web/components/Footer/Navigation/SecondaryNav/index.tsx

@@ -1,5 +1,7 @@
 "use client"
 
+import { useIntl } from "react-intl"
+
 import Image from "@scandic-hotels/design-system/Image"
 import Link from "@scandic-hotels/design-system/OldDSLink"
 import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
@@ -8,9 +10,10 @@ import { Typography } from "@scandic-hotels/design-system/Typography"
 import useLang from "@/hooks/useLang"
 import { trackFooterClick, trackSocialMediaClick } from "@/utils/tracking"
 
+import { getAppDownloadAttributes } from "./utils"
+
 import styles from "./secondarynav.module.css"
 
-import { AppDownLoadLinks } from "@/types/components/footer/appDownloadIcons"
 import { type FooterSecondaryNavProps } from "@/types/components/footer/navigation"
 
 export default function FooterSecondaryNav({
@@ -18,6 +21,7 @@ export default function FooterSecondaryNav({
   appDownloads,
 }: FooterSecondaryNavProps) {
   const lang = useLang()
+  const intl = useIntl()
 
   return (
     <div className={styles.secondaryNavigation}>
@@ -27,30 +31,28 @@ export default function FooterSecondaryNav({
         </Typography>
         {appDownloads.links.length ? (
           <ul className={styles.secondaryNavigationList}>
-            {appDownloads.links.map(
-              ({ href, type }) =>
-                href && (
-                  <li key={type}>
-                    <a
-                      href={href.href}
-                      target="_blank"
-                      aria-label={href.title}
-                      onClick={() => trackSocialMediaClick(href.title)}
-                    >
-                      <Image
-                        src={
-                          AppDownLoadLinks[
-                            `${type}_${lang}` as keyof typeof AppDownLoadLinks
-                          ]
-                        }
-                        alt={href.title}
-                        width={125}
-                        height={40}
-                      />
-                    </a>
-                  </li>
-                )
-            )}
+            {appDownloads.links.map(({ href, type }) => {
+              const attributes = getAppDownloadAttributes(
+                intl,
+                `${type}_${lang}`
+              )
+              return href && attributes ? (
+                <li key={type}>
+                  <a
+                    href={href.href}
+                    target="_blank"
+                    onClick={() => trackSocialMediaClick(href.title)}
+                  >
+                    <Image
+                      src={attributes.src}
+                      alt={attributes.alt}
+                      width={125}
+                      height={40}
+                    />
+                  </a>
+                </li>
+              ) : null
+            })}
           </ul>
         ) : null}
       </nav>