feat(SW-706): make eslint rule 'formatjs/no-literal-string-in-jsx' pass

apps/scandic-web/components/TempDesignSystem/Breadcrumbs/index.tsx

@@ -11,6 +11,7 @@ import {
   OverlayArrow,
   Popover,
 } from "react-aria-components"
+import { useIntl } from "react-intl"
 
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import { Typography } from "@scandic-hotels/design-system/Typography"
@@ -31,6 +32,8 @@ export default function Breadcrumbs({
   color,
   size,
 }: BreadcrumbsProps) {
+  const intl = useIntl()
+
   // using a ref instead to detect when the element is available and forcing a render
   const [element, attachRef] = useState<HTMLButtonElement | null>(null)
   const [isTooltipDisabled, setIsTooltipDisabled] = useState(false)
@@ -67,7 +70,12 @@ export default function Breadcrumbs({
     splitBreadcrumbs(breadcrumbs)
 
   return (
-    <nav aria-label="Breadcrumbs" className={classNames}>
+    <nav
+      aria-label={intl.formatMessage({
+        defaultMessage: "Breadcrumbs",
+      })}
+      className={classNames}
+    >
       <AriaBreadcrumbs className={styles.list}>
         <Breadcrumb
           href={homeBreadcrumb.href}
@@ -92,6 +100,7 @@ export default function Breadcrumbs({
             <Breadcrumb className={styles.mobile}>
               <DialogTrigger>
                 <Typography variant="Label/xsRegular">
+                  {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
                   <Button className={styles.button}>…</Button>
                 </Typography>
                 <Popover>