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/Details/index.tsx

@@ -1,4 +1,3 @@
-import Image from "@scandic-hotels/design-system/Image"
 import Link from "@scandic-hotels/design-system/OldDSLink"
 import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
 import { Typography } from "@scandic-hotels/design-system/Typography"
@@ -7,30 +6,21 @@ import { getFooter } from "@/lib/trpc/memoizedRequests"
 
 import LanguageSwitcher from "@/components/LanguageSwitcher"
 import { getIntl } from "@/i18n"
-import { getLang } from "@/i18n/serverContext"
 
+import { LogoLink } from "../../LogoLink"
 import SocialLink from "./SocialLink"
 
 import styles from "./details.module.css"
 
 export default async function FooterDetails() {
-  const lang = await getLang()
   const intl = await getIntl()
-  // preloaded
   const footer = await getFooter()
   const currentYear = new Date().getFullYear()
 
   return (
     <div className={styles.details}>
       <div className={styles.topContainer}>
-        <Link href={`/${lang}`}>
-          <Image
-            alt="Scandic Hotels logo"
-            height={22}
-            src="/_static/img/scandic-logotype-white.svg"
-            width={103}
-          />
-        </Link>
+        <LogoLink isInverted />
         <nav className={styles.socialNav}>
           {footer?.socialMedia.links.map(
             ({ href }) => href && <SocialLink link={href} key={href.title} />
@@ -73,21 +63,13 @@ export default async function FooterDetails() {
 }
 
 export async function FooterDetailsSkeleton() {
-  const lang = await getLang()
   const intl = await getIntl()
   const currentYear = new Date().getFullYear()
 
   return (
     <section className={styles.details}>
       <div className={styles.topContainer}>
-        <Link href={`/${lang}`}>
-          <Image
-            alt="Scandic Hotels logo"
-            height={22}
-            src="/_static/img/scandic-logotype-white.svg"
-            width={103}
-          />
-        </Link>
+        <LogoLink isInverted />
         <nav className={styles.socialNav}>
           <SkeletonShimmer width="10ch" height="20px" contrast="dark" />
         </nav>