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