🎨 Implémentation du remaniement de `<Footer />` (#2435)

* feat: Modifie le footer et les boutons de changement de langue

* fix: Se base sur language

* fix: Précise id radio

* fix: A11Y issue + improve spacings

* fix: E2E test

* fix: Unit test

site/cypress/integration/mon-entreprise/english/navigation.ts

@@ -7,7 +7,9 @@ describe('General navigation', function () {
 		cy.visit(
 			fr ? encodeURI('/créer/auto-entrepreneur') : '/create/auto-entrepreneur'
 		)
-		cy.contains(fr ? 'Switch to English' : 'Passer en français').click()
+		cy.get(
+			fr ? '[data-test-id=en-switch-button]' : '[data-test-id=fr-switch-button]'
+		).click()
 		cy.url().should(
 			'include',
 			fr ? '/create/auto-entrepreneur' : encodeURI('/créer/auto-entrepreneur')

site/cypress/integration/mon-entreprise/simulateur-ae.ts

@@ -15,7 +15,7 @@ describe('Simulateur auto-entrepreneur', { testIsolation: 'off' }, function () {
 		cy.get(inputSelector).first().type('{selectall}50000')
 		cy.contains('button', 'Passer').click()
 		cy.contains('button', 'Passer').click()
-		cy.contains('Début 2022').click()
+		cy.contains('Début 2023').click()
 		cy.contains('ACRE')
 	})
 

site/source/components/conversation/ChoicesInput.tsx

@@ -216,7 +216,10 @@ function RadioChoice<Names extends string = DottedName>({
 									rootDottedName,
 									node.dottedName
 								)}'`}
-								id={`radio-input-${node.dottedName.replace(/\s|\./g, '')}`}
+								id={`radio-input-${node.dottedName.replace(
+									/\s|\./g,
+									''
+								)}-${rootDottedName.replace(/\s|\./g, '')}`}
 							>
 								{node.title}{' '}
 								{node.rawNode.icônes && <Emoji emoji={node.rawNode.icônes} />}

site/source/components/layout/Footer/Footer.tsx

@@ -1,13 +1,14 @@
 import { Helmet } from 'react-helmet-async'
 import { Trans, useTranslation } from 'react-i18next'
-import { ThemeProvider } from 'styled-components'
+import styled, { ThemeProvider } from 'styled-components'
 
 import PageFeedback from '@/components/Feedback'
 import LegalNotice from '@/components/LegalNotice'
+import { Button } from '@/design-system/buttons'
 import { Emoji } from '@/design-system/emoji'
 import { FooterContainer } from '@/design-system/footer'
 import { FooterColumn } from '@/design-system/footer/column'
-import { Container } from '@/design-system/layout'
+import { Container, Grid, Spacing } from '@/design-system/layout'
 import { Link } from '@/design-system/typography/link'
 import { Body } from '@/design-system/typography/paragraphs'
 import { alternateLinks, useSitePaths } from '@/sitePaths'
@@ -34,7 +35,10 @@ export default function Footer() {
 		currentEnv === 'production'
 			? (encodedUri || '').replace(/\/$/, '')
 			: encodedUri || ''
-	const hrefLink = hrefLangLink[language][uri]
+	const hrefLink =
+		hrefLangLink[language][uri] ?? hrefLangLink[language][uri + '/']
+
+	const isFrenchMode = language === 'fr'
 
 	return (
 		<>
@@ -87,85 +91,102 @@ export default function Footer() {
 						>
 							<FooterColumn>
 								{language === 'fr' && (
-									<nav title="firstColumnNav">
+									<nav title="Première colonne du menu">
 										<ul>
-											<li>
+											<StyledLi>
 												<Link to={absoluteSitePaths.plan} noUnderline>
-													<Trans>Plan du site</Trans>
+													<Trans>Plan du site</Trans> <Emoji emoji="🧭" />
 												</Link>
-											</li>
-											<li>
+											</StyledLi>
+											<StyledLi>
 												<Link to={absoluteSitePaths.nouveautés} noUnderline>
 													Nouveautés <Emoji emoji="✨" />
 												</Link>
-											</li>
-											<li>
-												<Link to={absoluteSitePaths.stats} noUnderline>
-													Stats <Emoji emoji="📊" />
-												</Link>
-											</li>
-											<li>
+											</StyledLi>
+											<StyledLi>
 												<Link to={absoluteSitePaths.budget} noUnderline>
-													Budget <Emoji emoji="💶" />
+													Budget <Emoji emoji="🔦" />
 												</Link>
-											</li>
+											</StyledLi>
+											<StyledLi>
+												<Link to={absoluteSitePaths.stats} noUnderline>
+													Statistiques <Emoji emoji="📊" />
+												</Link>
+											</StyledLi>
 										</ul>
 									</nav>
 								)}
 							</FooterColumn>
 							<FooterColumn>
-								<nav title="secondColumnNav">
+								<nav title="Deuxième colonne du menu">
 									<ul>
-										<li>
+										<StyledLi>
 											<Link
 												to={absoluteSitePaths.développeur.index}
 												noUnderline
 											>
-												<Trans>Intégrer nos simulateurs</Trans>
+												<Trans>Intégrer nos simulateurs</Trans>{' '}
+												<Emoji emoji="📥" />
 											</Link>
-										</li>
+										</StyledLi>
 										{language === 'fr' && (
-											<li>
-												<InscriptionBetaTesteur />
-											</li>
+											<StyledLi>
+												<InscriptionBetaTesteur /> <Emoji emoji="💌" />
+											</StyledLi>
 										)}
 										{hrefLink && (
-											<li key={hrefLink.hrefLang}>
-												<Link
-													href={hrefLink.href}
-													openInSameWindow
-													lang={hrefLink.hrefLang === 'en' ? 'en' : 'fr'}
-													noUnderline
-												>
-													{hrefLink.hrefLang === 'fr' ? (
-														<>
-															Passer en français <Emoji emoji="🇫🇷" />
-														</>
-													) : hrefLink.hrefLang === 'en' ? (
-														<>
-															Switch to English <Emoji emoji="🇬🇧" />
-														</>
-													) : (
-														hrefLink.hrefLang
-													)}
-												</Link>
-											</li>
+											<StyledLi key={hrefLink.hrefLang}>
+												<Grid container spacing={2}>
+													<Grid item>
+														<StyledButton
+															openInSameWindow
+															href={hrefLink.href}
+															aria-disabled={isFrenchMode}
+															aria-label={t(
+																isFrenchMode
+																	? 'Version française du site activée.'
+																	: 'Passer à la version française du site'
+															)}
+															lang="fr"
+															data-test-id="fr-switch-button"
+														>
+															FR <Emoji emoji="🇫🇷" />
+														</StyledButton>
+													</Grid>
+													<Grid item>
+														<StyledButton
+															href={hrefLink.href}
+															openInSameWindow
+															lang="en"
+															aria-disabled={!isFrenchMode}
+															aria-label={t(
+																!isFrenchMode
+																	? 'English version of the website enabled.'
+																	: 'Switch to the english version of the website'
+															)}
+															data-test-id="en-switch-button"
+														>
+															EN <Emoji emoji="🇬🇧" />
+														</StyledButton>
+													</Grid>
+												</Grid>
+											</StyledLi>
 										)}
 									</ul>
 								</nav>
 							</FooterColumn>
 
 							<FooterColumn>
-								<nav title="thirdColumnNav">
+								<nav title="Troisième colonne du menu">
 									<ul>
-										<li>
+										<StyledLi>
 											<LegalNotice />
-										</li>
-										<li>
+										</StyledLi>
+										<StyledLi>
 											<Privacy />
-										</li>
+										</StyledLi>
 										{language === 'fr' && (
-											<li>
+											<StyledLi>
 												<Link
 													to={absoluteSitePaths.accessibilité}
 													aria-label={t(
@@ -178,7 +199,7 @@ export default function Footer() {
 														Accessibilité : non conforme
 													</Trans>
 												</Link>
-											</li>
+											</StyledLi>
 										)}
 									</ul>
 								</nav>
@@ -190,3 +211,17 @@ export default function Footer() {
 		</>
 	)
 }
+
+const StyledButton = styled(Button)`
+	padding: 10px 16px 10px 16px;
+	border-radius: 4px;
+
+	&[aria-disabled='true'] {
+		background-color: ${({ theme }) => theme.colors.bases.primary[300]};
+		pointer-events: none;
+	}
+`
+
+const StyledLi = styled.li`
+	margin-top: ${({ theme }) => theme.spacings.sm};
+`

site/source/design-system/buttons/Button.tsx

@@ -18,6 +18,8 @@ type ButtonProps = GenericButtonOrNavLinkProps & {
 	size?: Size
 	light?: boolean
 	role?: string
+	['aria-disabled']?: boolean
+	lang?: string
 }
 
 export const Button = forwardRef(function Button(
@@ -27,6 +29,7 @@ export const Button = forwardRef(function Button(
 		color = 'primary' as const,
 		isDisabled,
 		role,
+		lang,
 		...ariaButtonProps
 	}: ButtonProps,
 	forwardedRef: ForwardedRef<HTMLAnchorElement | HTMLButtonElement | null>
@@ -44,6 +47,8 @@ export const Button = forwardRef(function Button(
 			$color={color}
 			$isDisabled={isDisabled}
 			role={role}
+			aria-disabled={ariaButtonProps?.['aria-disabled']}
+			lang={lang}
 		/>
 	)
 })

site/source/pages/Landing/SearchOrCreate.tsx

@@ -50,9 +50,11 @@ export default function SearchOrCreate() {
 									to={generatePath(absoluteSitePaths.gérer.entreprise, {
 										entreprise: companySIREN as string,
 									})}
-									aria-label="Voir ma situation, accéder à la page de gestion de mon entreprise"
+									aria-label={t(
+										'Voir ma situation, accéder à la page de gestion de mon entreprise'
+									)}
 								>
-									Voir ma situation
+									{t('Voir ma situation')}
 								</Button>
 								<PopoverConfirm
 									trigger={(buttonProps) => (
@@ -61,7 +63,7 @@ export default function SearchOrCreate() {
 											aria-label={t('Réinitialiser la situation enregistrée')}
 											{...buttonProps}
 										>
-											Réinitialiser
+											{t('Réinitialiser')}
 										</Button>
 									)}
 									onConfirm={() => dispatch(resetCompany())}