From 34bc8770926b44a0bff88785c71cf1f679255902 Mon Sep 17 00:00:00 2001 From: Erik Tiekstra Date: Mon, 24 Mar 2025 14:12:48 +0000 Subject: [PATCH] feat(SW-1842): Making the language switcher links render in the initial HTML for SEO purposes, should also fix SW-1991 and SW-1742. MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Approved-by: Matilda Landström --- .../MainMenu/MyPagesMenuContent/index.tsx | 6 +- .../NavigationMenu/MegaMenu/index.tsx | 9 +-- .../LanguageSwitcherContent/index.tsx | 55 +++++++------- .../components/LanguageSwitcher/index.tsx | 5 +- apps/scandic-web/package.json | 2 +- yarn.lock | 76 ++++++++++++------- 6 files changed, 83 insertions(+), 70 deletions(-) diff --git a/apps/scandic-web/components/Header/MainMenu/MyPagesMenuContent/index.tsx b/apps/scandic-web/components/Header/MainMenu/MyPagesMenuContent/index.tsx index 8f5f6d696..85d0106b2 100644 --- a/apps/scandic-web/components/Header/MainMenu/MyPagesMenuContent/index.tsx +++ b/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 ( - + - + ) } diff --git a/apps/scandic-web/components/Header/MainMenu/NavigationMenu/MegaMenu/index.tsx b/apps/scandic-web/components/Header/MainMenu/NavigationMenu/MegaMenu/index.tsx index 553d6021d..d9eff0f88 100644 --- a/apps/scandic-web/components/Header/MainMenu/NavigationMenu/MegaMenu/index.tsx +++ b/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 ( - + - + ) } diff --git a/apps/scandic-web/components/LanguageSwitcher/LanguageSwitcherContent/index.tsx b/apps/scandic-web/components/LanguageSwitcher/LanguageSwitcherContent/index.tsx index ee638d506..d4f0ce676 100644 --- a/apps/scandic-web/components/LanguageSwitcher/LanguageSwitcherContent/index.tsx +++ b/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 ( - -
- - {intl.formatMessage({ id: "Select your language" })} - -
    - {urlKeys.map((key) => { - const url = urls[key]?.url - const isActive = currentLanguage === key - if (url) { - return ( -
  • - - {languages[key]} - {isActive ? : null} - -
    • - ) - } - })} -
-
- +
+ + {intl.formatMessage({ id: "Select your language" })} + + +
) } diff --git a/apps/scandic-web/components/LanguageSwitcher/index.tsx b/apps/scandic-web/components/LanguageSwitcher/index.tsx index 4f0d56ded..089a53ee1 100644 --- a/apps/scandic-web/components/LanguageSwitcher/index.tsx +++ b/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) {
- {isLanguageSwitcherOpen ? ( + toggleDropdown(dropdownType)} /> - ) : null} +
) diff --git a/apps/scandic-web/package.json b/apps/scandic-web/package.json index 73e12a4ff..e400eb5d1 100644 --- a/apps/scandic-web/package.json +++ b/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", diff --git a/yarn.lock b/yarn.lock index 33dd1bdda..81174c5c7 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1597,6 +1597,15 @@ __metadata: languageName: node linkType: hard +"@babel/runtime@npm:^7.0.0, @babel/runtime@npm:^7.12.13": + version: 7.26.10 + resolution: "@babel/runtime@npm:7.26.10" + dependencies: + regenerator-runtime: "npm:^0.14.0" + checksum: 10c0/6dc6d88c7908f505c4f7770fb4677dfa61f68f659b943c2be1f2a99cb6680343462867abf2d49822adc435932919b36c77ac60125793e719ea8745f2073d3745 + languageName: node + linkType: hard + "@babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.17.8, @babel/runtime@npm:^7.24.5, @babel/runtime@npm:^7.8.4": version: 7.26.9 resolution: "@babel/runtime@npm:7.26.9" @@ -6282,7 +6291,6 @@ __metadata: eslint-plugin-simple-import-sort: "npm:^12.1.0" fast-deep-equal: "npm:^3.1.3" fetch-retry: "npm:^6.0.0" - focus-trap-react: "npm:^11.0.3" framer-motion: "npm:^11.3.28" graphql: "npm:^16.8.1" graphql-request: "npm:^6.1.0" @@ -6309,6 +6317,7 @@ __metadata: react-day-picker: "npm:^9.0.8" react-dom: "npm:^18" react-feather: "npm:^2.0.10" + react-focus-lock: "npm:^2.13.6" react-hook-form: "npm:^7.51.2" react-international-phone: "npm:^4.2.6" react-intl: "npm:^6.6.8" @@ -12497,27 +12506,12 @@ __metadata: languageName: node linkType: hard -"focus-trap-react@npm:^11.0.3": - version: 11.0.3 - resolution: "focus-trap-react@npm:11.0.3" +"focus-lock@npm:^1.3.6": + version: 1.3.6 + resolution: "focus-lock@npm:1.3.6" 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 + tslib: "npm:^2.0.3" + checksum: 10c0/9fc9aee762d9fc41a339cbee328b6fa9d8fdaea545aac10c7ce77358ba7800c47918a583613174d059dedc909d7a6ddd550895caf3449ca995bd66644368ec8f languageName: node linkType: hard @@ -17723,7 +17717,7 @@ __metadata: languageName: node linkType: hard -"prop-types@npm:^15.7.2, prop-types@npm:^15.8.1": +"prop-types@npm:^15.6.2, prop-types@npm:^15.7.2, prop-types@npm:^15.8.1": version: 15.8.1 resolution: "prop-types@npm:15.8.1" dependencies: @@ -18024,6 +18018,17 @@ __metadata: languageName: node linkType: hard +"react-clientside-effect@npm:^1.2.7": + version: 1.2.7 + resolution: "react-clientside-effect@npm:1.2.7" + dependencies: + "@babel/runtime": "npm:^7.12.13" + peerDependencies: + react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc + checksum: 10c0/8d50ef578daa6bfbd970c85a22bf3179a8b237dfad2abffd866241c3fea9d0e1996bc016dca9fe616da4bfe39484836901a70230ac924671ed1fb8ee6ec40e71 + languageName: node + linkType: hard + "react-day-picker@npm:^9.0.8": version: 9.5.1 resolution: "react-day-picker@npm:9.5.1" @@ -18098,6 +18103,26 @@ __metadata: languageName: node linkType: hard +"react-focus-lock@npm:^2.13.6": + version: 2.13.6 + resolution: "react-focus-lock@npm:2.13.6" + dependencies: + "@babel/runtime": "npm:^7.0.0" + focus-lock: "npm:^1.3.6" + prop-types: "npm:^15.6.2" + react-clientside-effect: "npm:^1.2.7" + use-callback-ref: "npm:^1.3.3" + use-sidecar: "npm:^1.1.3" + peerDependencies: + "@types/react": "*" + react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc + peerDependenciesMeta: + "@types/react": + optional: true + checksum: 10c0/5a3e92fb0025042ab613c54b8ff0aa6c3a45a4d4785c51c024758b02ff83a89295b458ba609c48d11f1c6bbcab6a6b032c5c17d1f3d168a2835cbbec3dea6a46 + languageName: node + linkType: hard + "react-hook-form@npm:^7.51.2": version: 7.54.2 resolution: "react-hook-form@npm:7.54.2" @@ -20112,13 +20137,6 @@ __metadata: languageName: node 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": version: 1.0.2 resolution: "table-layout@npm:1.0.2"