feat(SW-1842): Making the navigation links in the header render in the initial HTML for SEO purposes

* feat(SW-1842): Making the navigation links in the header render in the initial HTML for SEO purposes


Approved-by: Fredrik Thorsson

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

@@ -1,5 +1,6 @@
 "use client"
 
+import { FocusTrap } from "focus-trap-react"
 import { useIntl } from "react-intl"
 
 import { logout } from "@/constants/routes/handleAuth"
@@ -11,7 +12,6 @@ import Link from "@/components/TempDesignSystem/Link"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 import useLang from "@/hooks/useLang"
-import { useTrapFocus } from "@/hooks/useTrapFocus"
 
 import styles from "./myPagesMenuContent.module.css"
 
@@ -26,7 +26,6 @@ export default function MyPagesMenuContent({
   membershipLevel,
 }: Props) {
   const intl = useIntl()
-  const myPagesMenuContentRef = useTrapFocus()
   const { data: myPagesNavigation } = useMyPagesNavigation()
 
   const primaryLinks = myPagesNavigation?.primaryLinks ?? []
@@ -43,38 +42,40 @@ export default function MyPagesMenuContent({
   }
 
   return (
-    <nav className={styles.myPagesMenuContent} ref={myPagesMenuContentRef}>
-      <div className={introClassName}>
-        <Subtitle type="two" className={styles.userName}>
-          {intl.formatMessage(
-            { id: "Hi {firstName}!" },
-            { firstName: user.firstName }
-          )}
-        </Subtitle>
-        {membershipLevel && membershipPoints ? (
-          <Caption className={styles.friendTypeWrapper}>
-            <span className={styles.friendType}>{membershipLevel.name}</span>
-            <span>
-              {intl.formatMessage(
-                { id: "{pointsAmount, number} points" },
-                { pointsAmount: membershipPoints }
-              )}
-            </span>
-          </Caption>
-        ) : null}
-      </div>
+    <FocusTrap focusTrapOptions={{ clickOutsideDeactivates: true }}>
+      <nav className={styles.myPagesMenuContent}>
+        <div className={introClassName}>
+          <Subtitle type="two" className={styles.userName}>
+            {intl.formatMessage(
+              { id: "Hi {firstName}!" },
+              { firstName: user.firstName }
+            )}
+          </Subtitle>
+          {membershipLevel && membershipPoints ? (
+            <Caption className={styles.friendTypeWrapper}>
+              <span className={styles.friendType}>{membershipLevel.name}</span>
+              <span>
+                {intl.formatMessage(
+                  { id: "{pointsAmount, number} points" },
+                  { pointsAmount: membershipPoints }
+                )}
+              </span>
+            </Caption>
+          ) : null}
+        </div>
 
-      <ul className={styles.groups}>
-        <li>
-          <Divider color="subtle" className={styles.divider} />
+        <ul className={styles.groups}>
+          <li>
+            <Divider color="subtle" className={styles.divider} />
 
-          <PrimaryLinks toggleOpenStateFn={toggleOpenStateFn} />
+            <PrimaryLinks toggleOpenStateFn={toggleOpenStateFn} />
 
-          <Divider color="subtle" className={styles.divider} />
-          <SecondaryLinks toggleOpenStateFn={toggleOpenStateFn} />
-        </li>
-      </ul>
-    </nav>
+            <Divider color="subtle" className={styles.divider} />
+            <SecondaryLinks toggleOpenStateFn={toggleOpenStateFn} />
+          </li>
+        </ul>
+      </nav>
+    </FocusTrap>
   )
 }
 

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

@@ -1,5 +1,7 @@
 "use client"
 
+import { FocusTrap } from "focus-trap-react"
+
 import useDropdownStore from "@/stores/main-menu"
 
 import { ArrowRightIcon, ChevronLeftIcon } from "@/components/Icons"
@@ -7,7 +9,6 @@ import Card from "@/components/TempDesignSystem/Card"
 import Link from "@/components/TempDesignSystem/Link"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
-import { useTrapFocus } from "@/hooks/useTrapFocus"
 
 import styles from "./megaMenu.module.css"
 
@@ -20,10 +21,10 @@ export default function MegaMenu({
   seeAllLink,
   submenu,
   card,
+  isOpen,
 }: MegaMenuProps) {
   const { toggleMegaMenu, toggleDropdown, isHamburgerMenuOpen } =
     useDropdownStore()
-  const megaMenuRef = useTrapFocus()
 
   function handleNavigate() {
     toggleMegaMenu(false)
@@ -33,89 +34,94 @@ export default function MegaMenu({
   }
 
   return (
-    <nav className={styles.megaMenu}>
-      {isMobile ? (
-        <div className={styles.backWrapper}>
-          <button
-            type="button"
-            className={styles.backButton}
-            onClick={() => toggleMegaMenu(false)}
-          >
-            <ChevronLeftIcon color="red" height={20} width={20} />
-            <Subtitle type="one" color="burgundy" asChild>
-              <span>{title}</span>
-            </Subtitle>
-          </button>
-        </div>
-      ) : null}
-      <div className={styles.megaMenuContent} ref={megaMenuRef}>
-        <div className={styles.seeAllLink}>
-          {seeAllLink?.link ? (
-            <Link
-              href={seeAllLink.link.url}
-              color="burgundy"
-              variant="icon"
-              weight="bold"
-              onClick={handleNavigate}
+    <FocusTrap
+      active={isOpen}
+      focusTrapOptions={{ clickOutsideDeactivates: true }}
+    >
+      <nav className={`${styles.megaMenu} ${isOpen ? styles.active : ""}`}>
+        {isMobile ? (
+          <div className={styles.backWrapper}>
+            <button
+              type="button"
+              className={styles.backButton}
+              onClick={() => toggleMegaMenu(false)}
             >
-              {seeAllLink.title}
-              <ArrowRightIcon color="burgundy" />
-            </Link>
-          ) : null}
-        </div>
-        <ul className={styles.submenus}>
-          {submenu.map((item) => (
-            <li key={item.title} className={styles.submenusItem}>
-              <Caption
-                type="label"
-                color="uiTextPlaceholder"
-                textTransform="uppercase"
-                asChild
-              >
-                <span className={styles.submenuTitle}>{item.title}</span>
-              </Caption>
-              <ul className={styles.submenu}>
-                {item.links.map(({ title, link }) =>
-                  link ? (
-                    <li key={title} className={styles.submenuItem}>
-                      <Link
-                        href={link.url}
-                        variant="menu"
-                        className={styles.link}
-                        onClick={handleNavigate}
-                      >
-                        {title}
-                        <ArrowRightIcon
-                          color="burgundy"
-                          className={styles.arrow}
-                        />
-                      </Link>
-                    </li>
-                  ) : null
-                )}
-              </ul>
-            </li>
-          ))}
-        </ul>
-        {card ? (
-          <div className={styles.cardWrapper}>
-            <Card
-              className={styles.card}
-              backgroundImage={card.backgroundImage}
-              bodyText={card.body_text}
-              heading={card.heading}
-              primaryButton={card.primaryButton}
-              secondaryButton={card.secondaryButton}
-              scriptedTopTitle={card.scripted_top_title}
-              onPrimaryButtonClick={handleNavigate}
-              onSecondaryButtonClick={handleNavigate}
-              imageGradient
-              theme="image"
-              height="dynamic"
-            />
+              <ChevronLeftIcon color="red" height={20} width={20} />
+              <Subtitle type="one" color="burgundy" asChild>
+                <span>{title}</span>
+              </Subtitle>
+            </button>
           </div>
         ) : null}
-      </div>
-    </nav>
+        <div className={styles.megaMenuContent}>
+          <div className={styles.seeAllLink}>
+            {seeAllLink?.link ? (
+              <Link
+                href={seeAllLink.link.url}
+                color="burgundy"
+                variant="icon"
+                weight="bold"
+                onClick={handleNavigate}
+              >
+                {seeAllLink.title}
+                <ArrowRightIcon color="burgundy" />
+              </Link>
+            ) : null}
+          </div>
+          <ul className={styles.submenus}>
+            {submenu.map((item) => (
+              <li key={item.title} className={styles.submenusItem}>
+                <Caption
+                  type="label"
+                  color="uiTextPlaceholder"
+                  textTransform="uppercase"
+                  asChild
+                >
+                  <span className={styles.submenuTitle}>{item.title}</span>
+                </Caption>
+                <ul className={styles.submenu}>
+                  {item.links.map(({ title, link }) =>
+                    link ? (
+                      <li key={title} className={styles.submenuItem}>
+                        <Link
+                          href={link.url}
+                          variant="menu"
+                          className={styles.link}
+                          onClick={handleNavigate}
+                        >
+                          {title}
+                          <ArrowRightIcon
+                            color="burgundy"
+                            className={styles.arrow}
+                          />
+                        </Link>
+                      </li>
+                    ) : null
+                  )}
+                </ul>
+              </li>
+            ))}
+          </ul>
+          {card ? (
+            <div className={styles.cardWrapper}>
+              <Card
+                className={styles.card}
+                backgroundImage={card.backgroundImage}
+                bodyText={card.body_text}
+                heading={card.heading}
+                primaryButton={card.primaryButton}
+                secondaryButton={card.secondaryButton}
+                scriptedTopTitle={card.scripted_top_title}
+                onPrimaryButtonClick={handleNavigate}
+                onSecondaryButtonClick={handleNavigate}
+                imageGradient
+                theme="image"
+                height="dynamic"
+              />
+            </div>
+          ) : null}
+        </div>
+      </nav>
+    </FocusTrap>
   )
 }

apps/scandic-web/components/Header/MainMenu/NavigationMenu/MegaMenu/megaMenu.module.css

@@ -1,3 +1,7 @@
+.megaMenu:not(.active) {
+  display: none;
+}
+
 .megaMenuContent {
   display: grid;
 }

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

@@ -66,15 +66,14 @@ export default function MenuItem({ item, isMobile }: NavigationMenuItemProps) {
         ref={megaMenuRef}
         className={`${styles.dropdown} ${isMegaMenuOpen ? styles.isExpanded : ""}`}
       >
-        {isMegaMenuOpen ? (
-          <MegaMenu
-            isMobile={isMobile}
-            title={title}
-            seeAllLink={seeAllLink}
-            submenu={submenu}
-            card={card}
-          />
-        ) : null}
+        <MegaMenu
+          isMobile={isMobile}
+          title={title}
+          seeAllLink={seeAllLink}
+          submenu={submenu}
+          card={card}
+          isOpen={isMegaMenuOpen}
+        />
       </div>
     </>
   ) : (

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

@@ -1,5 +1,6 @@
 "use client"
 
+import { FocusTrap } from "focus-trap-react"
 import { usePathname } from "next/navigation"
 import { useIntl } from "react-intl"
 
@@ -9,7 +10,6 @@ import { CheckIcon } from "@/components/Icons"
 import Link from "@/components/TempDesignSystem/Link"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 import useLang from "@/hooks/useLang"
-import { useTrapFocus } from "@/hooks/useTrapFocus"
 
 import { replaceUrlPart } from "./utils"
 
@@ -24,39 +24,40 @@ export default function LanguageSwitcherContent({
   const intl = useIntl()
   const currentLanguage = useLang()
 
-  const languageSwitcherRef = useTrapFocus()
   const urlKeys = Object.keys(urls) as Lang[]
 
   const pathname = usePathname()
 
   return (
-    <div className={styles.languageSwitcherContent} ref={languageSwitcherRef}>
-      <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>
+    <FocusTrap focusTrapOptions={{ clickOutsideDeactivates: true }}>
+      <div className={styles.languageSwitcherContent}>
+        <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>
       </div>
-    </div>
+    </FocusTrap>
   )
 }

apps/scandic-web/hooks/useTrapFocus.ts

@@ -1,83 +0,0 @@
-"use client"
-
-import { useCallback, useEffect, useRef, useState } from "react"
-
-import { useHandleKeyPress } from "@/hooks/useHandleKeyPress"
-import findTabbableDescendants from "@/utils/tabbable"
-
-const TAB_KEY = "Tab"
-const optionsDefault = { focusOnRender: true, returnFocus: true }
-type OptionsType = {
-  focusOnRender?: boolean
-  returnFocus?: boolean
-}
-export function useTrapFocus(opts?: OptionsType) {
-  const options = opts ? { ...optionsDefault, ...opts } : optionsDefault
-  const ref = useRef<HTMLDivElement>(null)
-  const previouseFocusedElement = useRef<HTMLElement>(
-    document.activeElement as HTMLElement
-  )
-  const [tabbableElements, setTabbableElements] = useState<HTMLElement[]>([])
-  // Handle initial focus of the referenced element, and return focus to previously focused element on cleanup
-  // and find all the tabbable elements in the referenced element
-
-  useEffect(() => {
-    const { current } = ref
-    if (current) {
-      const focusableChildNodes = findTabbableDescendants(current)
-      if (options.focusOnRender) {
-        current.focus()
-      }
-
-      setTabbableElements(focusableChildNodes)
-    }
-    return () => {
-      const { current } = previouseFocusedElement
-      if (current instanceof HTMLElement && options.returnFocus) {
-        current.focus()
-      }
-    }
-  }, [options.focusOnRender, options.returnFocus, ref, setTabbableElements])
-
-  const handleUserKeyPress = useCallback(
-    (event: KeyboardEvent) => {
-      const { code, shiftKey } = event
-      const first = tabbableElements[0]
-      const last = tabbableElements[tabbableElements.length - 1]
-
-      const currentActiveElement = document.activeElement
-      // Scope current tabs to current root element
-      if (isWithinCurrentElementScope([...tabbableElements, ref.current])) {
-        if (code === TAB_KEY) {
-          if (
-            currentActiveElement === first ||
-            currentActiveElement === ref.current
-          ) {
-            // move focus to last element if shift+tab while currently focusing the first tabbable element
-            if (shiftKey) {
-              event.preventDefault()
-              last.focus()
-            }
-          }
-          if (currentActiveElement === last) {
-            // move focus back to first if tabbing while currently focusing the last tabbable element
-            if (!shiftKey) {
-              event.preventDefault()
-              first.focus()
-            }
-          }
-        }
-      }
-    },
-    [ref, tabbableElements]
-  )
-  useHandleKeyPress(handleUserKeyPress)
-
-  return ref
-}
-function isWithinCurrentElementScope(
-  elementList: (HTMLInputElement | Element | null)[]
-) {
-  const currentActiveElement = document.activeElement
-  return elementList.includes(currentActiveElement)
-}

apps/scandic-web/package.json

@@ -68,6 +68,7 @@
     "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",

apps/scandic-web/types/components/header/megaMenu.ts

@@ -6,4 +6,5 @@ export interface MegaMenuProps {
   submenu: MenuItem["submenu"]
   card: MenuItem["card"]
   isMobile: boolean
+  isOpen: boolean
 }