[Translator] Handle W3 locale format on document element

aleho · aleho · commit 3e4e76b3971a · 2024-11-20T10:28:03.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
@@ -91,8 +91,8 @@ 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
+#. Or with ``<html data-symfony-ux-translator-locale="your-locale">`` attribute (e.g., `en_US`)
+#. Or with ``<html lang="your-locale">`` attribute (e.g., `en-US`)
 
 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) {`