feat(SW-1842): Making the language switcher links render in the initial HTML for SEO purposes, should also fix SW-1991 and SW-1742.

Approved-by: Matilda Landström

apps/scandic-web/components/Header/MainMenu/MyPagesMenuContent/index.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { FocusTrap } from "focus-trap-react"
+import FocusLock from "react-focus-lock"
 import { useIntl } from "react-intl"
 
 import { logout } from "@/constants/routes/handleAuth"
@@ -42,7 +42,7 @@ export default function MyPagesMenuContent({
   }
 
   return (
-    <FocusTrap focusTrapOptions={{ clickOutsideDeactivates: true }}>
+    <FocusLock returnFocus={true}>
       <nav className={styles.myPagesMenuContent}>
         <div className={introClassName}>
           <Subtitle type="two" className={styles.userName}>
@@ -75,7 +75,7 @@ export default function MyPagesMenuContent({
           </li>
         </ul>
       </nav>
-    </FocusTrap>
+    </FocusLock>
   )
 }
 

apps/scandic-web/components/Header/MainMenu/NavigationMenu/MegaMenu/index.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { FocusTrap } from "focus-trap-react"
+import FocusLock from "react-focus-lock"
 
 import useDropdownStore from "@/stores/main-menu"
 
@@ -34,10 +34,7 @@ export default function MegaMenu({
   }
 
   return (
-    <FocusTrap
-      active={isOpen}
-      focusTrapOptions={{ clickOutsideDeactivates: true }}
-    >
+    <FocusLock disabled={!isOpen} returnFocus={true}>
       <nav className={`${styles.megaMenu} ${isOpen ? styles.active : ""}`}>
         {isMobile ? (
           <div className={styles.backWrapper}>
@@ -122,6 +119,6 @@ export default function MegaMenu({
           ) : null}
         </div>
       </nav>
-    </FocusTrap>
+    </FocusLock>
   )
 }