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

[Ovgodd]

Purpose

Add a new HtmlLangUpdater component to dynamically update the attribute based on the current locale from i18next. This improves accessibility.

issue : 875

Proposal

• Create HtmlLangUpdater component using useTranslation and useEffect
• Integrate HtmlLangUpdater in the main app and document.tsx layout

Enregistrement.2025-07-31.113009.mp4

External contributions

Thank you for your contribution! 🎉

Please ensure the following items are checked before submitting your pull request:

• I have read and followed the contributing guidelines
• I have read and agreed to the Code of Conduct
• I have signed off my commits with git commit --signoff (DCO compliance)
• I have signed my commits with my SSH or GPG key (git commit -S)
• My commit messages follow the required format: <gitmoji>(type) title description
• I have added a changelog entry under ## [Unreleased] section (if noticeable change)
• I have added corresponding tests for new features or bug fixes (if applicable)

[AntoLC]

Work well !

Instead of HtmlLangUpdater we should leverage directly i18next i think.

Here we init i18next: https://github.com/suitenumerique/docs/blob/main/src/frontend/apps/impress/src/i18n/initI18n.ts

We could add a listener, wdyt ?

// Set initial lang attribute
document.documentElement.setAttribute(
    'lang',
    i18next.language || fallbackLng,
);

// Listen for language changes and update the lang attribute
i18next.on('languageChanged', (lang) => {
    document.documentElement.setAttribute('lang', lang);
});

[AntoLC]

Nice!

Last thing, can you add an assert in this test to check that the lang attribute switch correctly ?

docs/src/frontend/apps/e2e/__tests__/app-impress/language.spec.ts

Lines 26 to 27 in cde061c

	test('checks language switching', async ({ page }) => {
	const header = page.locator('header').first();

[Ovgodd]

Last thing, can you add an assert in this test to check that the lang attribute switch correctly ?

Of course, that makes sense. I’ve added assert for en, fr, and deutsch, since all three languages are covered in the test.

[AntoLC]

Nice, thank you!