Corrige le fonctionnement des liens d'évitement sur les pages autres que Landing (#2403)

* fix: Utilise <a>

* Revert "fix: Utilise <a>"

This reverts commit 872a90e039.

* fix: Utilise url complète

* fix: Ajoute rustine

* chore: Ajoute commentaire

site/source/App.tsx

@@ -20,9 +20,8 @@ import { useIsEmbedded } from '@/components/utils/useIsEmbedded'
 import { Container, Spacing } from '@/design-system/layout'
 
 import Provider, { ProviderProps } from './Provider'
-import { Link } from './design-system/typography/link'
 import { useAxeCoreAnalysis } from './hooks/useAxeCoreAnalysis'
-import { useGetFullPath } from './hooks/useGetFullPath'
+import { useGetFullURL } from './hooks/useGetFullURL'
 import { useSaveAndRestoreScrollPosition } from './hooks/useSaveAndRestoreScrollPosition'
 import Accessibilité from './pages/Accessibilité'
 import Budget from './pages/Budget/Budget'
@@ -99,7 +98,7 @@ const App = () => {
 
 	const { t } = useTranslation()
 
-	const fullPath = useGetFullPath()
+	const fullURL = useGetFullURL()
 
 	useSaveAndRestoreScrollPosition()
 	const isEmbedded = useIsEmbedded()
@@ -113,9 +112,9 @@ const App = () => {
 	return (
 		<StyledLayout isEmbedded={isEmbedded}>
 			{!isEmbedded && <Header />}
-			<Link href={`${fullPath}#footer`} className="skip-link print-hidden">
+			<a href={`${fullURL}#footer`} className="skip-link print-hidden">
 				{t('Passer le contenu')}
-			</Link>
+			</a>
 			<main role="main" id="main">
 				<Container>
 					<ErrorBoundary fallback={CatchOffline}>

site/source/components/layout/Header.tsx

@@ -9,7 +9,7 @@ import { Container } from '@/design-system/layout'
 import { Switch } from '@/design-system/switch'
 import { Link } from '@/design-system/typography/link'
 import { useDarkMode } from '@/hooks/useDarkMode'
-import { useGetFullPath } from '@/hooks/useGetFullPath'
+import { useGetFullURL } from '@/hooks/useGetFullURL'
 import { useSitePaths } from '@/sitePaths'
 
 import NewsBanner from './NewsBanner'
@@ -17,7 +17,7 @@ import NewsBanner from './NewsBanner'
 export default function Header() {
 	const { absoluteSitePaths } = useSitePaths()
 
-	const fullPath = useGetFullPath()
+	const fullURL = useGetFullURL()
 
 	const {
 		i18n: { language },
@@ -28,9 +28,9 @@ export default function Header() {
 
 	return (
 		<header role="banner">
-			<Link href={`${fullPath}#main`} className="skip-link">
+			<a href={`${fullURL}#main`} className="skip-link print-hidden">
 				{t('Aller au contenu')}
-			</Link>
+			</a>
 			<Container>
 				<StyledHeader role="banner">
 					<Link

site/source/design-system/global-style.ts

@@ -146,6 +146,8 @@ button:enabled {
 	margin: 0;
 	overflow: hidden;
 	clip: rect(1px, 1px, 1px, 1px);
+	font-family: 'Roboto';
+	font-weight: bold;
 }
 
 .skip-link:focus {

site/source/hooks/useGetFullPath.ts

@@ -1,20 +0,0 @@
-import { useTranslation } from 'react-i18next'
-import { useLocation } from 'react-router-dom'
-
-import { isDevelopment } from './../utils'
-
-const DEVELOPMENT_BASE_PATHS = {
-	fr: '/mon-entreprise',
-	en: '/infrance',
-}
-
-export const useGetFullPath = () => {
-	const { i18n } = useTranslation()
-	const { pathname } = useLocation()
-
-	const language = i18n.language as 'fr' | 'en'
-
-	const pathStart = isDevelopment() ? DEVELOPMENT_BASE_PATHS[language] : '/'
-
-	return `${pathStart}${pathname !== '/' ? pathname : ''}`
-}

site/source/hooks/useGetFullURL.ts

@@ -0,0 +1,27 @@
+import { useEffect, useRef } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useLocation } from 'react-router-dom'
+
+import { isDevelopment } from '../utils'
+
+const DEVELOPMENT_BASE_PATHS = {
+	fr: '/mon-entreprise',
+	en: '/infrance',
+}
+
+export const useGetFullURL = () => {
+	const { i18n } = useTranslation()
+	const { pathname } = useLocation()
+
+	const language = i18n.language as 'fr' | 'en'
+
+	const pathStart = isDevelopment() ? DEVELOPMENT_BASE_PATHS[language] : ''
+
+	// Rustine : permet d'utiliser window en SSR
+	const originRef = useRef('')
+	useEffect(() => {
+		originRef.current = window?.location?.origin || ''
+	}, [])
+
+	return `${originRef.current}${pathStart}${pathname !== '/' ? pathname : ''}`
+}

site/source/pages/Landing/Landing.tsx

@@ -10,7 +10,7 @@ import { Container, Grid, Spacing } from '@/design-system/layout'
 import { H2 } from '@/design-system/typography/heading'
 import { Link } from '@/design-system/typography/link'
 import { Body, Intro } from '@/design-system/typography/paragraphs'
-import { useGetFullPath } from '@/hooks/useGetFullPath'
+import { useGetFullURL } from '@/hooks/useGetFullURL'
 import { useSitePaths } from '@/sitePaths'
 
 import { TrackPage } from '../../ATInternetTracking'
@@ -25,7 +25,7 @@ export default function Landing() {
 	const { absoluteSitePaths } = useSitePaths()
 	const { t } = useTranslation()
 
-	const fullPath = useGetFullPath()
+	const fullURL = useGetFullURL()
 
 	return (
 		<>
@@ -37,9 +37,9 @@ export default function Landing() {
 				ogImage="/logo-share.png"
 			/>
 			<Header />
-			<Link href={`${fullPath}#footer`} className="skip-link print-hidden">
+			<a href={`${fullURL}#footer`} className="skip-link print-hidden">
 				{t('Passer le contenu')}
-			</Link>
+			</a>
 			<main role="main" id="main">
 				<Container>
 					<PageHeader