♿ Add accessibility for darkmode

Co-authored-by: Lucas Stoebner <stoebnerl@gmail.com>

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' })`

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>

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 (

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

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