[Translator] Handle W3 locale format on document element

aleho · aleho · commit df7c424ed7b8 · 2024-11-20T10:38:25.000+01:00
According to W3[1] (and RFC1766) the valid format for language codes is "primary-code"-"subcode", but Symfony expects underscores as separator, resulting in broken translations. This changes language codes specified in the correct format for HTML to the Symfony format when reading the "lang" attribute. Fixes #2378 [1] https://www.w3.org/TR/html401/struct/dirlang.html#h-8.1.1
diff --git a/src/Translator/assets/dist/translator_controller.js b/src/Translator/assets/dist/translator_controller.js
@@ -227,7 +227,7 @@ function setLocale(locale) {
 function getLocale() {
     return (_locale ||
         document.documentElement.getAttribute('data-symfony-ux-translator-locale') ||
-        document.documentElement.lang ||
+        (document.documentElement.lang ? document.documentElement.lang.replace('-', '_') : null) ||
         'en');
 }
 function throwWhenNotFound(enabled) {
diff --git a/src/Translator/assets/src/translator.ts b/src/Translator/assets/src/translator.ts
@@ -47,8 +47,8 @@ export function setLocale(locale: LocaleType | null) {
 export function getLocale(): LocaleType {
     return (
         _locale ||
-        document.documentElement.getAttribute('data-symfony-ux-translator-locale') || // <html data-symfony-ux-translator-locale="en">
-        document.documentElement.lang || // <html lang="en">
+        document.documentElement.getAttribute('data-symfony-ux-translator-locale') || // <html data-symfony-ux-translator-locale="en_US">
+        (document.documentElement.lang ? document.documentElement.lang.replace('-', '_') : null) || // <html lang="en-US">
         'en'
     );
 }
diff --git a/src/Translator/assets/test/translator.test.ts b/src/Translator/assets/test/translator.test.ts
@@ -35,6 +35,18 @@ describe('Translator', () => {
         });
     });
 
+    describe('getLocale', () => {
+        test('with subcode', () => {
+            // allow format according to W3
+            document.documentElement.lang = 'de-AT';
+            expect(getLocale()).toEqual('de_AT');
+
+            // or "incorrect" Symfony locale format
+            document.documentElement.lang = 'de_AT';
+            expect(getLocale()).toEqual('de_AT');
+        });
+    });
+
     describe('setLocale', () => {
         test('custom locale', () => {
             setLocale('fr');
diff --git a/src/Translator/doc/index.rst b/src/Translator/doc/index.rst
@@ -90,9 +90,9 @@ Configuring the default locale
 
 By default, the default locale is ``en`` (English) that you can configure through many ways (in order of priority):
 
-#. With ``setLocale('your-locale')`` from ``@symfony/ux-translator`` package
-#. Or with ``<html data-symfony-ux-translator-locale="your-locale">`` attribute
-#. Or with ``<html lang="your-locale">`` attribute
+#. With ``setLocale('de')`` or ``setLocale('de_AT')`` from ``@symfony/ux-translator`` package
+#. Or with ``<html data-symfony-ux-translator-locale="{{ app.request.locale }}">`` attribute (e.g., `de_AT` or `de` for Symfony locale format)
+#. Or with ``<html lang="{{ app.request.locale|replace({ '_': '-' }) }}">`` attribute (e.g., `de-AT` or `de` for W3C spec compliant format)
 
 Detecting missing translations
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Original file line number	Diff line number	Diff line change
`@@ -227,7 +227,7 @@ function setLocale(locale) {`
`227`	`227`	`function getLocale() {`
`228`	`228`	`return (_locale \|\|`
`229`	`229`	`document.documentElement.getAttribute('data-symfony-ux-translator-locale') \|\|`
`230`		`- document.documentElement.lang \|\|`
	`230`	`+ (document.documentElement.lang ? document.documentElement.lang.replace('-', '_') : null) \|\|`
`231`	`231`	`'en');`
`232`	`232`	`}`
`233`	`233`	`function throwWhenNotFound(enabled) {`