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

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