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
2025-11-13 06:34:18 +00:00
parent c4b564998c
commit ce469bc4b4
117 changed files with 541 additions and 247 deletions
--- a/apps/scandic-web/components/ContentType/HotelPage/Hero/Logos/DowntownCamperLarge.tsx
+++ b/apps/scandic-web/components/ContentType/HotelPage/Hero/Logos/DowntownCamperLarge.tsx
@@ -6,6 +6,8 @@ export function DowntownCamperLogoLarge({ className }: { className?: string }) {
      viewBox="0 0 308 315"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
+      // eslint-disable-next-line formatjs/no-literal-string-in-jsx
+      aria-label="Downtown Camper by Scandic"
      className={className}
    >
      <g clipPath="url(#clip0_11502_35791)">
--- a/apps/scandic-web/components/ContentType/HotelPage/Hero/Logos/DowntownCamperSmall.tsx
+++ b/apps/scandic-web/components/ContentType/HotelPage/Hero/Logos/DowntownCamperSmall.tsx
@@ -2,6 +2,8 @@ export function DowntownCamperLogoSmall({ className }: { className?: string }) {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
+      // eslint-disable-next-line formatjs/no-literal-string-in-jsx
+      aria-label="Downtown Camper"
      width="180"
      height="36"
      viewBox="0 0 180 36"
--- a/apps/scandic-web/components/ContentType/HotelPage/Hero/Logos/GrandHotelLarge.tsx
+++ b/apps/scandic-web/components/ContentType/HotelPage/Hero/Logos/GrandHotelLarge.tsx
@@ -6,6 +6,8 @@ export function GrandHotelLogoLarge({ className }: { className?: string }) {
      viewBox="0 0 308 315"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
+      // eslint-disable-next-line formatjs/no-literal-string-in-jsx
+      aria-label="Grand Hotel Oslo by Scandic"
      className={className}
    >
      <path
--- a/apps/scandic-web/components/ContentType/HotelPage/Hero/Logos/GrandHotelSmall.tsx
+++ b/apps/scandic-web/components/ContentType/HotelPage/Hero/Logos/GrandHotelSmall.tsx
@@ -2,6 +2,8 @@ export function GrandHotelLogoSmall({ className }: { className?: string }) {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
+      // eslint-disable-next-line formatjs/no-literal-string-in-jsx
+      aria-label="Grand Hotel Oslo"
      width="88"
      height="34"
      viewBox="0 0 88 34"
--- a/apps/scandic-web/components/ContentType/HotelPage/Hero/Logos/HaymarketLarge.tsx
+++ b/apps/scandic-web/components/ContentType/HotelPage/Hero/Logos/HaymarketLarge.tsx
@@ -6,6 +6,8 @@ export function HaymarketLogoLarge({ className }: { className?: string }) {
      viewBox="0 0 308 315"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
+      // eslint-disable-next-line formatjs/no-literal-string-in-jsx
+      aria-label="Haymarket by Scandic"
      className={className}
    >
      <path
--- a/apps/scandic-web/components/ContentType/HotelPage/Hero/Logos/HaymarketSmall.tsx
+++ b/apps/scandic-web/components/ContentType/HotelPage/Hero/Logos/HaymarketSmall.tsx
@@ -2,6 +2,8 @@ export function HaymarketLogoSmall({ className }: { className?: string }) {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
+      // eslint-disable-next-line formatjs/no-literal-string-in-jsx
+      aria-label="Haymarket"
      width="139"
      height="36"
      viewBox="0 0 139 36"
--- a/apps/scandic-web/components/ContentType/HotelPage/Hero/Logos/HotelNorgeLarge.tsx
+++ b/apps/scandic-web/components/ContentType/HotelPage/Hero/Logos/HotelNorgeLarge.tsx
@@ -6,6 +6,8 @@ export function HotelNorgeLogoLarge({ className }: { className?: string }) {
      viewBox="0 0 308 315"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
+      // eslint-disable-next-line formatjs/no-literal-string-in-jsx
+      aria-label="Hotel Norge by Scandic"
      className={className}
    >
      <path
--- a/apps/scandic-web/components/ContentType/HotelPage/Hero/Logos/HotelNorgeSmall.tsx
+++ b/apps/scandic-web/components/ContentType/HotelPage/Hero/Logos/HotelNorgeSmall.tsx
@@ -2,6 +2,8 @@ export function HotelNorgeLogoSmall({ className }: { className?: string }) {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
+      // eslint-disable-next-line formatjs/no-literal-string-in-jsx
+      aria-label="Hotel Norge"
      width="175"
      height="36"
      viewBox="0 0 175 36"
--- a/apps/scandic-web/components/ContentType/HotelPage/Hero/Logos/MarskiLarge.tsx
+++ b/apps/scandic-web/components/ContentType/HotelPage/Hero/Logos/MarskiLarge.tsx
@@ -6,6 +6,8 @@ export function MarskiLogoLarge({ className }: { className?: string }) {
      viewBox="0 0 308 315"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
+      // eslint-disable-next-line formatjs/no-literal-string-in-jsx
+      aria-label="Marski by Scandic"
      className={className}
    >
      <path
--- a/apps/scandic-web/components/ContentType/HotelPage/Hero/Logos/MarskiSmall.tsx
+++ b/apps/scandic-web/components/ContentType/HotelPage/Hero/Logos/MarskiSmall.tsx
@@ -2,6 +2,8 @@ export function MarskiLogoSmall({ className }: { className?: string }) {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
+      // eslint-disable-next-line formatjs/no-literal-string-in-jsx
+      aria-label="Marski"
      width="236"
      height="36"
      viewBox="0 0 236 36"
--- a/apps/scandic-web/components/ContentType/HotelPage/Hero/Logos/ScandicGoLarge.tsx
+++ b/apps/scandic-web/components/ContentType/HotelPage/Hero/Logos/ScandicGoLarge.tsx
@@ -6,6 +6,8 @@ export function ScandicGoLogoLarge({ className }: { className?: string }) {
      viewBox="0 0 308 315"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
+      // eslint-disable-next-line formatjs/no-literal-string-in-jsx
+      aria-label="Scandic Go"
      className={className}
    >
      <path
--- a/apps/scandic-web/components/ContentType/HotelPage/Hero/Logos/ScandicGoSmall.tsx
+++ b/apps/scandic-web/components/ContentType/HotelPage/Hero/Logos/ScandicGoSmall.tsx
@@ -2,6 +2,8 @@ export function ScandicGoLogoSmall({ className }: { className?: string }) {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
+      // eslint-disable-next-line formatjs/no-literal-string-in-jsx
+      aria-label="Scandic Go"
      width="206"
      height="36"
      viewBox="0 0 206 36"
--- a/apps/scandic-web/components/ContentType/HotelPage/Hero/Logos/TheDockLarge.tsx
+++ b/apps/scandic-web/components/ContentType/HotelPage/Hero/Logos/TheDockLarge.tsx
@@ -6,6 +6,8 @@ export function TheDockLogoLarge({ className }: { className?: string }) {
      viewBox="0 0 308 315"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
+      // eslint-disable-next-line formatjs/no-literal-string-in-jsx
+      aria-label="The Dock by Scandic"
      className={className}
    >
      <g clipPath="url(#clip0_12068_37172)">
--- a/apps/scandic-web/components/ContentType/HotelPage/Hero/Logos/TheDockSmall.tsx
+++ b/apps/scandic-web/components/ContentType/HotelPage/Hero/Logos/TheDockSmall.tsx
@@ -6,6 +6,8 @@ export function TheDockLogoSmall({ className }: { className?: string }) {
      viewBox="0 0 288 36"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
+      // eslint-disable-next-line formatjs/no-literal-string-in-jsx
+      aria-label="The Dock"
      className={className}
    >
      <path
--- a/apps/scandic-web/components/Footer/Details/index.tsx
+++ b/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>
--- a/apps/scandic-web/components/Footer/Navigation/SecondaryNav/index.tsx
+++ b/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>
--- a/apps/scandic-web/components/Footer/Navigation/SecondaryNav/utils.ts
+++ b/apps/scandic-web/components/Footer/Navigation/SecondaryNav/utils.ts
@@ -0,0 +1,77 @@
+import type { IntlShape } from "react-intl"
+
+export function getAppDownloadAttributes(intl: IntlShape, key: string) {
+  const appleAlt = intl.formatMessage({
+    id: "footer.appDownloadAlt.apple",
+    defaultMessage: "Download on the App Store",
+  })
+  const googleAlt = intl.formatMessage({
+    id: "footer.appDownloadAlt.google",
+    defaultMessage: "Get it on Google Play",
+  })
+
+  switch (key) {
+    case "Apple_da":
+      return {
+        src: "/_static/img/store-badges/app-store-badge-da.svg",
+        alt: appleAlt,
+      }
+    case "Apple_de":
+      return {
+        src: "/_static/img/store-badges/app-store-badge-de.svg",
+        alt: appleAlt,
+      }
+    case "Apple_en":
+      return {
+        src: "/_static/img/store-badges/app-store-badge-en.svg",
+        alt: appleAlt,
+      }
+    case "Apple_fi":
+      return {
+        src: "/_static/img/store-badges/app-store-badge-fi.svg",
+        alt: appleAlt,
+      }
+    case "Apple_no":
+      return {
+        src: "/_static/img/store-badges/app-store-badge-no.svg",
+        alt: appleAlt,
+      }
+    case "Apple_sv":
+      return {
+        src: "/_static/img/store-badges/app-store-badge-sv.svg",
+        alt: appleAlt,
+      }
+    case "Google_da":
+      return {
+        src: "/_static/img/store-badges/google-play-badge-da.svg",
+        alt: googleAlt,
+      }
+    case "Google_de":
+      return {
+        src: "/_static/img/store-badges/google-play-badge-de.svg",
+        alt: googleAlt,
+      }
+    case "Google_en":
+      return {
+        src: "/_static/img/store-badges/google-play-badge-en.svg",
+        alt: googleAlt,
+      }
+    case "Google_fi":
+      return {
+        src: "/_static/img/store-badges/google-play-badge-fi.svg",
+        alt: googleAlt,
+      }
+    case "Google_no":
+      return {
+        src: "/_static/img/store-badges/google-play-badge-no.svg",
+        alt: googleAlt,
+      }
+    case "Google_sv":
+      return {
+        src: "/_static/img/store-badges/google-play-badge-sv.svg",
+        alt: googleAlt,
+      }
+    default:
+      return null
+  }
+}
--- a/apps/scandic-web/components/Header/MainMenu/LogoLink/logoLink.module.css
+++ b/apps/scandic-web/components/Header/MainMenu/LogoLink/logoLink.module.css
@@ -1,8 +0,0 @@
-.logoLink {
-  display: inline-flex;
-  width: auto;
-}
-
-:global(body:has(.themed-hotel-page)) .logoIcon {
-  color: var(--Surface-UI-Fill-Intense);
-}
--- a/apps/scandic-web/components/Header/MainMenu/index.tsx
+++ b/apps/scandic-web/components/Header/MainMenu/index.tsx
@@ -1,7 +1,7 @@
 import { Suspense } from "react"

+import { LogoLink } from "../../LogoLink"
 import { NavigationMenuListSkeleton } from "./NavigationMenu/NavigationMenuList"
-import { LogoLink } from "./LogoLink"
 import { MobileMenuSkeleton } from "./MobileMenu"
 import MobileMenuWrapper from "./MobileMenuWrapper"
 import MyPagesMenuWrapper from "./MyPagesMenuWrapper"
--- a/apps/scandic-web/components/Levels/Level/DoubleRow/BestFriend.tsx
+++ b/apps/scandic-web/components/Levels/Level/DoubleRow/BestFriend.tsx
@@ -4,6 +4,7 @@ import type { LevelProps } from "../../levels"

 export default function BestFriend({
  className,
+  "aria-label": ariaLabel,
  color,
  height = "75",
  width = "159",
@@ -21,6 +22,8 @@ export default function BestFriend({
      viewBox="0 0 159 75"
      width={width}
      xmlns="http://www.w3.org/2000/svg"
+      // eslint-disable-next-line formatjs/no-literal-string-in-jsx
+      aria-label={ariaLabel ?? "BEST FRIEND"}
      {...props}
    >
      <g>
--- a/apps/scandic-web/components/Levels/Level/DoubleRow/CloseFriend.tsx
+++ b/apps/scandic-web/components/Levels/Level/DoubleRow/CloseFriend.tsx
@@ -4,6 +4,7 @@ import type { LevelProps } from "../../levels"

 export default function CloseFriend({
  className,
+  "aria-label": ariaLabel,
  color,
  height = "75",
  width = "158",
@@ -21,6 +22,8 @@ export default function CloseFriend({
      viewBox="0 0 158 75"
      width={width}
      xmlns="http://www.w3.org/2000/svg"
+      // eslint-disable-next-line formatjs/no-literal-string-in-jsx
+      aria-label={ariaLabel ?? "CLOSE FRIEND"}
      {...props}
    >
      <g>
--- a/apps/scandic-web/components/Levels/Level/DoubleRow/DearFriend.tsx
+++ b/apps/scandic-web/components/Levels/Level/DoubleRow/DearFriend.tsx
@@ -4,6 +4,7 @@ import type { LevelProps } from "../../levels"

 export default function DearFriend({
  className,
+  "aria-label": ariaLabel,
  color,
  height = "75",
  width = "159",
@@ -21,6 +22,8 @@ export default function DearFriend({
      viewBox="0 0 159 75"
      width={width}
      xmlns="http://www.w3.org/2000/svg"
+      // eslint-disable-next-line formatjs/no-literal-string-in-jsx
+      aria-label={ariaLabel ?? "DEAR FRIEND"}
      {...props}
    >
      <g>
--- a/apps/scandic-web/components/Levels/Level/DoubleRow/GoodFriend.tsx
+++ b/apps/scandic-web/components/Levels/Level/DoubleRow/GoodFriend.tsx
@@ -4,6 +4,7 @@ import type { LevelProps } from "../../levels"

 export default function GoodFriend({
  className,
+  "aria-label": ariaLabel,
  color,
  height = "75",
  width = "159",
@@ -21,6 +22,8 @@ export default function GoodFriend({
      viewBox="0 0 159 75"
      width={width}
      xmlns="http://www.w3.org/2000/svg"
+      // eslint-disable-next-line formatjs/no-literal-string-in-jsx
+      aria-label={ariaLabel ?? "GOOD FRIEND"}
      {...props}
    >
      <g>
--- a/apps/scandic-web/components/Levels/Level/DoubleRow/LoyalFriend.tsx
+++ b/apps/scandic-web/components/Levels/Level/DoubleRow/LoyalFriend.tsx
@@ -4,6 +4,7 @@ import type { LevelProps } from "../../levels"

 export default function LoyalFriend({
  className,
+  "aria-label": ariaLabel,
  color,
  height = "75",
  width = "158",
@@ -21,6 +22,8 @@ export default function LoyalFriend({
      viewBox="0 0 158 75"
      width={width}
      xmlns="http://www.w3.org/2000/svg"
+      // eslint-disable-next-line formatjs/no-literal-string-in-jsx
+      aria-label={ariaLabel ?? "LOYAL FRIEND"}
      {...props}
    >
      <g>
--- a/apps/scandic-web/components/Levels/Level/DoubleRow/NewFriend.tsx
+++ b/apps/scandic-web/components/Levels/Level/DoubleRow/NewFriend.tsx
@@ -4,6 +4,7 @@ import type { LevelProps } from "../../levels"

 export default function NewFriend({
  className,
+  "aria-label": ariaLabel,
  color,
  height = "75",
  width = "159",
@@ -21,6 +22,8 @@ export default function NewFriend({
      viewBox="0 0 159 75"
      width={width}
      xmlns="http://www.w3.org/2000/svg"
+      // eslint-disable-next-line formatjs/no-literal-string-in-jsx
+      aria-label={ariaLabel ?? "NEW FRIEND"}
      {...props}
    >
      <g>
--- a/apps/scandic-web/components/Levels/Level/DoubleRow/ScandicFriends.tsx
+++ b/apps/scandic-web/components/Levels/Level/DoubleRow/ScandicFriends.tsx
@@ -2,7 +2,11 @@ import { levelVariants } from "../../variants"

 import type { LevelProps } from "../../levels"

-export default function ScandicFriends({ className, color }: LevelProps) {
+export default function ScandicFriends({
+  className,
+  "aria-label": ariaLabel,
+  color,
+}: LevelProps) {
  const classNames = levelVariants({
    className,
    color,
@@ -11,6 +15,8 @@ export default function ScandicFriends({ className, color }: LevelProps) {
    <svg
      className={classNames}
      xmlns="http://www.w3.org/2000/svg"
+      // eslint-disable-next-line formatjs/no-literal-string-in-jsx
+      aria-label={ariaLabel ?? "SCANDIC FRIENDS"}
      width="197"
      height="75"
      viewBox="0 0 197 75"
--- a/apps/scandic-web/components/Levels/Level/DoubleRow/TrueFriend.tsx
+++ b/apps/scandic-web/components/Levels/Level/DoubleRow/TrueFriend.tsx
@@ -4,6 +4,7 @@ import type { LevelProps } from "../../levels"

 export default function TrueFriend({
  className,
+  "aria-label": ariaLabel,
  color,
  height = "75",
  width = "159",
@@ -21,6 +22,8 @@ export default function TrueFriend({
      viewBox="0 0 159 75"
      width={width}
      xmlns="http://www.w3.org/2000/svg"
+      // eslint-disable-next-line formatjs/no-literal-string-in-jsx
+      aria-label={ariaLabel ?? "TRUE FRIEND"}
      {...props}
    >
      <g>
--- a/apps/scandic-web/components/Levels/Level/SingleRow/BestFriend.tsx
+++ b/apps/scandic-web/components/Levels/Level/SingleRow/BestFriend.tsx
@@ -4,6 +4,7 @@ import type { LevelProps } from "../../levels"

 export default function BestFriend({
  className,
+  "aria-label": ariaLabel,
  color,
  height = "44",
  width = "274",
@@ -21,6 +22,8 @@ export default function BestFriend({
      viewBox="0 0 274 44"
      width={width}
      xmlns="http://www.w3.org/2000/svg"
+      // eslint-disable-next-line formatjs/no-literal-string-in-jsx
+      aria-label={ariaLabel ?? "BEST FRIEND"}
      {...props}
    >
      <path
--- a/apps/scandic-web/components/Levels/Level/SingleRow/CloseFriend.tsx
+++ b/apps/scandic-web/components/Levels/Level/SingleRow/CloseFriend.tsx
@@ -4,6 +4,7 @@ import type { LevelProps } from "../../levels"

 export default function CloseFriend({
  className,
+  "aria-label": ariaLabel,
  color,
  height = "44",
  width = "310",
@@ -21,6 +22,8 @@ export default function CloseFriend({
      viewBox="0 0 310 44"
      width={width}
      xmlns="http://www.w3.org/2000/svg"
+      // eslint-disable-next-line formatjs/no-literal-string-in-jsx
+      aria-label={ariaLabel ?? "CLOSE FRIEND"}
      {...props}
    >
      <path
--- a/apps/scandic-web/components/Levels/Level/SingleRow/DearFriend.tsx
+++ b/apps/scandic-web/components/Levels/Level/SingleRow/DearFriend.tsx
@@ -4,6 +4,7 @@ import type { LevelProps } from "../../levels"

 export default function DearFriend({
  className,
+  "aria-label": ariaLabel,
  color,
  height = "44",
  width = "294",
@@ -21,6 +22,8 @@ export default function DearFriend({
      viewBox="0 0 294 44"
      width={width}
      xmlns="http://www.w3.org/2000/svg"
+      // eslint-disable-next-line formatjs/no-literal-string-in-jsx
+      aria-label={ariaLabel ?? "DEAR FRIEND"}
      {...props}
    >
      <path
--- a/apps/scandic-web/components/Levels/Level/SingleRow/GoodFriend.tsx
+++ b/apps/scandic-web/components/Levels/Level/SingleRow/GoodFriend.tsx
@@ -4,6 +4,7 @@ import type { LevelProps } from "../../levels"

 export default function GoodFriend({
  className,
+  "aria-label": ariaLabel,
  color,
  height = "44",
  width = "310",
@@ -21,6 +22,8 @@ export default function GoodFriend({
      viewBox="0 0 310 44"
      width={width}
      xmlns="http://www.w3.org/2000/svg"
+      // eslint-disable-next-line formatjs/no-literal-string-in-jsx
+      aria-label={ariaLabel ?? "GOOD FRIEND"}
      {...props}
    >
      <path
--- a/apps/scandic-web/components/Levels/Level/SingleRow/LoyalFriend.tsx
+++ b/apps/scandic-web/components/Levels/Level/SingleRow/LoyalFriend.tsx
@@ -4,6 +4,7 @@ import type { LevelProps } from "../../levels"

 export default function LoyalFriend({
  className,
+  "aria-label": ariaLabel,
  color,
  height = "44",
  width = "305",
@@ -21,6 +22,8 @@ export default function LoyalFriend({
      viewBox="0 0 305 44"
      width={width}
      xmlns="http://www.w3.org/2000/svg"
+      // eslint-disable-next-line formatjs/no-literal-string-in-jsx
+      aria-label={ariaLabel ?? "LOYAL FRIEND"}
      {...props}
    >
      <path
--- a/apps/scandic-web/components/Levels/Level/SingleRow/NewFriend.tsx
+++ b/apps/scandic-web/components/Levels/Level/SingleRow/NewFriend.tsx
@@ -4,6 +4,7 @@ import type { LevelProps } from "../../levels"

 export default function NewFriend({
  className,
+  "aria-label": ariaLabel,
  color,
  height = "44",
  width = "275",
@@ -21,6 +22,8 @@ export default function NewFriend({
      viewBox="0 0 275 44"
      width={width}
      xmlns="http://www.w3.org/2000/svg"
+      // eslint-disable-next-line formatjs/no-literal-string-in-jsx
+      aria-label={ariaLabel ?? "NEW FRIEND"}
      {...props}
    >
      <path
--- a/apps/scandic-web/components/Levels/Level/SingleRow/TrueFriend.tsx
+++ b/apps/scandic-web/components/Levels/Level/SingleRow/TrueFriend.tsx
@@ -4,6 +4,7 @@ import type { LevelProps } from "../../levels"

 export default function TrueFriend({
  className,
+  "aria-label": ariaLabel,
  color,
  height = "44",
  width = "284",
@@ -21,6 +22,8 @@ export default function TrueFriend({
      viewBox="0 0 284 44"
      width={width}
      xmlns="http://www.w3.org/2000/svg"
+      // eslint-disable-next-line formatjs/no-literal-string-in-jsx
+      aria-label={ariaLabel ?? "TRUE FRIEND"}
      {...props}
    >
      <path
--- a/apps/scandic-web/components/Header/MainMenu/LogoLink/index.tsx
+++ b/apps/scandic-web/components/Header/MainMenu/LogoLink/index.tsx
@@ -1,4 +1,5 @@
 "use client"
+import { cx } from "class-variance-authority"
 import NextLink from "next/link"
 import { useIntl } from "react-intl"

@@ -12,7 +13,15 @@ import styles from "./logoLink.module.css"

 import { DropdownTypeEnum } from "@/types/components/dropdown/dropdown"

-export function LogoLink() {
+interface LogoLinkProps extends React.HTMLAttributes<HTMLAnchorElement> {
+  isInverted?: boolean
+}
+
+export function LogoLink({
+  isInverted = false,
+  "aria-label": ariaLabel,
+  ...props
+}: LogoLinkProps) {
  const lang = useLang()
  const intl = useIntl()
  const { toggleDropdown, isHamburgerMenuOpen } = useDropdownStore()
@@ -28,13 +37,19 @@ export function LogoLink() {
      className={styles.logoLink}
      href={`/${lang}`}
      onClick={handleNavigate}
-      aria-label={intl.formatMessage({
-        id: "header.backToScandicHotelsCom",
-        defaultMessage: "Back to scandichotels.com",
-      })}
+      aria-label={
+        ariaLabel ??
+        intl.formatMessage({
+          id: "header.backToScandicHotelsCom",
+          defaultMessage: "Back to scandichotels.com",
+        })
+      }
+      {...props}
    >
      <ScandicLogoIcon
-        className={styles.logoIcon}
+        className={cx(styles.logoIcon, {
+          [styles.inverted]: isInverted,
+        })}
        width="103px"
        height="22px"
      />
--- a/apps/scandic-web/components/LogoLink/logoLink.module.css
+++ b/apps/scandic-web/components/LogoLink/logoLink.module.css
@@ -0,0 +1,12 @@
+.logoLink {
+  display: inline-flex;
+  width: auto;
+}
+
+.logoIcon.inverted {
+  color: var(--Icon-Inverted);
+}
+
+:global(body:has(.themed-hotel-page)) .logoIcon:not(.inverted) {
+  color: var(--Surface-UI-Fill-Intense);
+}
--- a/apps/scandic-web/types/components/footer/appDownloadIcons.ts
+++ b/apps/scandic-web/types/components/footer/appDownloadIcons.ts
@@ -1,14 +0,0 @@
-export enum AppDownLoadLinks {
-  Apple_da = "/_static/img/store-badges/app-store-badge-da.svg",
-  Apple_de = "/_static/img/store-badges/app-store-badge-de.svg",
-  Apple_en = "/_static/img/store-badges/app-store-badge-en.svg",
-  Apple_fi = "/_static/img/store-badges/app-store-badge-fi.svg",
-  Apple_no = "/_static/img/store-badges/app-store-badge-no.svg",
-  Apple_sv = "/_static/img/store-badges/app-store-badge-sv.svg",
-  Google_da = "/_static/img/store-badges/google-play-badge-da.svg",
-  Google_de = "/_static/img/store-badges/google-play-badge-de.svg",
-  Google_en = "/_static/img/store-badges/google-play-badge-en.svg",
-  Google_fi = "/_static/img/store-badges/google-play-badge-fi.svg",
-  Google_no = "/_static/img/store-badges/google-play-badge-no.svg",
-  Google_sv = "/_static/img/store-badges/google-play-badge-sv.svg",
-}
--- a/packages/design-system/lib/components/Icons/Customised/Amenities_Facilities/BedHotel.tsx
+++ b/packages/design-system/lib/components/Icons/Customised/Amenities_Facilities/BedHotel.tsx
@@ -1,4 +1,5 @@
 import type { IconProps } from '../../icon'
+import { getIconAriaProps } from '../../utils'
 import { iconVariants } from '../../variants'

 export default function BedHotelIcon({
@@ -8,6 +9,8 @@ export default function BedHotelIcon({
  ...props
 }: IconProps) {
  const classNames = iconVariants({ className, color })
+  const ariaProps = getIconAriaProps(props)
+
  return (
    <svg
      className={classNames}
@@ -17,6 +20,7 @@ export default function BedHotelIcon({
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      {...props}
+      {...ariaProps}
    >
      <path
        d="M1.9375 22.4618C1.67917 22.4618 1.45833 22.3702 1.275 22.1868C1.09167 22.0035 1 21.7826 1 21.5243V8.79932C1 8.54098 1.09167 8.32015 1.275 8.13682C1.45833 7.95348 1.67917 7.86182 1.9375 7.86182C2.19583 7.86182 2.41667 7.95348 2.6 8.13682C2.78333 8.32015 2.875 8.54098 2.875 8.79932V17.6118H10.825V11.7118C10.825 11.1962 11.0086 10.7548 11.3758 10.3876C11.743 10.0204 12.1844 9.83682 12.7 9.83682H18.65C19.7167 9.83682 20.625 10.2118 21.375 10.9618C22.125 11.7118 22.5 12.6202 22.5 13.6868V21.5243C22.5 21.7826 22.4083 22.0035 22.225 22.1868C22.0417 22.3702 21.8208 22.4618 21.5625 22.4618C21.3042 22.4618 21.0833 22.3702 20.9 22.1868C20.7167 22.0035 20.625 21.7826 20.625 21.5243V19.4868H2.875V21.5243C2.875 21.7826 2.78333 22.0035 2.6 22.1868C2.41667 22.3702 2.19583 22.4618 1.9375 22.4618ZM12.7 17.6118H20.625V13.6844C20.625 13.1443 20.431 12.6806 20.043 12.2931C19.655 11.9056 19.1886 11.7118 18.6438 11.7118H12.7V17.6118Z"
--- a/packages/design-system/lib/components/Icons/Customised/Amenities_Facilities/Cooling.tsx
+++ b/packages/design-system/lib/components/Icons/Customised/Amenities_Facilities/Cooling.tsx
@@ -1,9 +1,12 @@
 import { iconVariants } from '../../variants'

 import type { IconProps } from '../../icon'
+import { getIconAriaProps } from '../../utils'

 export default function CoolingIcon({ className, color, ...props }: IconProps) {
  const classNames = iconVariants({ className, color })
+  const ariaProps = getIconAriaProps(props)
+
  return (
    <svg
      className={classNames}
@@ -13,6 +16,7 @@ export default function CoolingIcon({ className, color, ...props }: IconProps) {
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      {...props}
+      {...ariaProps}
    >
      <path
        d="M4.125 21.75C3.60937 21.75 3.16796 21.5664 2.80077 21.1992C2.43359 20.832 2.25 20.3906 2.25 19.875V4.125C2.25 3.60937 2.43359 3.16796 2.80077 2.80078C3.16796 2.43359 3.60937 2.25 4.125 2.25H19.875C20.3906 2.25 20.832 2.43359 21.1992 2.80078C21.5664 3.16796 21.75 3.60937 21.75 4.125V19.875C21.75 20.3906 21.5664 20.832 21.1992 21.1992C20.832 21.5664 20.3906 21.75 19.875 21.75H4.125ZM4.125 19.875H19.875V4.125H4.125V19.875Z"
--- a/packages/design-system/lib/components/Icons/Customised/Amenities_Facilities/CouchTable.tsx
+++ b/packages/design-system/lib/components/Icons/Customised/Amenities_Facilities/CouchTable.tsx
@@ -1,6 +1,7 @@
 import { iconVariants } from '../../variants'

 import type { IconProps } from '../../icon'
+import { getIconAriaProps } from '../../utils'

 export default function CouchTableIcon({
  className,
@@ -9,6 +10,8 @@ export default function CouchTableIcon({
  ...props
 }: IconProps) {
  const classNames = iconVariants({ className, color })
+  const ariaProps = getIconAriaProps(props)
+
  return (
    <svg
      className={classNames}
@@ -18,6 +21,7 @@ export default function CouchTableIcon({
      viewBox="0 0 24 24"
      fill="none"
      {...props}
+      {...ariaProps}
    >
      <path
        d="M4 19C3.15 19 2.4375 18.7125 1.8625 18.1375C1.2875 17.5625 1 16.85 1 16V13.5C1 12.95 1.18333 12.4375 1.55 11.9625C1.91667 11.4875 2.4 11.2 3 11.1V9C3 8.45 3.19583 7.97917 3.5875 7.5875C3.97917 7.19583 4.45 7 5 7H13C13.55 7 14.0208 7.19583 14.4125 7.5875C14.8042 7.97917 15 8.45 15 9V11.1C15.6 11.2 16.0833 11.475 16.45 11.925C16.8167 12.375 17 12.9 17 13.5V16C17 16.85 16.7125 17.5625 16.1375 18.1375C15.5625 18.7125 14.85 19 14 19H4ZM5 9V11.5C5.3 11.75 5.54167 12.0458 5.725 12.3875C5.90833 12.7292 6 13.1 6 13.5V14H12V13.5C12 13.1 12.0917 12.7292 12.275 12.3875C12.4583 12.0458 12.7 11.75 13 11.5V9H5ZM4 17H14C14.3 17 14.5417 16.8958 14.725 16.6875C14.9083 16.4792 15 16.25 15 16V13.5C15 13.35 14.9542 13.2292 14.8625 13.1375C14.7708 13.0458 14.65 13 14.5 13C14.35 13 14.2292 13.0458 14.1375 13.1375C14.0458 13.2292 14 13.35 14 13.5V16H4V13.5C4 13.35 3.95417 13.2292 3.8625 13.1375C3.77083 13.0458 3.65 13 3.5 13C3.35 13 3.22917 13.0458 3.1375 13.1375C3.04583 13.2292 3 13.35 3 13.5V16C3 16.25 3.09167 16.4792 3.275 16.6875C3.45833 16.8958 3.7 17 4 17Z"
--- a/packages/design-system/lib/components/Icons/Customised/Amenities_Facilities/FootStool.tsx
+++ b/packages/design-system/lib/components/Icons/Customised/Amenities_Facilities/FootStool.tsx
@@ -1,6 +1,7 @@
 import { iconVariants } from '../../variants'

 import type { IconProps } from '../../icon'
+import { getIconAriaProps } from '../../utils'

 export default function FootStoolIcon({
  className,
@@ -9,6 +10,8 @@ export default function FootStoolIcon({
  ...props
 }: IconProps) {
  const classNames = iconVariants({ className, color })
+  const ariaProps = getIconAriaProps(props)
+
  return (
    <svg
      className={classNames}
@@ -18,6 +21,7 @@ export default function FootStoolIcon({
      viewBox="0 0 24 24"
      fill="none"
      {...props}
+      {...ariaProps}
    >
      <path
        d="M3.22498 19.8125V9.9444C3.22498 9.40648 3.41456 8.95211 3.79373 8.58127C4.17289 8.21044 4.63183 8.02502 5.17053 8.02502C14.294 8.02502 15.676 8.02502 18.8294 8.02502C19.3681 8.02502 19.8271 8.21044 20.2062 8.58127C20.5854 8.95211 20.775 9.40648 20.775 9.9444V19.8125C20.775 20.0709 20.6833 20.2917 20.5 20.475C20.3166 20.6584 20.0958 20.75 19.8375 20.75C19.5791 20.75 19.3583 20.6584 19.175 20.475C18.9916 20.2917 18.9 20.0709 18.9 19.8125V14.8H5.09998V19.8125C5.09998 20.0709 5.00831 20.2917 4.82498 20.475C4.64164 20.6584 4.42081 20.75 4.16248 20.75C3.90414 20.75 3.68331 20.6584 3.49998 20.475C3.31664 20.2917 3.22498 20.0709 3.22498 19.8125ZM5.09998 12.925H18.9V9.90003H5.09998V12.925Z"
--- a/packages/design-system/lib/components/Icons/Customised/Amenities_Facilities/Hairdryer.tsx
+++ b/packages/design-system/lib/components/Icons/Customised/Amenities_Facilities/Hairdryer.tsx
@@ -1,6 +1,7 @@
 import { iconVariants } from '../../variants'

 import type { IconProps } from '../../icon'
+import { getIconAriaProps } from '../../utils'

 export default function HairdryerIcon({
  className,
@@ -9,6 +10,8 @@ export default function HairdryerIcon({
  ...props
 }: IconProps) {
  const classNames = iconVariants({ className, color })
+  const ariaProps = getIconAriaProps(props)
+
  return (
    <svg
      className={classNames}
@@ -18,6 +21,7 @@ export default function HairdryerIcon({
      viewBox="0 0 24 24"
      fill="none"
      {...props}
+      {...ariaProps}
    >
      <path
        d="M20.3933 9.705C20.3933 8.89072 20.1059 8.19833 19.5311 7.62786C18.9563 7.05739 18.2584 6.77215 17.4372 6.77215H8.74704C8.49762 6.77215 8.2844 6.68439 8.1074 6.50886C7.93039 6.33332 7.84188 6.12189 7.84188 5.87455C7.84188 5.62722 7.93039 5.41578 8.1074 5.24025C8.2844 5.06472 8.49762 4.97696 8.74704 4.97696H17.4365C18.7554 4.97696 19.8797 5.43793 20.8093 6.35988C21.7389 7.28184 22.2037 8.39686 22.2037 9.70493V18.5425C22.2037 19.0713 21.7714 19.4999 21.2382 19.4999H17.6417C17.1085 19.4999 16.6762 19.0713 16.6762 18.5425V14.3764C15.8235 14.2551 15.0899 13.918 14.4037 13.3545C13.5291 12.6365 13.5745 12.5766 12.749 11.5593H9.71253C9.46311 11.5593 9.2499 11.4716 9.07289 11.296C8.89589 11.1205 8.80738 10.9091 8.80738 10.6617C8.80738 10.4144 8.89589 10.203 9.07289 10.0274C9.2499 9.85191 9.46311 9.76415 9.71253 9.76415H13.4811C13.9906 9.76415 14.3777 10.1879 14.5547 10.6617C14.7126 11.0846 14.987 11.4285 15.3419 11.7808C15.9167 12.3512 16.6147 12.6365 17.4358 12.6365C17.5165 12.6365 17.596 12.6337 17.6743 12.6282C18.077 12.5999 18.4865 12.8831 18.4865 13.2834V17.4563C18.4865 17.6675 18.6589 17.8388 18.8719 17.8393L20.0063 17.8417C20.2199 17.8422 20.3933 17.6706 20.3933 17.4587V9.705Z"
--- a/packages/design-system/lib/components/Icons/Customised/Amenities_Facilities/HandSoap.tsx
+++ b/packages/design-system/lib/components/Icons/Customised/Amenities_Facilities/HandSoap.tsx
@@ -1,6 +1,7 @@
 import { iconVariants } from '../../variants'

 import type { IconProps } from '../../icon'
+import { getIconAriaProps } from '../../utils'

 export default function HandSoapIcon({
  className,
@@ -9,6 +10,8 @@ export default function HandSoapIcon({
  ...props
 }: IconProps) {
  const classNames = iconVariants({ className, color })
+  const ariaProps = getIconAriaProps(props)
+
  return (
    <svg
      className={classNames}
@@ -18,6 +21,7 @@ export default function HandSoapIcon({
      viewBox="0 0 24 24"
      fill="none"
      {...props}
+      {...ariaProps}
    >
      <g clipPath="url(#clip0_4037_3127)">
        <path
--- a/packages/design-system/lib/components/Icons/Customised/Amenities_Facilities/IceMachine.tsx
+++ b/packages/design-system/lib/components/Icons/Customised/Amenities_Facilities/IceMachine.tsx
@@ -1,6 +1,7 @@
 import { iconVariants } from '../../variants'

 import type { IconProps } from '../../icon'
+import { getIconAriaProps } from '../../utils'

 export default function IceMachineIcon({
  className,
@@ -9,6 +10,8 @@ export default function IceMachineIcon({
  ...props
 }: IconProps) {
  const classNames = iconVariants({ className, color })
+  const ariaProps = getIconAriaProps(props)
+
  return (
    <svg
      className={classNames}
@@ -18,6 +21,7 @@ export default function IceMachineIcon({
      viewBox="0 0 24 24"
      fill="none"
      {...props}
+      {...ariaProps}
    >
      <path
        d="M12.475 15.3963H15.0231V17.9444H12.475V15.3963Z"
--- a/packages/design-system/lib/components/Icons/Customised/Amenities_Facilities/Massage.tsx
+++ b/packages/design-system/lib/components/Icons/Customised/Amenities_Facilities/Massage.tsx
@@ -1,6 +1,7 @@
 import { iconVariants } from '../../variants'

 import type { IconProps } from '../../icon'
+import { getIconAriaProps } from '../../utils'

 export default function MassageIcon({
  className,
@@ -9,6 +10,8 @@ export default function MassageIcon({
  ...props
 }: IconProps) {
  const classNames = iconVariants({ className, color })
+  const ariaProps = getIconAriaProps(props)
+
  return (
    <svg
      className={classNames}
@@ -18,6 +21,7 @@ export default function MassageIcon({
      viewBox="0 0 24 24"
      fill="none"
      {...props}
+      {...ariaProps}
    >
      <g clipPath="url(#clip0_7025_35183)">
        <path
--- a/packages/design-system/lib/components/Icons/Customised/Amenities_Facilities/MdiBunkBedOutline.tsx
+++ b/packages/design-system/lib/components/Icons/Customised/Amenities_Facilities/MdiBunkBedOutline.tsx
@@ -1,6 +1,7 @@
 import { iconVariants } from '../../variants'

 import type { IconProps } from '../../icon'
+import { getIconAriaProps } from '../../utils'

 export default function MdiBunkBedIcon({
  className,
@@ -9,6 +10,8 @@ export default function MdiBunkBedIcon({
  ...props
 }: IconProps) {
  const classNames = iconVariants({ className, color })
+  const ariaProps = getIconAriaProps(props)
+
  return (
    <svg
      className={classNames}
@@ -18,6 +21,7 @@ export default function MdiBunkBedIcon({
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      {...props}
+      {...ariaProps}
    >
      <path
        d="M2 3.90909C2 3.40701 2.40701 3 2.90909 3C3.41117 3 3.81818 3.40701 3.81818 3.90909V9.33333H10.1818V4.90476C10.1818 4.35248 10.6295 3.90476 11.1818 3.90476H18.3636C20.3636 3.90476 22 5.53333 22 7.52381V21.0909C22 21.593 21.593 22 21.0909 22C20.5888 22 20.1818 21.593 20.1818 21.0909V20.1905H3.81818V21.0909C3.81818 21.593 3.41117 22 2.90909 22C2.40701 22 2 21.593 2 21.0909V3.90909ZM12 5.71429V9.33333H20.1818V7.52381C20.1818 6.52857 19.3636 5.71429 18.3636 5.71429H12ZM3.81818 11.1429V18.381H10.1818V13.9524C10.1818 13.4001 10.6295 12.9524 11.1818 12.9524H18.3636C19 12.9524 19.6364 13.1333 20.1818 13.4952V11.1429H3.81818ZM12 14.7619V18.381H20.1818V16.5714C20.1818 15.5762 19.3636 14.7619 18.3636 14.7619H12Z"
--- a/packages/design-system/lib/components/Icons/Customised/Amenities_Facilities/Mirror.tsx
+++ b/packages/design-system/lib/components/Icons/Customised/Amenities_Facilities/Mirror.tsx
@@ -1,6 +1,7 @@
 import { iconVariants } from '../../variants'

 import type { IconProps } from '../../icon'
+import { getIconAriaProps } from '../../utils'

 export default function MirrorIcon({
  className,
@@ -9,6 +10,8 @@ export default function MirrorIcon({
  ...props
 }: IconProps) {
  const classNames = iconVariants({ className, color })
+  const ariaProps = getIconAriaProps(props)
+
  return (
    <svg
      className={classNames}
@@ -18,6 +21,7 @@ export default function MirrorIcon({
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      {...props}
+      {...ariaProps}
    >
      <path
        d="M10.9233 7.02326C10.6256 7.32089 10.6256 7.77918 10.9233 8.07681C11.0287 8.18223 11.1666 8.21874 11.2589 8.23413C11.3545 8.25007 11.4467 8.25005 11.4963 8.25004L11.5059 8.25004C11.5532 8.25007 11.6492 8.25015 11.7366 8.23268C11.781 8.2238 11.848 8.20596 11.9095 8.1634L11.9216 8.15513C11.9672 8.12385 12.0456 8.07018 12.1 8.00004L12.9768 7.07681C13.2744 6.77918 13.2744 6.32089 12.9768 6.02326C12.6792 5.72563 12.2209 5.72563 11.9233 6.02326L10.9233 7.02326Z"
--- a/packages/design-system/lib/components/Icons/Customised/Amenities_Facilities/MovingBeds.tsx
+++ b/packages/design-system/lib/components/Icons/Customised/Amenities_Facilities/MovingBeds.tsx
@@ -1,6 +1,7 @@
 import { iconVariants } from '../../variants'

 import type { IconProps } from '../../icon'
+import { getIconAriaProps } from '../../utils'

 export default function MovingBedsIcon({
  className,
@@ -9,6 +10,8 @@ export default function MovingBedsIcon({
  ...props
 }: IconProps) {
  const classNames = iconVariants({ className, color })
+  const ariaProps = getIconAriaProps(props)
+
  return (
    <svg
      className={classNames}
@@ -18,6 +21,7 @@ export default function MovingBedsIcon({
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      {...props}
+      {...ariaProps}
    >
      <path
        d="M4 22C3.45 22 2.97917 21.8042 2.5875 21.4125C2.19583 21.0208 2 20.55 2 20V4C2 3.45 2.19583 2.97917 2.5875 2.5875C2.97917 2.19583 3.45 2 4 2H13C13.55 2 14.0208 2.19583 14.4125 2.5875C14.8042 2.97917 15 3.45 15 4V20C15 20.55 14.8042 21.0208 14.4125 21.4125C14.0208 21.8042 13.55 22 13 22H4ZM4 10.525C4.3 10.3417 4.61667 10.2083 4.95 10.125C5.28333 10.0417 5.63333 10 6 10H11C11.3667 10 11.7167 10.0417 12.05 10.125C12.3833 10.2083 12.7 10.3417 13 10.525V4H4V10.525ZM8.5 9C7.95 9 7.47917 8.80417 7.0875 8.4125C6.69583 8.02083 6.5 7.55 6.5 7C6.5 6.45 6.69583 5.97917 7.0875 5.5875C7.47917 5.19583 7.95 5 8.5 5C9.05 5 9.52083 5.19583 9.9125 5.5875C10.3042 5.97917 10.5 6.45 10.5 7C10.5 7.55 10.3042 8.02083 9.9125 8.4125C9.52083 8.80417 9.05 9 8.5 9ZM20.204 14.796C19.8152 15.1848 19.1848 15.1848 18.796 14.796C18.4103 14.4103 18.4067 13.7861 18.7879 13.3961L19.175 13H17C16.4477 13 16 12.5523 16 12C16 11.4477 16.4477 11 17 11H19.175L18.7879 10.6039C18.4067 10.2139 18.4103 9.58969 18.796 9.20402C19.1848 8.8152 19.8152 8.8152 20.204 9.20402L22.2929 11.2929C22.6834 11.6834 22.6834 12.3166 22.2929 12.7071L20.204 14.796ZM4 20H13V14C13 13.45 12.8042 12.9792 12.4125 12.5875C12.0208 12.1958 11.55 12 11 12H6C5.45 12 4.97917 12.1958 4.5875 12.5875C4.19583 12.9792 4 13.45 4 14V20Z"
--- a/packages/design-system/lib/components/Icons/Customised/Amenities_Facilities/Road.tsx
+++ b/packages/design-system/lib/components/Icons/Customised/Amenities_Facilities/Road.tsx
@@ -1,6 +1,7 @@
 import { iconVariants } from '../../variants'

 import type { IconProps } from '../../icon'
+import { getIconAriaProps } from '../../utils'

 export default function RoadIcon({
  className,
@@ -9,6 +10,7 @@ export default function RoadIcon({
  ...props
 }: IconProps) {
  const classNames = iconVariants({ className, color })
+  const ariaProps = getIconAriaProps(props)
  return (
    <svg
      className={classNames}
@@ -18,6 +20,7 @@ export default function RoadIcon({
      viewBox="0 0 24 24"
      fill="none"
      {...props}
+      {...ariaProps}
    >
      <path
        d="M5 20C4.44772 20 4 19.5523 4 19V5C4 4.44772 4.44772 4 5 4C5.55228 4 6 4.44772 6 5V19C6 19.5523 5.55228 20 5 20ZM12 20C11.4477 20 11 19.5523 11 19V17C11 16.4477 11.4477 16 12 16C12.5523 16 13 16.4477 13 17V19C13 19.5523 12.5523 20 12 20ZM19 20C18.4477 20 18 19.5523 18 19V5C18 4.44772 18.4477 4 19 4C19.5523 4 20 4.44772 20 5V19C20 19.5523 19.5523 20 19 20ZM12 14C11.4477 14 11 13.5523 11 13V11C11 10.4477 11.4477 10 12 10C12.5523 10 13 10.4477 13 11V13C13 13.5523 12.5523 14 12 14ZM12 8C11.4477 8 11 7.55228 11 7V5C11 4.44772 11.4477 4 12 4C12.5523 4 13 4.44772 13 5V7C13 7.55228 12.5523 8 12 8Z"
--- a/packages/design-system/lib/components/Icons/Customised/Amenities_Facilities/Rug.tsx
+++ b/packages/design-system/lib/components/Icons/Customised/Amenities_Facilities/Rug.tsx
@@ -1,6 +1,7 @@
 import { iconVariants } from '../../variants'

 import type { IconProps } from '../../icon'
+import { getIconAriaProps } from '../../utils'

 export default function RugIcon({
  className,
@@ -9,6 +10,8 @@ export default function RugIcon({
  ...props
 }: IconProps) {
  const classNames = iconVariants({ className, color })
+  const ariaProps = getIconAriaProps(props)
+
  return (
    <svg
      className={classNames}
@@ -18,6 +21,7 @@ export default function RugIcon({
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      {...props}
+      {...ariaProps}
    >
      <path
        d="M12.6942 15.9883L12.6942 15.9883C12.6222 16.1081 12.5204 16.2073 12.3988 16.2761C12.2772 16.3448 12.1398 16.381 12.0001 16.381L12.6942 15.9883ZM12.6942 15.9883L14.837 12.4169M12.6942 15.9883L11.3059 15.9883M11.3059 15.9883L11.3059 15.9883L9.16304 12.4169C9.16303 12.4169 9.16302 12.4169 9.16301 12.4169C9.08739 12.291 9.04743 12.1469 9.04743 12C9.04743 11.8531 9.0874 11.709 9.16304 11.5831L11.3059 8.01172C11.3778 7.89184 11.4795 7.79264 11.6012 7.72376C11.7228 7.65488 11.8602 7.61868 12 7.61868C12.1398 7.61868 12.2772 7.65488 12.3989 7.72376C12.5205 7.79264 12.6223 7.89184 12.6942 8.01171L14.837 11.5831C14.9127 11.709 14.9526 11.8531 14.9526 12C14.9526 12.1469 14.9127 12.291 14.837 12.4169M11.3059 15.9883C11.3779 16.1081 11.4796 16.2073 11.6013 16.2761M11.3059 15.9883L11.6013 16.2761M14.837 12.4169L14.7554 12.3679M14.837 12.4169L14.8371 12.4169L14.7554 12.3679M14.7554 12.3679L12.6125 15.9393L14.7554 11.6321C14.8221 11.7432 14.8574 11.8704 14.8574 12C14.8574 12.1296 14.8221 12.2568 14.7554 12.3679ZM11.6013 16.2761C11.7229 16.3448 11.8603 16.381 12 16.381L11.6013 16.2761ZM4.99904 21.8581L5.06639 21.7908L4.99904 21.8581C5.15086 22.01 5.35676 22.0952 5.57146 22.0952C5.78616 22.0952 5.99207 22.01 6.14388 21.8581L6.07654 21.7908L6.14388 21.8581C6.2957 21.7063 6.38099 21.5004 6.38099 21.2857V19.9524H9.04765V21.2857C9.04765 21.5004 9.13294 21.7063 9.28476 21.8581C9.43657 22.01 9.64248 22.0952 9.85718 22.0952C10.0719 22.0952 10.2778 22.01 10.4296 21.8581C10.5814 21.7063 10.6667 21.5004 10.6667 21.2857V19.9524H13.3334V21.2857C13.3334 21.5004 13.4187 21.7063 13.5705 21.8581C13.7223 22.01 13.9282 22.0952 14.1429 22.0952C14.3576 22.0952 14.5635 22.01 14.7153 21.8581C14.8671 21.7063 14.9524 21.5004 14.9524 21.2857V19.9524H17.6191V21.2857C17.6191 21.5004 17.7044 21.7063 17.8562 21.8581C18.008 22.01 18.2139 22.0952 18.4286 22.0952C18.6433 22.0952 18.8492 22.01 19.001 21.8581C19.1528 21.7063 19.2381 21.5004 19.2381 21.2857V2.71429C19.2381 2.49959 19.1528 2.29368 19.001 2.14187C18.8492 1.99005 18.6433 1.90476 18.4286 1.90476C18.2139 1.90476 18.008 1.99005 17.8562 2.14187C17.7044 2.29368 17.6191 2.49959 17.6191 2.71429V4.04762H14.9524V2.71429C14.9524 2.49959 14.8671 2.29368 14.7153 2.14187C14.5635 1.99005 14.3576 1.90476 14.1429 1.90476C13.9282 1.90476 13.7223 1.99005 13.5705 2.14187C13.4187 2.29368 13.3334 2.49959 13.3334 2.71429V4.04762H10.6667V2.71429C10.6667 2.49959 10.5814 2.29368 10.4296 2.14187C10.2778 1.99005 10.0719 1.90476 9.85718 1.90476C9.64248 1.90476 9.43657 1.99005 9.28476 2.14187C9.13294 2.29368 9.04765 2.49959 9.04765 2.71429V4.04762H6.38099V2.71429C6.38099 2.49959 6.2957 2.29368 6.14388 2.14187C5.99207 1.99005 5.78616 1.90476 5.57146 1.90476C5.35676 1.90476 5.15086 1.99005 4.99904 2.14187C4.84723 2.29368 4.76194 2.49959 4.76194 2.71429V21.2857C4.76194 21.5004 4.84723 21.7063 4.99904 21.8581ZM6.38099 5.66667H17.6191V18.3333H6.38099V5.66667ZM10.8013 12L12 10.0021L13.1988 12L12 13.9979L10.8013 12Z"
--- a/packages/design-system/lib/components/Icons/Customised/Amenities_Facilities/SafetyBox.tsx
+++ b/packages/design-system/lib/components/Icons/Customised/Amenities_Facilities/SafetyBox.tsx
@@ -1,6 +1,7 @@
 import { iconVariants } from '../../variants'

 import type { IconProps } from '../../icon'
+import { getIconAriaProps } from '../../utils'

 export default function SafetyBoxIcon({
  className,
@@ -9,6 +10,8 @@ export default function SafetyBoxIcon({
  ...props
 }: IconProps) {
  const classNames = iconVariants({ className, color })
+  const ariaProps = getIconAriaProps(props)
+
  return (
    <svg
      className={classNames}
@@ -18,6 +21,7 @@ export default function SafetyBoxIcon({
      viewBox="0 0 24 24"
      fill="none"
      {...props}
+      {...ariaProps}
    >
      <path
        fillRule="evenodd"
--- a/packages/design-system/lib/components/Icons/Customised/Amenities_Facilities/Slippers.tsx
+++ b/packages/design-system/lib/components/Icons/Customised/Amenities_Facilities/Slippers.tsx
@@ -1,6 +1,7 @@
 import { iconVariants } from '../../variants'

 import type { IconProps } from '../../icon'
+import { getIconAriaProps } from '../../utils'

 export default function SlippersIcon({
  className,
@@ -9,6 +10,8 @@ export default function SlippersIcon({
  ...props
 }: IconProps) {
  const classNames = iconVariants({ className, color })
+  const ariaProps = getIconAriaProps(props)
+
  return (
    <svg
      className={classNames}
@@ -18,6 +21,7 @@ export default function SlippersIcon({
      viewBox="0 0 24 24"
      fill="none"
      {...props}
+      {...ariaProps}
    >
      <path
        fillRule="evenodd"
--- a/packages/design-system/lib/components/Icons/Customised/Amenities_Facilities/Towel.tsx
+++ b/packages/design-system/lib/components/Icons/Customised/Amenities_Facilities/Towel.tsx
@@ -1,6 +1,7 @@
 import { iconVariants } from '../../variants'

 import type { IconProps } from '../../icon'
+import { getIconAriaProps } from '../../utils'

 export default function TowelIcon({
  className,
@@ -9,6 +10,8 @@ export default function TowelIcon({
  ...props
 }: IconProps) {
  const classNames = iconVariants({ className, color })
+  const ariaProps = getIconAriaProps(props)
+
  return (
    <svg
      className={classNames}
@@ -18,6 +21,7 @@ export default function TowelIcon({
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      {...props}
+      {...ariaProps}
    >
      <path
        fillRule="evenodd"
--- a/packages/design-system/lib/components/Icons/Customised/Amenities_Facilities/View.tsx
+++ b/packages/design-system/lib/components/Icons/Customised/Amenities_Facilities/View.tsx
@@ -1,6 +1,7 @@
 import { iconVariants } from '../../variants'

 import type { IconProps } from '../../icon'
+import { getIconAriaProps } from '../../utils'

 export default function ViewIcon({
  className,
@@ -9,6 +10,8 @@ export default function ViewIcon({
  ...props
 }: IconProps) {
  const classNames = iconVariants({ className, color })
+  const ariaProps = getIconAriaProps(props)
+
  return (
    <svg
      className={classNames}
@@ -18,6 +21,7 @@ export default function ViewIcon({
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      {...props}
+      {...ariaProps}
    >
      <path
        d="M7.13748 17.0121H16.8826C17.0775 17.0121 17.2208 16.9267 17.3125 16.7559C17.4041 16.585 17.3875 16.4204 17.2625 16.2621L14.575 12.6871C14.4807 12.5621 14.3551 12.4996 14.198 12.4996C14.041 12.4996 13.9166 12.5621 13.825 12.6871L11.25 16.1121L9.42498 13.6996C9.33074 13.5746 9.2051 13.5121 9.04805 13.5121C8.891 13.5121 8.76664 13.5746 8.67498 13.6996L6.76588 16.2603C6.63861 16.4198 6.62185 16.585 6.7156 16.7559C6.80935 16.9267 6.94998 17.0121 7.13748 17.0121Z"
--- a/packages/design-system/lib/components/Icons/Customised/Amenities_Facilities/Ward.tsx
+++ b/packages/design-system/lib/components/Icons/Customised/Amenities_Facilities/Ward.tsx
@@ -1,6 +1,7 @@
 import { iconVariants } from '../../variants'

 import type { IconProps } from '../../icon'
+import { getIconAriaProps } from '../../utils'

 export default function WardIcon({
  className,
@@ -9,6 +10,8 @@ export default function WardIcon({
  ...props
 }: IconProps) {
  const classNames = iconVariants({ className, color })
+  const ariaProps = getIconAriaProps(props)
+
  return (
    <svg
      className={classNames}
@@ -18,6 +21,7 @@ export default function WardIcon({
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      {...props}
+      {...ariaProps}
    >
      <path
        d="M3 2H5C5.28333 2 5.52083 2.09583 5.7125 2.2875C5.90417 2.47917 6 2.71667 6 3V22C5.45 22 4.97917 21.8042 4.5875 21.4125C4.19583 21.0208 4 20.55 4 20V4H3C2.71667 4 2.47917 3.90417 2.2875 3.7125C2.09583 3.52083 2 3.28333 2 3C2 2.71667 2.09583 2.47917 2.2875 2.2875C2.47917 2.09583 2.71667 2 3 2ZM9 22C8.45 22 7.97917 21.8042 7.5875 21.4125C7.19583 21.0208 7 20.55 7 20V4C7 3.45 7.19583 2.97917 7.5875 2.5875C7.97917 2.19583 8.45 2 9 2H18C18.55 2 19.0208 2.19583 19.4125 2.5875C19.8042 2.97917 20 3.45 20 4V20C20 20.55 19.8042 21.0208 19.4125 21.4125C19.0208 21.8042 18.55 22 18 22H9ZM9 10.525C9.3 10.3417 9.61667 10.2083 9.95 10.125C10.2833 10.0417 10.6333 10 11 10H16C16.3667 10 16.7167 10.0417 17.05 10.125C17.3833 10.2083 17.7 10.3417 18 10.525V4H9V10.525ZM13.5 9C12.95 9 12.4792 8.80417 12.0875 8.4125C11.6958 8.02083 11.5 7.55 11.5 7C11.5 6.45 11.6958 5.97917 12.0875 5.5875C12.4792 5.19583 12.95 5 13.5 5C14.05 5 14.5208 5.19583 14.9125 5.5875C15.3042 5.97917 15.5 6.45 15.5 7C15.5 7.55 15.3042 8.02083 14.9125 8.4125C14.5208 8.80417 14.05 9 13.5 9ZM9 20H18V14C18 13.45 17.8042 12.9792 17.4125 12.5875C17.0208 12.1958 16.55 12 16 12H11C10.45 12 9.97917 12.1958 9.5875 12.5875C9.19583 12.9792 9 13.45 9 14V20Z"
--- a/packages/design-system/lib/components/Icons/Customised/Amenities_Facilities/WindowNotAvailable.tsx
+++ b/packages/design-system/lib/components/Icons/Customised/Amenities_Facilities/WindowNotAvailable.tsx
@@ -1,6 +1,7 @@
 import { iconVariants } from '../../variants'

 import type { IconProps } from '../../icon'
+import { getIconAriaProps } from '../../utils'

 export default function WindowNotAvailableIcon({
  className,
@@ -9,6 +10,8 @@ export default function WindowNotAvailableIcon({
  ...props
 }: IconProps) {
  const classNames = iconVariants({ className, color })
+  const ariaProps = getIconAriaProps(props)
+
  return (
    <svg
      className={classNames}
@@ -18,6 +21,7 @@ export default function WindowNotAvailableIcon({
      viewBox="0 0 24 24"
      fill="none"
      {...props}
+      {...ariaProps}
    >
      <path
        d="M3.12638 4.26255L10.8139 11.95L13.6889 14.8625L15.0264 16.2L16.3764 17.5125L19.9264 21.05C20.1097 21.2334 20.3285 21.325 20.5826 21.325C20.8368 21.325 21.0555 21.2334 21.2389 21.05C21.4222 20.8667 21.5118 20.648 21.5076 20.3938C21.5035 20.1396 21.4139 19.925 21.2389 19.75L4.43888 2.95005C4.25555 2.76672 4.0368 2.67505 3.78263 2.67505C3.52846 2.67505 3.30971 2.76672 3.12638 2.95005C2.94305 3.13338 2.85346 3.35422 2.85763 3.61255C2.8618 3.87088 2.95138 4.08755 3.12638 4.26255Z"
--- a/packages/design-system/lib/components/Icons/Customised/Amenities_Facilities/WoodFloor.tsx
+++ b/packages/design-system/lib/components/Icons/Customised/Amenities_Facilities/WoodFloor.tsx
@@ -1,6 +1,7 @@
 import { iconVariants } from '../../variants'

 import type { IconProps } from '../../icon'
+import { getIconAriaProps } from '../../utils'

 export default function WoodFloorIcon({
  className,
@@ -9,6 +10,8 @@ export default function WoodFloorIcon({
  ...props
 }: IconProps) {
  const classNames = iconVariants({ className, color })
+  const ariaProps = getIconAriaProps(props)
+
  return (
    <svg
      className={classNames}
@@ -18,6 +21,7 @@ export default function WoodFloorIcon({
      viewBox="0 0 24 24"
      fill="none"
      {...props}
+      {...ariaProps}
    >
      <path
        d="M3.93297 21C3.67588 21 3.45612 20.9083 3.27367 20.725C3.09122 20.5417 3 20.3208 3 20.0625C3 19.8042 3.09122 19.5833 3.27367 19.4C3.45612 19.2167 3.67588 19.125 3.93297 19.125H10.0283C10.2854 19.125 10.5052 19.2167 10.6876 19.4C10.8701 19.5833 10.9613 19.8042 10.9613 20.0625C10.9613 20.3208 10.8701 20.5417 10.6876 20.725C10.5052 20.9083 10.2854 21 10.0283 21H3.93297Z"
--- a/packages/design-system/lib/components/Icons/Customised/Benefits/DiamondAdd.tsx
+++ b/packages/design-system/lib/components/Icons/Customised/Benefits/DiamondAdd.tsx
@@ -1,6 +1,7 @@
 import { iconVariants } from '../../variants'

 import type { IconProps } from '../../icon'
+import { getIconAriaProps } from '../../utils'

 export default function DiamondAddIcon({
  className,
@@ -9,6 +10,8 @@ export default function DiamondAddIcon({
  ...props
 }: IconProps) {
  const classNames = iconVariants({ className, color })
+  const ariaProps = getIconAriaProps(props)
+
  return (
    <svg
      className={classNames}
@@ -18,6 +21,7 @@ export default function DiamondAddIcon({
      viewBox="0 0 24 24"
      fill="none"
      {...props}
+      {...ariaProps}
    >
      <path
        fillRule="evenodd"
--- a/packages/design-system/lib/components/Icons/Customised/Socials/Facebook.tsx
+++ b/packages/design-system/lib/components/Icons/Customised/Socials/Facebook.tsx
@@ -1,6 +1,7 @@
 import { iconVariants } from '../../variants'

 import type { IconProps } from '../../icon'
+import { getIconAriaProps } from '../../utils'

 export default function FacebookIcon({
  className,
@@ -9,6 +10,8 @@ export default function FacebookIcon({
  ...props
 }: IconProps) {
  const classNames = iconVariants({ className, color })
+  const ariaProps = getIconAriaProps(props)
+
  return (
    <svg
      className={classNames}
@@ -18,6 +21,7 @@ export default function FacebookIcon({
      viewBox="0 0 24 24"
      fill="none"
      {...props}
+      {...ariaProps}
    >
      <path
        d="M18.25 2C19.283 2 20.1662 2.36675 20.8997 3.10026C21.6332 3.83377 22 4.71701 22 5.75V18.25C22 19.283 21.6332 20.1662 20.8997 20.8997C20.1662 21.6332 19.283 22 18.25 22H15.8021V14.2526H18.3932L18.7839 11.2318H15.8021V9.30469C15.8021 8.81858 15.9041 8.45399 16.1081 8.21094C16.3121 7.96788 16.7092 7.84635 17.2995 7.84635L18.888 7.83333V5.13802C18.3411 5.0599 17.5686 5.02083 16.5703 5.02083C15.3898 5.02083 14.4457 5.36806 13.7383 6.0625C13.0308 6.75694 12.6771 7.73785 12.6771 9.00521V11.2318H10.0729V14.2526H12.6771V22H5.75C4.71701 22 3.83377 21.6332 3.10026 20.8997C2.36675 20.1662 2 19.283 2 18.25V5.75C2 4.71701 2.36675 3.83377 3.10026 3.10026C3.83377 2.36675 4.71701 2 5.75 2H18.25Z"
--- a/packages/design-system/lib/components/Icons/Customised/Socials/Instagram.tsx
+++ b/packages/design-system/lib/components/Icons/Customised/Socials/Instagram.tsx
@@ -1,6 +1,7 @@
 import { iconVariants } from '../../variants'

 import type { IconProps } from '../../icon'
+import { getIconAriaProps } from '../../utils'

 export default function InstagramIcon({
  className,
@@ -9,6 +10,8 @@ export default function InstagramIcon({
  ...props
 }: IconProps) {
  const classNames = iconVariants({ className, color })
+  const ariaProps = getIconAriaProps(props)
+
  return (
    <svg
      className={classNames}
@@ -18,6 +21,7 @@ export default function InstagramIcon({
      viewBox="0 0 24 24"
      fill="none"
      {...props}
+      {...ariaProps}
    >
      <path
        d="M17.34 5.46012C17.1027 5.46012 16.8707 5.5305 16.6733 5.66236C16.476 5.79422 16.3222 5.98163 16.2313 6.2009C16.1405 6.42017 16.1168 6.66145 16.1631 6.89423C16.2094 7.12701 16.3236 7.34083 16.4915 7.50865C16.6593 7.67647 16.8731 7.79076 17.1059 7.83706C17.3387 7.88337 17.5799 7.8596 17.7992 7.76878C18.0185 7.67795 18.2059 7.52415 18.3378 7.32681C18.4696 7.12947 18.54 6.89746 18.54 6.66012C18.54 6.34186 18.4136 6.03664 18.1885 5.81159C17.9635 5.58655 17.6583 5.46012 17.34 5.46012ZM21.94 7.88012C21.9206 7.05042 21.7652 6.22952 21.48 5.45012C21.2257 4.78325 20.83 4.1794 20.32 3.68012C19.8248 3.16755 19.2196 2.7743 18.55 2.53012C17.7727 2.23628 16.9508 2.07733 16.12 2.06012C15.06 2.00012 14.72 2.00012 12 2.00012C9.28 2.00012 8.94 2.00012 7.88 2.06012C7.04915 2.07733 6.22734 2.23628 5.45 2.53012C4.78168 2.77677 4.17693 3.16968 3.68 3.68012C3.16743 4.1753 2.77418 4.78056 2.53 5.45012C2.23616 6.22747 2.07721 7.04927 2.06 7.88012C2 8.94012 2 9.28012 2 12.0001C2 14.7201 2 15.0601 2.06 16.1201C2.07721 16.951 2.23616 17.7728 2.53 18.5501C2.77418 19.2197 3.16743 19.8249 3.68 20.3201C4.17693 20.8306 4.78168 21.2235 5.45 21.4701C6.22734 21.764 7.04915 21.9229 7.88 21.9401C8.94 22.0001 9.28 22.0001 12 22.0001C14.72 22.0001 15.06 22.0001 16.12 21.9401C16.9508 21.9229 17.7727 21.764 18.55 21.4701C19.2196 21.2259 19.8248 20.8327 20.32 20.3201C20.8322 19.8227 21.2283 19.2183 21.48 18.5501C21.7652 17.7707 21.9206 16.9498 21.94 16.1201C21.94 15.0601 22 14.7201 22 12.0001C22 9.28012 22 8.94012 21.94 7.88012ZM20.14 16.0001C20.1327 16.6349 20.0178 17.2638 19.8 17.8601C19.6403 18.2953 19.3839 18.6885 19.05 19.0101C18.7256 19.3406 18.3332 19.5966 17.9 19.7601C17.3037 19.9779 16.6748 20.0928 16.04 20.1001C15.04 20.1501 14.67 20.1601 12.04 20.1601C9.41 20.1601 9.04 20.1601 8.04 20.1001C7.38089 20.1125 6.72459 20.011 6.1 19.8001C5.68578 19.6282 5.31136 19.3729 5 19.0501C4.66809 18.7289 4.41484 18.3353 4.26 17.9001C4.01586 17.2953 3.88044 16.6521 3.86 16.0001C3.86 15.0001 3.8 14.6301 3.8 12.0001C3.8 9.37012 3.8 9.00012 3.86 8.00012C3.86448 7.35118 3.98295 6.70807 4.21 6.10012C4.38605 5.67803 4.65627 5.30178 5 5.00012C5.30381 4.65629 5.67929 4.38322 6.1 4.20012C6.70955 3.98017 7.352 3.8652 8 3.86012C9 3.86012 9.37 3.80012 12 3.80012C14.63 3.80012 15 3.80012 16 3.86012C16.6348 3.8674 17.2637 3.98237 17.86 4.20012C18.3144 4.36877 18.7223 4.64297 19.05 5.00012C19.3777 5.3073 19.6338 5.68285 19.8 6.10012C20.0223 6.70906 20.1373 7.3519 20.14 8.00012C20.19 9.00012 20.2 9.37012 20.2 12.0001C20.2 14.6301 20.19 15.0001 20.14 16.0001ZM12 6.87012C10.9858 6.8721 9.99496 7.17465 9.15265 7.73954C8.31035 8.30443 7.65438 9.10632 7.26763 10.0439C6.88089 10.9814 6.78072 12.0126 6.97979 13.0071C7.17886 14.0015 7.66824 14.9147 8.38608 15.6311C9.10392 16.3475 10.018 16.8351 11.0129 17.0323C12.0077 17.2294 13.0387 17.1272 13.9755 16.7387C14.9123 16.3501 15.7129 15.6926 16.2761 14.8492C16.8394 14.0057 17.14 13.0143 17.14 12.0001C17.1413 11.3252 17.0092 10.6567 16.7512 10.0331C16.4933 9.40943 16.1146 8.84293 15.6369 8.36617C15.1592 7.88941 14.5919 7.5118 13.9678 7.25505C13.3436 6.9983 12.6749 6.86748 12 6.87012ZM12 15.3301C11.3414 15.3301 10.6976 15.1348 10.15 14.7689C9.60234 14.403 9.17552 13.8829 8.92348 13.2745C8.67144 12.666 8.6055 11.9964 8.73398 11.3505C8.86247 10.7045 9.17963 10.1112 9.64533 9.64546C10.111 9.17975 10.7044 8.8626 11.3503 8.73411C11.9963 8.60562 12.6659 8.67156 13.2743 8.9236C13.8828 9.17564 14.4029 9.60246 14.7688 10.1501C15.1347 10.6977 15.33 11.3415 15.33 12.0001C15.33 12.4374 15.2439 12.8704 15.0765 13.2745C14.9092 13.6785 14.6639 14.0456 14.3547 14.3548C14.0454 14.664 13.6784 14.9093 13.2743 15.0766C12.8703 15.244 12.4373 15.3301 12 15.3301Z"
--- a/packages/design-system/lib/components/Icons/Customised/Socials/Tripadvisor.tsx
+++ b/packages/design-system/lib/components/Icons/Customised/Socials/Tripadvisor.tsx
@@ -1,6 +1,7 @@
 import { iconVariants } from '../../variants'

 import type { IconProps } from '../../icon'
+import { getIconAriaProps } from '../../utils'

 export default function TripadvisorIcon({
  className,
@@ -9,6 +10,8 @@ export default function TripadvisorIcon({
  ...props
 }: IconProps) {
  const classNames = iconVariants({ className, color })
+  const ariaProps = getIconAriaProps(props)
+
  return (
    <svg
      className={classNames}
@@ -18,6 +21,7 @@ export default function TripadvisorIcon({
      viewBox="0 0 24 24"
      fill="none"
      {...props}
+      {...ariaProps}
    >
      <path
        fillRule="evenodd"
--- a/packages/design-system/lib/components/Icons/Customised/UI/Minimize.tsx
+++ b/packages/design-system/lib/components/Icons/Customised/UI/Minimize.tsx
@@ -1,6 +1,7 @@
 import { iconVariants } from '../../variants'

 import type { IconProps } from '../../icon'
+import { getIconAriaProps } from '../../utils'

 export default function MinimizeIcon({
  className,
@@ -9,6 +10,8 @@ export default function MinimizeIcon({
  ...props
 }: IconProps) {
  const classNames = iconVariants({ className, color })
+  const ariaProps = getIconAriaProps(props)
+
  return (
    <svg
      className={classNames}
@@ -18,6 +21,7 @@ export default function MinimizeIcon({
      viewBox="0 0 24 24"
      fill="none"
      {...props}
+      {...ariaProps}
    >
      <path
        d="M9.06248 16.25L5.06248 20.2625C4.87914 20.4458 4.66456 20.5375 4.41873 20.5375C4.17289 20.5375 3.95414 20.4417 3.76248 20.25C3.57081 20.0583 3.47498 19.8375 3.47498 19.5875C3.47498 19.3375 3.57081 19.1167 3.76248 18.925L7.74998 14.9375H6.22498C5.96664 14.9375 5.74581 14.8458 5.56248 14.6625C5.37914 14.4792 5.28748 14.2583 5.28748 14C5.28748 13.7417 5.37914 13.5208 5.56248 13.3375C5.74581 13.1542 5.96664 13.0625 6.22498 13.0625H9.99998C10.2583 13.0625 10.4791 13.1542 10.6625 13.3375C10.8458 13.5208 10.9375 13.7417 10.9375 14V17.775C10.9375 18.0333 10.8458 18.2542 10.6625 18.4375C10.4791 18.6208 10.2583 18.7125 9.99998 18.7125C9.74164 18.7125 9.52081 18.6208 9.33748 18.4375C9.15414 18.2542 9.06248 18.0333 9.06248 17.775V16.25ZM16.25 9.06251H17.775C18.0333 9.06251 18.2541 9.15418 18.4375 9.33751C18.6208 9.52084 18.7125 9.74168 18.7125 10C18.7125 10.2583 18.6208 10.4792 18.4375 10.6625C18.2541 10.8458 18.0333 10.9375 17.775 10.9375H14C13.7416 10.9375 13.5208 10.8458 13.3375 10.6625C13.1541 10.4792 13.0625 10.2583 13.0625 10V6.22501C13.0625 5.96668 13.1541 5.74584 13.3375 5.56251C13.5208 5.37918 13.7416 5.28751 14 5.28751C14.2583 5.28751 14.4791 5.37918 14.6625 5.56251C14.8458 5.74584 14.9375 5.96668 14.9375 6.22501V7.75001L18.925 3.75001C19.1083 3.56668 19.325 3.47293 19.575 3.46876C19.825 3.46459 20.0458 3.55834 20.2375 3.75001C20.4291 3.94168 20.525 4.16251 20.525 4.41251C20.525 4.66251 20.4291 4.88334 20.2375 5.07501L16.25 9.06251Z"
--- a/packages/design-system/lib/components/Icons/Illustrations/Bed.tsx
+++ b/packages/design-system/lib/components/Icons/Illustrations/Bed.tsx
@@ -1,12 +1,16 @@
 import type { IllustrationProps } from '../icon'
+import { getIconAriaProps } from '../utils'

 export default function BedIcon(props: IllustrationProps) {
+  const ariaProps = getIconAriaProps(props)
+
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 358 203"
      fill="none"
      {...props}
+      {...ariaProps}
    >
      <path fill="#fff" d="M0 .75h358v201.375H0z" />
      <g fill="#cd0921">
--- a/packages/design-system/lib/components/Icons/Illustrations/BedBunk.tsx
+++ b/packages/design-system/lib/components/Icons/Illustrations/BedBunk.tsx
@@ -1,6 +1,9 @@
 import type { IllustrationProps } from '../icon'
+import { getIconAriaProps } from '../utils'

 export default function BedBunkIcon(props: IllustrationProps) {
+  const ariaProps = getIconAriaProps(props)
+
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
@@ -9,6 +12,7 @@ export default function BedBunkIcon(props: IllustrationProps) {
      viewBox="0 0 58 42"
      fill="none"
      {...props}
+      {...ariaProps}
    >
      <path
        fillRule="evenodd"
--- a/packages/design-system/lib/components/Icons/Illustrations/BedBunkExtra.tsx
+++ b/packages/design-system/lib/components/Icons/Illustrations/BedBunkExtra.tsx
@@ -1,6 +1,9 @@
 import type { IllustrationProps } from '../icon'
+import { getIconAriaProps } from '../utils'

 export default function BedBunkExtraIcon(props: IllustrationProps) {
+  const ariaProps = getIconAriaProps(props)
+
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
@@ -9,6 +12,7 @@ export default function BedBunkExtraIcon(props: IllustrationProps) {
      viewBox="0 0 72 42"
      fill="none"
      {...props}
+      {...ariaProps}
    >
      <path
        fillRule="evenodd"
--- a/packages/design-system/lib/components/Icons/Illustrations/BedGeneric.tsx
+++ b/packages/design-system/lib/components/Icons/Illustrations/BedGeneric.tsx
@@ -1,6 +1,9 @@
 import type { IllustrationProps } from '../icon'
+import { getIconAriaProps } from '../utils'

 export default function BedGenericIcon(props: IllustrationProps) {
+  const ariaProps = getIconAriaProps(props)
+
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
@@ -9,6 +12,7 @@ export default function BedGenericIcon(props: IllustrationProps) {
      viewBox="0 0 68 32"
      fill="none"
      {...props}
+      {...ariaProps}
    >
      <path
        fillRule="evenodd"
--- a/packages/design-system/lib/components/Icons/Illustrations/BedKing.tsx
+++ b/packages/design-system/lib/components/Icons/Illustrations/BedKing.tsx
@@ -1,6 +1,9 @@
 import type { IllustrationProps } from '../icon'
+import { getIconAriaProps } from '../utils'

 export default function BedKingIcon(props: IllustrationProps) {
+  const ariaProps = getIconAriaProps(props)
+
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
@@ -9,6 +12,7 @@ export default function BedKingIcon(props: IllustrationProps) {
      viewBox="0 0 51 36"
      fill="none"
      {...props}
+      {...ariaProps}
    >
      <path
        fillRule="evenodd"
--- a/packages/design-system/lib/components/Icons/Illustrations/BedPullOut.tsx
+++ b/packages/design-system/lib/components/Icons/Illustrations/BedPullOut.tsx
@@ -1,6 +1,9 @@
 import type { IllustrationProps } from '../icon'
+import { getIconAriaProps } from '../utils'

 export default function BedPullOutIcon(props: IllustrationProps) {
+  const ariaProps = getIconAriaProps(props)
+
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
@@ -9,6 +12,7 @@ export default function BedPullOutIcon(props: IllustrationProps) {
      viewBox="0 0 51 32"
      fill="none"
      {...props}
+      {...ariaProps}
    >
      <path
        fillRule="evenodd"
--- a/packages/design-system/lib/components/Icons/Illustrations/BedPullOutExtra.tsx
+++ b/packages/design-system/lib/components/Icons/Illustrations/BedPullOutExtra.tsx
@@ -1,6 +1,9 @@
 import type { IllustrationProps } from '../icon'
+import { getIconAriaProps } from '../utils'

 export default function BedPullOutExtraIcon(props: IllustrationProps) {
+  const ariaProps = getIconAriaProps(props)
+
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
@@ -9,6 +12,7 @@ export default function BedPullOutExtraIcon(props: IllustrationProps) {
      viewBox="0 0 51 32"
      fill="none"
      {...props}
+      {...ariaProps}
    >
      <path
        fillRule="evenodd"
--- a/packages/design-system/lib/components/Icons/Illustrations/BedQueen.tsx
+++ b/packages/design-system/lib/components/Icons/Illustrations/BedQueen.tsx
@@ -1,6 +1,9 @@
 import type { IllustrationProps } from '../icon'
+import { getIconAriaProps } from '../utils'

 export default function BedQueenIcon(props: IllustrationProps) {
+  const ariaProps = getIconAriaProps(props)
+
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
@@ -9,6 +12,7 @@ export default function BedQueenIcon(props: IllustrationProps) {
      viewBox="0 0 50 32"
      fill="none"
      {...props}
+      {...ariaProps}
    >
      <path
        fillRule="evenodd"
--- a/packages/design-system/lib/components/Icons/Illustrations/BedSingle.tsx
+++ b/packages/design-system/lib/components/Icons/Illustrations/BedSingle.tsx
@@ -1,6 +1,9 @@
 import type { IllustrationProps } from '../icon'
+import { getIconAriaProps } from '../utils'

 export default function BedSingleIcon(props: IllustrationProps) {
+  const ariaProps = getIconAriaProps(props)
+
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
@@ -9,6 +12,7 @@ export default function BedSingleIcon(props: IllustrationProps) {
      viewBox="0 0 36 32"
      fill="none"
      {...props}
+      {...ariaProps}
    >
      <path
        fillRule="evenodd"
--- a/packages/design-system/lib/components/Icons/Illustrations/BedSofa.tsx
+++ b/packages/design-system/lib/components/Icons/Illustrations/BedSofa.tsx
@@ -1,6 +1,9 @@
 import type { IllustrationProps } from '../icon'
+import { getIconAriaProps } from '../utils'

 export default function BedSofaIcon(props: IllustrationProps) {
+  const ariaProps = getIconAriaProps(props)
+
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
@@ -9,6 +12,7 @@ export default function BedSofaIcon(props: IllustrationProps) {
      viewBox="0 0 70 34"
      fill="none"
      {...props}
+      {...ariaProps}
    >
      <path
        fillRule="evenodd"
--- a/packages/design-system/lib/components/Icons/Illustrations/BedSofaExtra.tsx
+++ b/packages/design-system/lib/components/Icons/Illustrations/BedSofaExtra.tsx
@@ -1,6 +1,9 @@
 import type { IllustrationProps } from '../icon'
+import { getIconAriaProps } from '../utils'

 export default function BedSofaExtraIcon(props: IllustrationProps) {
+  const ariaProps = getIconAriaProps(props)
+
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
@@ -9,6 +12,7 @@ export default function BedSofaExtraIcon(props: IllustrationProps) {
      viewBox="0 0 70 34"
      fill="none"
      {...props}
+      {...ariaProps}
    >
      <path
        d="M69.5408 8.73112C69.3353 8.52568 69.0272 8.42296 68.719 8.42296C68.5136 8.42296 65.7402 8.6284 63.2749 9.75831C63.2749 6.88218 63.2749 4.82779 63.2749 4.82779C63.2749 2.1571 58.2417 0 51.9758 0C47.4562 0 43.5529 1.12991 41.7039 2.77341C39.855 1.12991 35.9517 0 31.432 0C25.1662 0 20.1329 2.1571 20.1329 4.82779C20.1329 4.82779 20.1329 6.88218 20.1329 9.75831C18.9003 9.14199 17.565 8.83384 16.5378 8.6284C14.8943 6.4713 12.2236 5.03323 9.24471 5.03323C4.10876 5.03323 0 9.14199 0 14.2779C0 19.4139 4.10876 23.5227 9.24471 23.5227C10.7855 23.5227 12.3263 23.1118 13.6616 22.3927V26.5015C13.6616 27.1178 14.1752 27.5287 14.6888 27.5287H20.1329H20.3384V28.2477C20.3384 29.3776 21.2628 30.4048 22.4955 30.4048H24.3444V32.8701C24.3444 33.4864 24.858 34 25.4743 34C26.0906 34 26.6042 33.4864 26.6042 32.8701V30.4048H57.0091V32.8701C57.0091 33.4864 57.5227 34 58.139 34C58.7553 34 59.2689 33.4864 59.2689 32.8701V30.4048H60.7069C61.8369 30.4048 62.864 29.4804 62.864 28.2477V27.5287H63.3776H68.8218C69.4381 27.5287 69.8489 27.0151 69.8489 26.5015V9.55287C69.8489 9.24471 69.7462 8.93656 69.5408 8.73112ZM49.4079 14.3807H34.5136C34.6163 13.148 34.9245 12.2236 35.6435 11.5045C36.7734 10.3746 38.7251 9.75831 41.6012 9.75831C47.9698 9.65559 49.2024 11.9154 49.4079 14.3807ZM10.2719 19.4139C10.2719 20.0302 9.86103 20.4411 9.24471 20.4411C8.6284 20.4411 8.21752 20.0302 8.21752 19.4139V15.3051H4.10876C3.49245 15.3051 3.08157 14.8943 3.08157 14.2779C3.08157 13.6616 3.49245 13.2508 4.10876 13.2508H8.21752V9.14199C8.21752 8.52568 8.6284 8.1148 9.24471 8.1148C9.86103 8.1148 10.2719 8.52568 10.2719 9.14199V13.2508H14.3807C14.997 13.2508 15.4079 13.6616 15.4079 14.2779C15.4079 14.8943 14.997 15.3051 14.3807 15.3051H10.2719V19.4139ZM22.0846 17.9758C20.3384 20.2356 20.3384 22.1873 20.3384 22.29V25.577H15.716V20.852C17.4622 19.2085 18.4894 16.8459 18.4894 14.2779C18.4894 13.148 18.284 12.1208 17.9758 11.1964C19.9275 11.8127 22.0846 12.9426 22.0846 15.2024V17.9758ZM22.29 11.1964V4.93051C22.3927 4.10876 25.7825 2.25982 31.5347 2.25982C37.0816 2.25982 40.4713 4.10876 40.6767 4.93051C40.6767 4.93051 40.6767 4.93051 40.6767 5.03323C40.6767 5.03323 40.6767 6.06042 40.6767 7.60121C37.6979 7.70393 35.5408 8.52568 34.1027 9.96375C32.9728 11.0937 32.3565 12.6344 32.3565 14.4834H29.8912C27.6314 14.4834 25.6798 14.997 24.2417 16.0242V15.3051C24.139 13.4562 23.4199 12.1208 22.29 11.1964ZM60.7069 28.4532H22.4955V25.3716H60.7069V28.4532ZM22.4955 23.1118V22.29C22.4955 22.29 22.4955 20.4411 24.5498 18.3867C25.7825 17.1541 27.6314 16.435 29.8912 16.435H53.003C55.571 16.435 57.5227 17.1541 58.7553 18.4894C60.8097 20.5438 60.7069 22.1873 60.7069 22.29V23.1118H22.4955ZM61.2205 11.1964C60.0906 12.1208 59.3716 13.4562 59.3716 15.3051V16.2296C57.7281 14.997 55.6737 14.3807 53.1057 14.3807H51.6677C51.4622 10.0665 48.4834 7.80665 42.9366 7.49849C42.9366 5.9577 42.9366 4.93051 42.9366 4.93051C42.9366 4.93051 42.9366 4.93051 42.9366 4.82779C43.2447 4.00604 46.5317 2.1571 52.0786 2.1571C57.8308 2.1571 61.1178 4.10876 61.3233 4.82779L61.2205 11.1964ZM67.7946 25.577H62.864V22.3927C62.864 22.29 62.864 20.5438 61.426 18.4894V15.3051C61.426 12.1208 65.6375 11.0937 67.6918 10.7855V25.577H67.7946Z"
--- a/packages/design-system/lib/components/Icons/Illustrations/BedTwin.tsx
+++ b/packages/design-system/lib/components/Icons/Illustrations/BedTwin.tsx
@@ -1,6 +1,9 @@
 import type { IllustrationProps } from '../icon'
+import { getIconAriaProps } from '../utils'

 export default function BedTwinIcon(props: IllustrationProps) {
+  const ariaProps = getIconAriaProps(props)
+
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
@@ -9,6 +12,7 @@ export default function BedTwinIcon(props: IllustrationProps) {
      viewBox="0 0 75 32"
      fill="none"
      {...props}
+      {...ariaProps}
    >
      <path
        fillRule="evenodd"
--- a/packages/design-system/lib/components/Icons/Illustrations/BedWallExtra.tsx
+++ b/packages/design-system/lib/components/Icons/Illustrations/BedWallExtra.tsx
@@ -1,6 +1,9 @@
 import type { IllustrationProps } from '../icon'
+import { getIconAriaProps } from '../utils'

 export default function BedWallExtraIcon(props: IllustrationProps) {
+  const ariaProps = getIconAriaProps(props)
+
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
@@ -9,6 +12,7 @@ export default function BedWallExtraIcon(props: IllustrationProps) {
      viewBox="0 0 53 34"
      fill="none"
      {...props}
+      {...ariaProps}
    >
      <path
        fillRule="evenodd"
--- a/packages/design-system/lib/components/Icons/Illustrations/BreakfastBuffet.tsx
+++ b/packages/design-system/lib/components/Icons/Illustrations/BreakfastBuffet.tsx
@@ -1,6 +1,9 @@
 import type { IllustrationProps } from '../icon'
+import { getIconAriaProps } from '../utils'

 export default function BreakfastBuffetIcon(props: IllustrationProps) {
+  const ariaProps = getIconAriaProps(props)
+
  return (
    <svg
      width="32"
@@ -9,6 +12,7 @@ export default function BreakfastBuffetIcon(props: IllustrationProps) {
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      {...props}
+      {...ariaProps}
    >
      <path
        d="M13.2976 4.76596C13.8499 4.76596 14.2976 4.31824 14.2976 3.76596V1C14.2976 0.447715 13.8499 0 13.2976 0H13.2551C12.7028 0 12.2551 0.447715 12.2551 0.999999V3.76596C12.2551 4.31824 12.7028 4.76596 13.2551 4.76596H13.2976Z"
--- a/packages/design-system/lib/components/Icons/Illustrations/Coin.tsx
+++ b/packages/design-system/lib/components/Icons/Illustrations/Coin.tsx
@@ -1,12 +1,16 @@
 import type { IllustrationProps } from '../icon'
+import { getIconAriaProps } from '../utils'

 export default function CoinIcon(props: IllustrationProps) {
+  const ariaProps = getIconAriaProps(props)
+
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 358 202"
      fill="none"
      {...props}
+      {...ariaProps}
    >
      <path fill="#fff" d="M0 0h358v201.375H0z" />
      <path
--- a/packages/design-system/lib/components/Icons/Illustrations/CroissantCoffeeEgg.tsx
+++ b/packages/design-system/lib/components/Icons/Illustrations/CroissantCoffeeEgg.tsx
@@ -1,12 +1,16 @@
 import type { IllustrationProps } from '../icon'
+import { getIconAriaProps } from '../utils'

 export default function CroissantCoffeeEggIcon(props: IllustrationProps) {
+  const ariaProps = getIconAriaProps(props)
+
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 358 202"
      fill="none"
      {...props}
+      {...ariaProps}
    >
      <path fill="#fff" d="M0 0h358v201.375H0z" />
      <path
--- a/packages/design-system/lib/components/Icons/Illustrations/CutleryOne.tsx
+++ b/packages/design-system/lib/components/Icons/Illustrations/CutleryOne.tsx
@@ -1,12 +1,16 @@
 import type { IllustrationProps } from '../icon'
+import { getIconAriaProps } from '../utils'

 export default function CutleryOneIcon(props: IllustrationProps) {
+  const ariaProps = getIconAriaProps(props)
+
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 358 203"
      fill="none"
      {...props}
+      {...ariaProps}
    >
      <path fill="#fff" d="M0 .75h358v201.375H0z" />
      <path
--- a/packages/design-system/lib/components/Icons/Illustrations/CutleryTwo.tsx
+++ b/packages/design-system/lib/components/Icons/Illustrations/CutleryTwo.tsx
@@ -1,12 +1,16 @@
 import type { IllustrationProps } from '../icon'
+import { getIconAriaProps } from '../utils'

 export default function CutleryTwoIcon(props: IllustrationProps) {
+  const ariaProps = getIconAriaProps(props)
+
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 358 203"
      fill="none"
      {...props}
+      {...ariaProps}
    >
      <path fill="#fff" d="M0 .75h358v201.375H0z" />
      <path
--- a/packages/design-system/lib/components/Icons/Illustrations/GiftOpen.tsx
+++ b/packages/design-system/lib/components/Icons/Illustrations/GiftOpen.tsx
@@ -1,12 +1,16 @@
 import type { IllustrationProps } from '../icon'
+import { getIconAriaProps } from '../utils'

 export default function GiftOpenIcon(props: IllustrationProps) {
+  const ariaProps = getIconAriaProps(props)
+
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 358 203"
      fill="none"
      {...props}
+      {...ariaProps}
    >
      <path fill="#fff" d="M0 .75h358v201.375H0z" />
      <g fill="#cd0921">
--- a/packages/design-system/lib/components/Icons/Illustrations/HandKey.tsx
+++ b/packages/design-system/lib/components/Icons/Illustrations/HandKey.tsx
@@ -1,12 +1,16 @@
 import type { IllustrationProps } from '../icon'
+import { getIconAriaProps } from '../utils'

 export default function HandKeyIcon(props: IllustrationProps) {
+  const ariaProps = getIconAriaProps(props)
+
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 358 202"
      fill="none"
      {...props}
+      {...ariaProps}
    >
      <path fill="#fff" d="M0 .375h358V201.75H0z" />
      <path
--- a/packages/design-system/lib/components/Icons/Illustrations/HotelNight.tsx
+++ b/packages/design-system/lib/components/Icons/Illustrations/HotelNight.tsx
@@ -1,12 +1,16 @@
 import type { IllustrationProps } from '../icon'
+import { getIconAriaProps } from '../utils'

 export default function HotelNightIcon(props: IllustrationProps) {
+  const ariaProps = getIconAriaProps(props)
+
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 358 202"
      fill="none"
      {...props}
+      {...ariaProps}
    >
      <path fill="#fff" d="M0 0h358v201.375H0z" />
      <path
--- a/packages/design-system/lib/components/Icons/Illustrations/Kids.tsx
+++ b/packages/design-system/lib/components/Icons/Illustrations/Kids.tsx
@@ -1,12 +1,16 @@
 import type { IllustrationProps } from '../icon'
+import { getIconAriaProps } from '../utils'

 export default function KidsIcon(props: IllustrationProps) {
+  const ariaProps = getIconAriaProps(props)
+
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 358 202"
      fill="none"
      {...props}
+      {...ariaProps}
    >
      <path fill="#fff" d="M0 .125h358V201.5H0z" />
      <path
--- a/packages/design-system/lib/components/Icons/Illustrations/KidsMocktail.tsx
+++ b/packages/design-system/lib/components/Icons/Illustrations/KidsMocktail.tsx
@@ -1,12 +1,16 @@
 import type { IllustrationProps } from '../icon'
+import { getIconAriaProps } from '../utils'

 export default function KidsMocktailIcon(props: IllustrationProps) {
+  const ariaProps = getIconAriaProps(props)
+
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 358 202"
      fill="none"
      {...props}
+      {...ariaProps}
    >
      <path fill="#fff" d="M0 0h358v201.375H0z" />
      <path
--- a/packages/design-system/lib/components/Icons/Illustrations/MagicWand.tsx
+++ b/packages/design-system/lib/components/Icons/Illustrations/MagicWand.tsx
@@ -1,12 +1,16 @@
 import type { IllustrationProps } from '../icon'
+import { getIconAriaProps } from '../utils'

 export default function MagicWandIcon(props: IllustrationProps) {
+  const ariaProps = getIconAriaProps(props)
+
  return (
    <svg
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      viewBox="-0.63 0.55 249.98 201.65"
      {...props}
+      {...ariaProps}
    >
      <path
        d="M155.649 76.5946L20.1971 122.255C15.0543 120.031 17.8342 113.707 17.8342 113.707L76.0041 94.1081C78.784 96.9575 80.5214 96.749 83.0234 95.776C83.9268 95.4285 84.0658 94.2471 83.3014 91.6061L86.7763 90.4247C87.6102 91.1197 88.4442 91.5366 89.4172 92.0231C93.5176 93.8996 95.4635 91.1892 94.3516 87.8532H94.6295C94.6295 87.7838 117.425 80.139 117.425 80.139L153.286 67.9768C153.286 67.9768 159.124 71.2432 155.649 76.5251V76.5946Z"
--- a/packages/design-system/lib/components/Icons/Illustrations/MoneyHand.tsx
+++ b/packages/design-system/lib/components/Icons/Illustrations/MoneyHand.tsx
@@ -1,12 +1,16 @@
 import type { IllustrationProps } from '../icon'
+import { getIconAriaProps } from '../utils'

 export default function MoneyHandIcon(props: IllustrationProps) {
+  const ariaProps = getIconAriaProps(props)
+
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 358 202"
      fill="none"
      {...props}
+      {...ariaProps}
    >
      <path fill="#fff" d="M0 .375h358V201.75H0z" />
      <path
--- a/packages/design-system/lib/components/Icons/Illustrations/MoneyHandEllipsis.tsx
+++ b/packages/design-system/lib/components/Icons/Illustrations/MoneyHandEllipsis.tsx
@@ -1,12 +1,16 @@
 import type { IllustrationProps } from '../icon'
+import { getIconAriaProps } from '../utils'

 export default function MoneyHandEllipsisIcon(props: IllustrationProps) {
+  const ariaProps = getIconAriaProps(props)
+
  return (
    <svg
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      viewBox="87.65 77.65 138.62 134.02"
      {...props}
+      {...ariaProps}
    >
      <circle cx="156" cy="154.809" r="56.8509" fill="#F9F6F4" />
      <path
--- a/packages/design-system/lib/components/Icons/Illustrations/NoBreakfastBuffet.tsx
+++ b/packages/design-system/lib/components/Icons/Illustrations/NoBreakfastBuffet.tsx
@@ -1,6 +1,9 @@
 import type { IllustrationProps } from '../icon'
+import { getIconAriaProps } from '../utils'

 export default function NoBreakfastBuffetIcon(props: IllustrationProps) {
+  const ariaProps = getIconAriaProps(props)
+
  return (
    <svg
      width="32"
@@ -9,6 +12,7 @@ export default function NoBreakfastBuffetIcon(props: IllustrationProps) {
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      {...props}
+      {...ariaProps}
    >
      <path
        d="M5.70019 9.53193L0 9.53192V14.6383C0 22.0108 5.90393 27.9149 13.2763 27.9149C16.3282 27.9149 19.1284 26.9032 21.3623 25.1944L19.9028 23.7349C18.0501 25.0813 15.7627 25.8723 13.2763 25.8723C7.03197 25.8723 2.04251 20.8828 2.04251 14.6383V11.5745H7.74269L5.70019 9.53193Z"
--- a/packages/design-system/lib/components/Icons/Illustrations/Surprise.tsx
+++ b/packages/design-system/lib/components/Icons/Illustrations/Surprise.tsx
@@ -1,12 +1,16 @@
 import type { IllustrationProps } from '../icon'
+import { getIconAriaProps } from '../utils'

 export default function SurpriseIcon(props: IllustrationProps) {
+  const ariaProps = getIconAriaProps(props)
+
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 570 571"
      fill="none"
      {...props}
+      {...ariaProps}
    >
      <path
        d="M204.21 238.64C206.66 189.49 208.65 187.5 257.8 185.05C208.65 182.6 206.66 180.61 204.21 131.46C201.76 180.61 199.77 182.6 150.62 185.05C199.77 187.5 201.76 189.49 204.21 238.64Z"
--- a/packages/design-system/lib/components/Icons/Illustrations/Trophy.tsx
+++ b/packages/design-system/lib/components/Icons/Illustrations/Trophy.tsx
@@ -1,6 +1,9 @@
 import type { IllustrationProps } from '../icon'
+import { getIconAriaProps } from '../utils'

 export default function TrophyIcon(props: IllustrationProps) {
+  const ariaProps = getIconAriaProps(props)
+
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
@@ -9,6 +12,7 @@ export default function TrophyIcon(props: IllustrationProps) {
      width="82.99"
      height="111.94"
      {...props}
+      {...ariaProps}
    >
      <path
        fill="#CD0921"
--- a/packages/design-system/lib/components/Icons/Illustrations/Voucher.tsx
+++ b/packages/design-system/lib/components/Icons/Illustrations/Voucher.tsx
@@ -1,12 +1,16 @@
 import type { IllustrationProps } from '../icon'
+import { getIconAriaProps } from '../utils'

 export default function VoucherIcon(props: IllustrationProps) {
+  const ariaProps = getIconAriaProps(props)
+
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 358 202"
      fill="none"
      {...props}
+      {...ariaProps}
    >
      <path fill="#fff" d="M0 .375h358V201.75H0z" />
      <g fill="#4d001b">
--- a/packages/design-system/lib/components/Icons/Logos/DowntownCamper.tsx
+++ b/packages/design-system/lib/components/Icons/Logos/DowntownCamper.tsx
@@ -2,6 +2,7 @@ import type { LogoProps } from '../icon'

 export default function DowntownCamperIcon({
  className = '',
+  'aria-label': ariaLabel,
  height = 30,
  width = 123,
  ...props
@@ -14,6 +15,8 @@ export default function DowntownCamperIcon({
      viewBox="0 0 123 30"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
+      // eslint-disable-next-line formatjs/no-literal-string-in-jsx
+      aria-label={ariaLabel ?? 'Downtown Camper'}
      {...props}
    >
      <path
--- a/packages/design-system/lib/components/Icons/Logos/GrandHotelOslo.tsx
+++ b/packages/design-system/lib/components/Icons/Logos/GrandHotelOslo.tsx
@@ -2,6 +2,7 @@ import type { LogoProps } from '../icon'

 export default function GrandHotelOsloLogoIcon({
  className = '',
+  'aria-label': ariaLabel,
  height = 30,
  width = 69,
  ...props
@@ -14,6 +15,8 @@ export default function GrandHotelOsloLogoIcon({
      viewBox="0 0 69 30"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
+      // eslint-disable-next-line formatjs/no-literal-string-in-jsx
+      aria-label={ariaLabel ?? 'Grand Hotel Oslo'}
      {...props}
    >
      <path
--- a/packages/design-system/lib/components/Icons/Logos/Haymarket.tsx
+++ b/packages/design-system/lib/components/Icons/Logos/Haymarket.tsx
@@ -2,6 +2,7 @@ import type { LogoProps } from '../icon'

 export default function HaymarketIcon({
  className = '',
+  'aria-label': ariaLabel,
  height = 26,
  width = 100,
  ...props
@@ -14,6 +15,8 @@ export default function HaymarketIcon({
      viewBox="0 0 100 26"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
+      // eslint-disable-next-line formatjs/no-literal-string-in-jsx
+      aria-label={ariaLabel ?? 'Haymarket'}
      {...props}
    >
      <path
--- a/packages/design-system/lib/components/Icons/Logos/HotelNorge.tsx
+++ b/packages/design-system/lib/components/Icons/Logos/HotelNorge.tsx
@@ -2,6 +2,7 @@ import type { LogoProps } from '../icon'

 export default function HotelNorgeIcon({
  className = '',
+  'aria-label': ariaLabel,
  height = 24,
  width = 117,
  ...props
@@ -14,6 +15,8 @@ export default function HotelNorgeIcon({
      viewBox="0 0 117 24"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
+      // eslint-disable-next-line formatjs/no-literal-string-in-jsx
+      aria-label={ariaLabel ?? 'Hotel Norge'}
      {...props}
    >
      <path
--- a/packages/design-system/lib/components/Icons/Logos/Marski.tsx
+++ b/packages/design-system/lib/components/Icons/Logos/Marski.tsx
@@ -2,6 +2,7 @@ import type { LogoProps } from '../icon'

 export default function MarskiLogoIcon({
  className = '',
+  'aria-label': ariaLabel,
  height = 30,
  width = 92,
  ...props
@@ -14,6 +15,8 @@ export default function MarskiLogoIcon({
      viewBox="0 0 92 30"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
+      // eslint-disable-next-line formatjs/no-literal-string-in-jsx
+      aria-label={ariaLabel ?? 'Marski'}
      {...props}
    >
      <path
--- a/packages/design-system/lib/components/Icons/Logos/ScandicGoLogo.tsx
+++ b/packages/design-system/lib/components/Icons/Logos/ScandicGoLogo.tsx
@@ -2,6 +2,7 @@ import type { LogoProps } from '../icon'

 export default function ScandicGoLogoIcon({
  className = '',
+  'aria-label': ariaLabel,
  height = 18,
  width = 90,
  ...props
@@ -14,6 +15,8 @@ export default function ScandicGoLogoIcon({
      viewBox="0 0 90 18"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
+      // eslint-disable-next-line formatjs/no-literal-string-in-jsx
+      aria-label={ariaLabel ?? 'Scandic Go'}
      {...props}
    >
      <path
--- a/packages/design-system/lib/components/Icons/Logos/ScandicLogo.tsx
+++ b/packages/design-system/lib/components/Icons/Logos/ScandicLogo.tsx
@@ -5,6 +5,7 @@ import styles from './logo.module.css'

 export default function ScandicLogoIcon({
  className = '',
+  'aria-label': ariaLabel,
  height = 14,
  width = 58,
  ...props
@@ -17,6 +18,8 @@ export default function ScandicLogoIcon({
      viewBox="0 0 132 28"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
+      // eslint-disable-next-line formatjs/no-literal-string-in-jsx
+      aria-label={ariaLabel ?? 'Scandic'}
      {...props}
    >
      <path
--- a/packages/design-system/lib/components/Icons/Logos/TheDock.tsx
+++ b/packages/design-system/lib/components/Icons/Logos/TheDock.tsx
@@ -2,6 +2,7 @@ import type { LogoProps } from '../icon'

 export default function TheDockIcon({
  className = '',
+  'aria-label': ariaLabel,
  height = 30,
  width = 128,
  ...props
@@ -14,6 +15,8 @@ export default function TheDockIcon({
      viewBox="0 0 128 30"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
+      // eslint-disable-next-line formatjs/no-literal-string-in-jsx
+      aria-label={ariaLabel ?? 'The Dock'}
      {...props}
    >
      <path
--- a/Show More
+++ b/Show More