⚡️(frontend) set html lang attribute dynamically based on current loc

Ovgodd · Ovgodd · commit e1b4609c3f50 · 2025-07-31T11:24:14.000+02:00
ensures proper language tag is set for accessibility and SEO compliance

Signed-off-by: Cyril &lt;c.gromoff@gmail.com&gt;
diff --git a/src/frontend/apps/impress/src/components/HtmlLangUpdater.tsx b/src/frontend/apps/impress/src/components/HtmlLangUpdater.tsx
@@ -0,0 +1,13 @@
+import { useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+
+export function HtmlLangUpdater() {
+  const { i18n } = useTranslation();
+
+  useEffect(() => {
+    const lang = i18n.language?.split('-')[0] || 'fr';
+    document.documentElement.setAttribute('lang', lang);
+  }, [i18n.language]);
+
+  return null;
+}
diff --git a/src/frontend/apps/impress/src/pages/_app.tsx b/src/frontend/apps/impress/src/pages/_app.tsx
@@ -2,6 +2,7 @@ import type { AppProps } from 'next/app';
 import Head from 'next/head';
 import { useTranslation } from 'react-i18next';
 
+import { HtmlLangUpdater } from '@/components/HtmlLangUpdater';
 import { AppProvider } from '@/core/';
 import { useCunninghamTheme } from '@/cunningham';
 import { useOffline, useSWRegister } from '@/features/service-worker/';
@@ -49,6 +50,7 @@ export default function App({ Component, pageProps }: AppPropsWithLayout) {
         />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
       </Head>
+      <HtmlLangUpdater />
       <AppProvider>{getLayout(<Component {...pageProps} />)}</AppProvider>
     </>
   );
diff --git a/src/frontend/apps/impress/src/pages/_document.tsx b/src/frontend/apps/impress/src/pages/_document.tsx
@@ -1,13 +1,31 @@
-import { Head, Html, Main, NextScript } from 'next/document';
+import Document, {
+  DocumentContext,
+  Head,
+  Html,
+  Main,
+  NextScript,
+} from 'next/document';
 
-export default function RootLayout() {
-  return (
-    <Html>
-      <Head />
-      <body suppressHydrationWarning={process.env.NODE_ENV === 'development'}>
-        <Main />
-        <NextScript />
-      </body>
-    </Html>
-  );
+class MyDocument extends Document<{ locale: string }> {
+  static async getInitialProps(ctx: DocumentContext) {
+    const initialProps = await Document.getInitialProps(ctx);
+    return {
+      ...initialProps,
+      locale: ctx.locale || 'fr',
+    };
+  }
+
+  render() {
+    return (
+      <Html lang={this.props.locale}>
+        <Head />
+        <body>
+          <Main />
+          <NextScript />
+        </body>
+      </Html>
+    );
+  }
 }
+
+export default MyDocument;
