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

Ovgodd · Ovgodd · commit 4c84518da1d1 · 2025-07-31T14:57:57.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/CHANGELOG.md b/CHANGELOG.md
@@ -22,7 +22,9 @@ and this project adheres to
 - ♻️(frontend) redirect to doc after duplicate #1175
 - 🔧(project) change env.d system by using local files #1200
 - ⚡️(frontend) improve tree stability #1207
-- ⚡️(frontend) improve accessibility #1232
+- ⚡️(frontend) improve accessibility
+  - #1232
+  - #1248
 - 🛂(frontend) block drag n drop when not desktop #1239
 
 ### Fixed
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/i18n/config.ts b/src/frontend/apps/impress/src/i18n/config.ts
@@ -0,0 +1 @@
+export const fallbackLng = 'en';
diff --git a/src/frontend/apps/impress/src/i18n/initI18n.ts b/src/frontend/apps/impress/src/i18n/initI18n.ts
@@ -2,6 +2,7 @@ import i18next from 'i18next';
 import LanguageDetector from 'i18next-browser-languagedetector';
 import { initReactI18next } from 'react-i18next';
 
+import { fallbackLng } from './config';
 import resources from './translations.json';
 
 // Add an initialization guard
@@ -16,7 +17,7 @@ if (!isInitialized && !i18next.isInitialized) {
     .use(initReactI18next)
     .init({
       resources,
-      fallbackLng: 'en',
+      fallbackLng,
       debug: false,
       detection: {
         order: ['cookie', 'navigator'],
@@ -35,6 +36,17 @@ if (!isInitialized && !i18next.isInitialized) {
       nsSeparator: false,
       keySeparator: false,
     })
+    .then(() => {
+      if (typeof document !== 'undefined') {
+        document.documentElement.setAttribute(
+          'lang',
+          i18next.language || fallbackLng,
+        );
+        i18next.on('languageChanged', (lang) => {
+          document.documentElement.setAttribute('lang', lang);
+        });
+      }
+    })
     .catch((e) => console.error('i18n initialization failed:', e));
 }
 
diff --git a/src/frontend/apps/impress/src/pages/_document.tsx b/src/frontend/apps/impress/src/pages/_document.tsx
@@ -1,13 +1,33 @@
-import { 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>
-  );
+import Document, {
+  DocumentContext,
+  Head,
+  Html,
+  Main,
+  NextScript,
+} from 'next/document';
+
+import { fallbackLng } from '../i18n/config';
+
+class MyDocument extends Document<{ locale: string }> {
+  static async getInitialProps(ctx: DocumentContext) {
+    const initialProps = await Document.getInitialProps(ctx);
+    return {
+      ...initialProps,
+      locale: ctx.locale || fallbackLng,
+    };
+  }
+
+  render() {
+    return (
+      <Html lang={this.props.locale}>
+        <Head />
+        <body>
+          <Main />
+          <NextScript />
+        </body>
+      </Html>
+    );
+  }
 }
+
+export default MyDocument;
