From 4a409243fe320316425e59d66cc0ee794fb35918 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?F=C3=A9lix=20Legrelle?= <legrelle.f@gmail.com>
Date: Wed, 26 Oct 2022 10:56:01 +0200
Subject: [PATCH] :wheelchair: Add accessibility for darkmode

Co-authored-by: Lucas Stoebner <stoebnerl@gmail.com>
---
 site/source/components/Logo.tsx          |  7 ++-----
 site/source/components/layout/Header.tsx | 14 ++++++++++++--
 site/source/contexts/DarkModeContext.tsx |  5 +++--
 site/source/locales/ui-en.yaml           |  5 +++++
 site/source/locales/ui-fr.yaml           |  5 +++++
 5 files changed, 27 insertions(+), 9 deletions(-)

diff --git a/site/source/components/Logo.tsx b/site/source/components/Logo.tsx
index 0b10d1404..3f60f90ab 100644
--- a/site/source/components/Logo.tsx
+++ b/site/source/components/Logo.tsx
@@ -8,13 +8,10 @@ import styled from 'styled-components'
 export function Logo() {
 	const {
 		i18n: { language },
+		t
 	} = useTranslation()
 
-	return language === 'fr' ? (
-		<StyledLogo alt="Logo Mon-entreprise, site Urssaf" src={logoSvgFR} />
-	) : (
-		<StyledLogo alt="Logo My company in France by Urssaf" src={logoSvgEN} />
-	)
+	return <StyledLogo alt={t("navbar.logo")} src={language === 'fr' ?logoSvgFR:logoSvgEN} />
 }
 
 const StyledLogo = styled.img.attrs({ 'data-test-id': 'logo img' })`
diff --git a/site/source/components/layout/Header.tsx b/site/source/components/layout/Header.tsx
index 227ad8528..43c985c0f 100644
--- a/site/source/components/layout/Header.tsx
+++ b/site/source/components/layout/Header.tsx
@@ -9,6 +9,7 @@ import styled from 'styled-components'
 import NewsBanner from './NewsBanner'
 import { Switch } from '@/design-system/switch'
 import { useDarkMode } from '@/hooks/useDarkMode'
+import Emoji from '@/components/utils/Emoji'
 
 export default function Header() {
 	const { absoluteSitePaths } = useSitePaths()
@@ -36,8 +37,17 @@ export default function Header() {
 							flex: 1;
 						`}
 					/>
-					<Switch defaultSelected={darkMode} onChange={setDarkMode} />
-
+					<Emoji emoji="☀️" aria-hidden />
+					<Switch
+						defaultSelected={darkMode}
+						onChange={setDarkMode}
+						aria-label={t(
+							darkMode
+								? 'navbar.deactivate-darkmode'
+								: 'navbar.activate-darkmode'
+						)}
+					/>
+					<Emoji emoji="🌙" aria-hidden />
 					{language === 'fr' && <SearchButton />}
 				</StyledHeader>
 				<BrowserOnly>{language === 'fr' && <NewsBanner />}</BrowserOnly>
diff --git a/site/source/contexts/DarkModeContext.tsx b/site/source/contexts/DarkModeContext.tsx
index e87cba603..6e485dd69 100644
--- a/site/source/contexts/DarkModeContext.tsx
+++ b/site/source/contexts/DarkModeContext.tsx
@@ -15,8 +15,9 @@ export const DarkModeContext = React.createContext<DarkModeContextType>({
 
 export const DarkModeProvider: React.FC = ({ children }) => {
 	const [darkMode, setDarkMode] = React.useState<boolean>(
-		window.matchMedia &&
-			window.matchMedia('(prefers-color-scheme: dark)').matches
+		import.meta.env.DEV && typeof window !== 'undefined' ?
+			(window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) :
+			false
 	)
 
 	return (
diff --git a/site/source/locales/ui-en.yaml b/site/source/locales/ui-en.yaml
index 4e2ee1429..f963ae6f3 100644
--- a/site/source/locales/ui-en.yaml
+++ b/site/source/locales/ui-en.yaml
@@ -1089,6 +1089,11 @@ mensuel: monthly
 mois: month
 montant à atteindre: minimum value
 multiplicateur: multiplier
+navbar:
+  logo: Logo My company in France by Urssaf
+  redirect-home: Go to home page
+  activate-darkmode: Activate dark mode
+  deactivate-darkmode: Deactivate dark mode
 nextSteps:
   integration-iframe:
     body: Discover how to add this simulator on your website in one click via a
diff --git a/site/source/locales/ui-fr.yaml b/site/source/locales/ui-fr.yaml
index c3d4eb27e..e1e33ce7c 100644
--- a/site/source/locales/ui-fr.yaml
+++ b/site/source/locales/ui-fr.yaml
@@ -849,6 +849,11 @@ listeformejuridique:
 loading: Chargement en cours...
 mensuel: mensuel
 mois: mois
+navbar:
+  logo: Logo Mon-entreprise, site Urssaf
+  redirect-home: Accéder à la page d'accueil
+  activate-darkmode: Activer le mode sombre
+  deactivate-darkmode: Désactiver le mode sombre
 nextSteps:
   integration-iframe:
     body: Decouvrez comment ajouter ce simulateur sur votre site internet en un clic