Merged in fix/BOOK-408-alt-text-needs-to-be-updated- (pull request #3220)

* fix(BOOK-408): Updated logo aria label
* fix(BOOK-408): Added title for links opening in new tab
* fix(BOOK-408): Added translations handling for title

Approved-by: Anton Gunnarsson
Approved-by: Matilda Landström

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

@@ -1,4 +1,7 @@
+"use client"
+
 import NextLink from "next/link"
+import { useIntl } from "react-intl"
 
 import Chip from "@scandic-hotels/design-system/Chip"
 import Image from "@scandic-hotels/design-system/Image"
@@ -29,6 +32,7 @@ export default function ContentCard({
   className = "",
   link,
 }: ContentCardProps) {
+  const intl = useIntl()
   const card = (
     <article className={`${styles.card} ${className}`}>
       <div className={styles.imageContainer}>
@@ -63,6 +67,10 @@ export default function ContentCard({
     ...(link.openInNewTab && {
       target: "_blank",
       rel: "noopener noreferrer",
+      title: intl.formatMessage({
+        id: "common.linkOpenInNewTab",
+        defaultMessage: "Opens in a new tab/window",
+      }),
     }),
   }
 

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

@@ -42,6 +42,10 @@ export default function FooterSecondaryNav({
                     href={href.href}
                     target="_blank"
                     onClick={() => trackSocialMediaClick(href.title)}
+                    title={intl.formatMessage({
+                      id: "common.linkOpenInNewTab",
+                      defaultMessage: "Opens in a new tab/window",
+                    })}
                   >
                     <Image
                       src={attributes.src}

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

@@ -1,7 +1,6 @@
 "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"
 
@@ -23,7 +22,6 @@ export function LogoLink({
   ...props
 }: LogoLinkProps) {
   const lang = useLang()
-  const intl = useIntl()
   const { toggleDropdown, isHamburgerMenuOpen } = useDropdownStore()
 
   function handleNavigate() {
@@ -37,13 +35,6 @@ export function LogoLink({
       className={styles.logoLink}
       href={`/${lang}`}
       onClick={handleNavigate}
-      aria-label={
-        ariaLabel ??
-        intl.formatMessage({
-          id: "header.backToScandicHotelsCom",
-          defaultMessage: "Back to scandichotels.com",
-        })
-      }
       {...props}
     >
       <ScandicLogoIcon
@@ -52,6 +43,8 @@ export function LogoLink({
         })}
         width="103px"
         height="22px"
+        // eslint-disable-next-line formatjs/no-literal-string-in-jsx
+        aria-label="Scandic"
       />
     </NextLink>
   )