scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

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


Approved-by: Fredrik Thorsson
This commit is contained in:
Erik Tiekstra
2025-03-12 15:16:06 +00:00
parent 689e9d72cb
commit d50cf829e6
9 changed files with 197 additions and 235 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

@@ -1,5 +1,7 @@
"use client" "use client"
import { FocusTrap } from "focus-trap-react"
import useDropdownStore from "@/stores/main-menu" import useDropdownStore from "@/stores/main-menu"
import { ArrowRightIcon, ChevronLeftIcon } from "@/components/Icons" import { ArrowRightIcon, ChevronLeftIcon } from "@/components/Icons"
@@ -7,7 +9,6 @@ import Card from "@/components/TempDesignSystem/Card"
import Link from "@/components/TempDesignSystem/Link" import Link from "@/components/TempDesignSystem/Link"
import Caption from "@/components/TempDesignSystem/Text/Caption" import Caption from "@/components/TempDesignSystem/Text/Caption"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle" import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
import { useTrapFocus } from "@/hooks/useTrapFocus"
import styles from "./megaMenu.module.css" import styles from "./megaMenu.module.css"
@@ -20,10 +21,10 @@ export default function MegaMenu({
seeAllLink, seeAllLink,
submenu, submenu,
card, card,
isOpen,
}: MegaMenuProps) { }: MegaMenuProps) {
const { toggleMegaMenu, toggleDropdown, isHamburgerMenuOpen } = const { toggleMegaMenu, toggleDropdown, isHamburgerMenuOpen } =
useDropdownStore() useDropdownStore()
const megaMenuRef = useTrapFocus()
function handleNavigate() { function handleNavigate() {
toggleMegaMenu(false) toggleMegaMenu(false)
@@ -33,89 +34,94 @@ export default function MegaMenu({
} }
return ( return (
<nav className={styles.megaMenu}> <FocusTrap
{isMobile ? ( active={isOpen}
<div className={styles.backWrapper}> focusTrapOptions={{ clickOutsideDeactivates: true }}
<button >
type="button" <nav className={`${styles.megaMenu} ${isOpen ? styles.active : ""}`}>
className={styles.backButton} {isMobile ? (
onClick={() => toggleMegaMenu(false)} <div className={styles.backWrapper}>
> <button
<ChevronLeftIcon color="red" height={20} width={20} /> type="button"
<Subtitle type="one" color="burgundy" asChild> className={styles.backButton}
<span>{title}</span> onClick={() => toggleMegaMenu(false)}
</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}
> >
{seeAllLink.title} <ChevronLeftIcon color="red" height={20} width={20} />
<ArrowRightIcon color="burgundy" /> <Subtitle type="one" color="burgundy" asChild>
</Link> <span>{title}</span>
) : null} </Subtitle>
</div> </button>
<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> </div>
) : null} ) : null}
</div> <div className={styles.megaMenuContent}>
</nav> <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>
) )
} }

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

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

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

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

59
apps/scandic-web/components/LanguageSwitcher/LanguageSwitcherContent/index.tsx
View File

@@ -1,5 +1,6 @@
"use client" "use client"
import { FocusTrap } from "focus-trap-react"
import { usePathname } from "next/navigation" import { usePathname } from "next/navigation"
import { useIntl } from "react-intl" import { useIntl } from "react-intl"
@@ -9,7 +10,6 @@ import { CheckIcon } from "@/components/Icons"
import Link from "@/components/TempDesignSystem/Link" import Link from "@/components/TempDesignSystem/Link"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle" import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
import useLang from "@/hooks/useLang" import useLang from "@/hooks/useLang"
import { useTrapFocus } from "@/hooks/useTrapFocus"
import { replaceUrlPart } from "./utils" import { replaceUrlPart } from "./utils"
@@ -24,39 +24,40 @@ export default function LanguageSwitcherContent({
const intl = useIntl() const intl = useIntl()
const currentLanguage = useLang() const currentLanguage = useLang()
const languageSwitcherRef = useTrapFocus()
const urlKeys = Object.keys(urls) as Lang[] const urlKeys = Object.keys(urls) as Lang[]
const pathname = usePathname() const pathname = usePathname()
return ( return (
<div className={styles.languageSwitcherContent} ref={languageSwitcherRef}> <FocusTrap focusTrapOptions={{ clickOutsideDeactivates: true }}>
<div className={styles.languageWrapper}> <div className={styles.languageSwitcherContent}>
<Subtitle className={styles.subtitle} type="two"> <div className={styles.languageWrapper}>
{intl.formatMessage({ id: "Select your language" })} <Subtitle className={styles.subtitle} type="two">
</Subtitle> {intl.formatMessage({ id: "Select your language" })}
<ul className={styles.list}> </Subtitle>
{urlKeys.map((key) => { <ul className={styles.list}>
const url = urls[key]?.url {urlKeys.map((key) => {
const isActive = currentLanguage === key const url = urls[key]?.url
if (url) { const isActive = currentLanguage === key
return ( if (url) {
<li key={key}> return (
<Link <li key={key}>
className={`${styles.link} ${isActive ? styles.active : ""}`} <Link
href={replaceUrlPart(pathname, url)} className={`${styles.link} ${isActive ? styles.active : ""}`}
onClick={onLanguageSwitch} href={replaceUrlPart(pathname, url)}
keepSearchParams onClick={onLanguageSwitch}
> keepSearchParams
{languages[key]} >
{isActive ? <CheckIcon color="burgundy" /> : null} {languages[key]}
</Link> {isActive ? <CheckIcon color="burgundy" /> : null}
</li> </Link>
) </li>
} )
})} }
</ul> })}
</ul>
</div>
</div> </div>
</div> </FocusTrap>
) )
} }

83
apps/scandic-web/hooks/useTrapFocus.ts
View File

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

1
apps/scandic-web/package.json
View File

@@ -68,6 +68,7 @@
"embla-carousel-react": "^8.5.2", "embla-carousel-react": "^8.5.2",
"fast-deep-equal": "^3.1.3", "fast-deep-equal": "^3.1.3",
"fetch-retry": "^6.0.0", "fetch-retry": "^6.0.0",
"focus-trap-react": "^11.0.3",
"framer-motion": "^11.3.28", "framer-motion": "^11.3.28",
"graphql": "^16.8.1", "graphql": "^16.8.1",
"graphql-request": "^6.1.0", "graphql-request": "^6.1.0",

1
apps/scandic-web/types/components/header/megaMenu.ts
View File

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

32
yarn.lock
View File

@@ -6117,6 +6117,7 @@ __metadata:
eslint-plugin-simple-import-sort: "npm:^12.1.0" eslint-plugin-simple-import-sort: "npm:^12.1.0"
fast-deep-equal: "npm:^3.1.3" fast-deep-equal: "npm:^3.1.3"
fetch-retry: "npm:^6.0.0" fetch-retry: "npm:^6.0.0"
focus-trap-react: "npm:^11.0.3"
framer-motion: "npm:^11.3.28" framer-motion: "npm:^11.3.28"
graphql: "npm:^16.8.1" graphql: "npm:^16.8.1"
graphql-request: "npm:^6.1.0" graphql-request: "npm:^6.1.0"
@@ -12190,6 +12191,30 @@ __metadata:
languageName: node languageName: node
linkType: hard linkType: hard
"focus-trap-react@npm:^11.0.3":
version: 11.0.3
resolution: "focus-trap-react@npm:11.0.3"
dependencies:
focus-trap: "npm:^7.6.4"
tabbable: "npm:^6.2.0"
peerDependencies:
"@types/react": ^18.0.0 || ^19.0.0
"@types/react-dom": ^18.0.0 || ^19.0.0
react: ^18.0.0 || ^19.0.0
react-dom: ^18.0.0 || ^19.0.0
checksum: 10c0/5a4829720901e32ef8cb0783a91e06262e079ab4a0537ffa21d866b1b70d6d383a4ee14baa19e84d952a304b4b08814a1c1fbdb2307d79a2995977735376ae45
languageName: node
linkType: hard
"focus-trap@npm:^7.6.4":
version: 7.6.4
resolution: "focus-trap@npm:7.6.4"
dependencies:
tabbable: "npm:^6.2.0"
checksum: 10c0/ed810d47fd904a5e0269e822d98e634c6cbdd7222046c712ef299bdd26a422db754e3cec04e6517065b12be4b47f65c21f6244e0c07a308b1060985463d518cb
languageName: node
linkType: hard
"follow-redirects@npm:^1.15.6": "follow-redirects@npm:^1.15.6":
version: 1.15.9 version: 1.15.9
resolution: "follow-redirects@npm:1.15.9" resolution: "follow-redirects@npm:1.15.9"
@@ -19533,6 +19558,13 @@ __metadata:
languageName: node languageName: node
linkType: hard linkType: hard
"tabbable@npm:^6.2.0":
version: 6.2.0
resolution: "tabbable@npm:6.2.0"
checksum: 10c0/ced8b38f05f2de62cd46836d77c2646c42b8c9713f5bd265daf0e78ff5ac73d3ba48a7ca45f348bafeef29b23da7187c72250742d37627883ef89cbd7fa76898
languageName: node
linkType: hard
"table-layout@npm:^1.0.2, table-layout@npm:~1.0.0": "table-layout@npm:^1.0.2, table-layout@npm:~1.0.0":
version: 1.0.2 version: 1.0.2
resolution: "table-layout@npm:1.0.2" resolution: "table-layout@npm:1.0.2"