Feat/BOOK-117 svg accessibility

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

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

apps/scandic-web/components/LogoLink/index.tsx

@@ -0,0 +1,58 @@
+"use client"
+import { cx } from "class-variance-authority"
+import NextLink from "next/link"
+import { useIntl } from "react-intl"
+
+import ScandicLogoIcon from "@scandic-hotels/design-system/Icons/ScandicLogoIcon"
+
+import useDropdownStore from "@/stores/main-menu"
+
+import useLang from "@/hooks/useLang"
+
+import styles from "./logoLink.module.css"
+
+import { DropdownTypeEnum } from "@/types/components/dropdown/dropdown"
+
+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()
+
+  function handleNavigate() {
+    if (isHamburgerMenuOpen) {
+      toggleDropdown(DropdownTypeEnum.HamburgerMenu)
+    }
+  }
+
+  return (
+    <NextLink
+      className={styles.logoLink}
+      href={`/${lang}`}
+      onClick={handleNavigate}
+      aria-label={
+        ariaLabel ??
+        intl.formatMessage({
+          id: "header.backToScandicHotelsCom",
+          defaultMessage: "Back to scandichotels.com",
+        })
+      }
+      {...props}
+    >
+      <ScandicLogoIcon
+        className={cx(styles.logoIcon, {
+          [styles.inverted]: isInverted,
+        })}
+        width="103px"
+        height="22px"
+      />
+    </NextLink>
+  )
+}

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);
+}