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>
   )

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}
     />
   )

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 ? (

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',
+            })
+          : ''
+      }
     />
   )
 }