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

apps/scandic-web/components/LanguageSwitcher/LanguageSwitcherContent/index.tsx

@@ -1,6 +1,5 @@
 "use client"
 
-import { FocusTrap } from "focus-trap-react"
 import { usePathname } from "next/navigation"
 import { useIntl } from "react-intl"
 
@@ -29,33 +28,31 @@ export default function LanguageSwitcherContent({
   const pathname = usePathname()
 
   return (
-    <FocusTrap focusTrapOptions={{ clickOutsideDeactivates: true }}>
-      <div className={styles.languageWrapper}>
-        <Subtitle className={styles.subtitle} type="two">
-          {intl.formatMessage({ id: "Select your language" })}
-        </Subtitle>
-        <ul className={styles.list}>
-          {urlKeys.map((key) => {
-            const url = urls[key]?.url
-            const isActive = currentLanguage === key
-            if (url) {
-              return (
-                <li key={key}>
-                  <Link
-                    className={`${styles.link} ${isActive ? styles.active : ""}`}
-                    href={replaceUrlPart(pathname, url)}
-                    onClick={onLanguageSwitch}
-                    keepSearchParams
-                  >
-                    {languages[key]}
-                    {isActive ? <CheckIcon color="burgundy" /> : null}
-                  </Link>
-                </li>
-              )
-            }
-          })}
-        </ul>
-      </div>
-    </FocusTrap>
+    <div className={styles.languageWrapper}>
+      <Subtitle className={styles.subtitle} type="two">
+        {intl.formatMessage({ id: "Select your language" })}
+      </Subtitle>
+      <ul className={styles.list}>
+        {urlKeys.map((key) => {
+          const url = urls[key]?.url
+          const isActive = currentLanguage === key
+          if (url) {
+            return (
+              <li key={key}>
+                <Link
+                  className={`${styles.link} ${isActive ? styles.active : ""}`}
+                  href={replaceUrlPart(pathname, url)}
+                  onClick={onLanguageSwitch}
+                  keepSearchParams
+                >
+                  {languages[key]}
+                  {isActive ? <CheckIcon color="burgundy" /> : null}
+                </Link>
+              </li>
+            )
+          }
+        })}
+      </ul>
+    </div>
   )
 }

apps/scandic-web/components/LanguageSwitcher/index.tsx

@@ -2,6 +2,7 @@
 
 import { usePathname } from "next/navigation"
 import { useRef } from "react"
+import FocusLock from "react-focus-lock"
 import { useIntl } from "react-intl"
 
 import { languages } from "@/constants/languages"
@@ -118,14 +119,14 @@ export default function LanguageSwitcher({ type }: LanguageSwitcherProps) {
       <div
         className={`${styles.dropdown} ${isLanguageSwitcherOpen ? styles.isExpanded : ""}`}
       >
-        {isLanguageSwitcherOpen ? (
+        <FocusLock returnFocus={true} disabled={!isLanguageSwitcherOpen}>
           <LanguageSwitcherContainer type={type}>
             <LanguageSwitcherContent
               urls={languagesResponse.urls}
               onLanguageSwitch={() => toggleDropdown(dropdownType)}
             />
           </LanguageSwitcherContainer>
-        ) : null}
+        </FocusLock>
       </div>
     </div>
   )

apps/scandic-web/package.json

@@ -68,7 +68,6 @@
     "embla-carousel-react": "^8.5.2",
     "fast-deep-equal": "^3.1.3",
     "fetch-retry": "^6.0.0",
-    "focus-trap-react": "^11.0.3",
     "framer-motion": "^11.3.28",
     "graphql": "^16.8.1",
     "graphql-request": "^6.1.0",
@@ -88,6 +87,7 @@
     "react-day-picker": "^9.0.8",
     "react-dom": "^18",
     "react-feather": "^2.0.10",
+    "react-focus-lock": "^2.13.6",
     "react-hook-form": "^7.51.2",
     "react-international-phone": "^4.2.6",
     "react-intl": "^6.6.8",