From 9937dfd00235d0a4f7dccf3eebc0d3b0cf27464c Mon Sep 17 00:00:00 2001
From: Hrishikesh Vaipurkar <hrishikesh.vaipurkar@scandichotels.com>
Date: Thu, 27 Nov 2025 09:40:38 +0000
Subject: [PATCH] Merged in fix/BOOK-408-alt-text-needs-to-be-updated- (pull
 request #3220)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 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    |  8 ++++++++
 .../Footer/Navigation/SecondaryNav/index.tsx         |  4 ++++
 apps/scandic-web/components/LogoLink/index.tsx       | 11 ++---------
 .../lib/components/ButtonLink/index.tsx              |  8 ++++++++
 .../design-system/lib/components/OldDSLink/index.tsx |  9 +++++++++
 .../lib/components/TextLink/TextLink.tsx             | 12 ++++++++++++
 6 files changed, 43 insertions(+), 9 deletions(-)

diff --git a/apps/scandic-web/components/ContentCard/index.tsx b/apps/scandic-web/components/ContentCard/index.tsx
index 34854f28b..c35985cc8 100644
--- a/apps/scandic-web/components/ContentCard/index.tsx
+++ b/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",
+      }),
     }),
   }
 
diff --git a/apps/scandic-web/components/Footer/Navigation/SecondaryNav/index.tsx b/apps/scandic-web/components/Footer/Navigation/SecondaryNav/index.tsx
index 6d69710fe..f012893be 100644
--- a/apps/scandic-web/components/Footer/Navigation/SecondaryNav/index.tsx
+++ b/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}
diff --git a/apps/scandic-web/components/LogoLink/index.tsx b/apps/scandic-web/components/LogoLink/index.tsx
index bd33fb41a..a46a1850d 100644
--- a/apps/scandic-web/components/LogoLink/index.tsx
+++ b/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>
   )
diff --git a/packages/design-system/lib/components/ButtonLink/index.tsx b/packages/design-system/lib/components/ButtonLink/index.tsx
index 39de9ac50..fcd978160 100644
--- a/packages/design-system/lib/components/ButtonLink/index.tsx
+++ b/packages/design-system/lib/components/ButtonLink/index.tsx
@@ -6,6 +6,7 @@ import { type ComponentProps, type PropsWithChildren } from 'react'
 import { variants } from './variants'
 
 import type { VariantProps } from 'class-variance-authority'
+import { useIntl } from 'react-intl'
 
 export interface ButtonLinkProps
   extends PropsWithChildren,
@@ -33,12 +34,19 @@ export default function ButtonLink({
     className,
   })
 
+  const intl = useIntl()
+  const newTabText = intl.formatMessage({
+    id: 'common.linkOpenInNewTab',
+    defaultMessage: 'Opens in a new tab/window',
+  })
+
   return (
     <Link
       className={classNames}
       href={href}
       target={target}
       onClick={onClick}
+      title={target === '_blank' ? newTabText : ''}
       {...props}
     />
   )
diff --git a/packages/design-system/lib/components/OldDSLink/index.tsx b/packages/design-system/lib/components/OldDSLink/index.tsx
index a78e84b40..bc5e999c1 100644
--- a/packages/design-system/lib/components/OldDSLink/index.tsx
+++ b/packages/design-system/lib/components/OldDSLink/index.tsx
@@ -6,6 +6,7 @@ import { useMemo } from 'react'
 import { linkVariants } from './variants'
 
 import type { LinkProps } from './link'
+import { useIntl } from 'react-intl'
 
 export { LinkProps }
 
@@ -36,6 +37,7 @@ export default function Link({
 }: LinkProps) {
   const currentPageSlug = usePathname()
   const searchParams = useSearchParams()
+  const intl = useIntl()
   let isActive = active || currentPageSlug === href
 
   if (partialMatch && !isActive) {
@@ -78,6 +80,13 @@ export default function Link({
   const linkProps = {
     href: fullUrl,
     className: classNames,
+    title:
+      props.target === '_blank'
+        ? intl.formatMessage({
+            id: 'common.linkOpenInNewTab',
+            defaultMessage: 'Opens in a new tab/window',
+          })
+        : '',
   }
 
   return isExternal ? (
diff --git a/packages/design-system/lib/components/TextLink/TextLink.tsx b/packages/design-system/lib/components/TextLink/TextLink.tsx
index f60c4a798..93832c3cb 100644
--- a/packages/design-system/lib/components/TextLink/TextLink.tsx
+++ b/packages/design-system/lib/components/TextLink/TextLink.tsx
@@ -1,9 +1,12 @@
+'use client'
+
 import { cx } from 'class-variance-authority'
 import NextLink from 'next/link'
 import { TextLinkProps } from './types'
 import { variants } from './variants'
 
 import styles from './textLink.module.css'
+import { useIntl } from 'react-intl'
 
 export function TextLink({
   theme,
@@ -14,6 +17,7 @@ export function TextLink({
   typography,
   ...props
 }: TextLinkProps) {
+  const intl = useIntl()
   const classNames = variants({
     theme,
     typography,
@@ -29,6 +33,14 @@ export function TextLink({
         [styles.disabled]: isDisabled,
         [styles.inline]: isInline,
       })}
+      title={
+        props.target === '_blank'
+          ? intl.formatMessage({
+              id: 'common.linkOpenInNewTab',
+              defaultMessage: 'Opens in a new tab/window',
+            })
+          : ''
+      }
     />
   )
 }