made sure that the i18n does use `navigator.languages` instead of `navigator.language` for automatic language detection (#4244)

src/i18n.js

@@ -57,10 +57,16 @@ for (let lang in languageList) {
 
 const rtlLangs = [ "fa", "ar-SY", "ur" ];
 
-export const currentLocale = () => localStorage.locale
-    || languageList[navigator.language] && navigator.language
-    || languageList[navigator.language.substring(0, 2)] && navigator.language.substring(0, 2)
-    || "en";
+/**
+ * Find the best matching locale to display
+ * If no locale can be matched, the default is "en"
+ * @returns {string} the locale that should be displayed
+ */
+export function currentLocale() {
+    const potentialLocales = [ localStorage.locale, navigator.language, navigator.language.substring(0, 2), ...navigator.languages ];
+    const availableLocales = potentialLocales.filter(l => languageList[l]);
+    return availableLocales[0] || "en";
+}
 
 export const localeDirection = () => {
     return rtlLangs.includes(currentLocale()) ? "rtl" : "ltr";

test/cypress/unit/i18n.spec.js

@@ -4,9 +4,13 @@ describe("Test i18n.js", () => {
 
     it("currentLocale()", () => {
         const setLanguage = (language) => {
-            Object.defineProperty(window.navigator, 'language', { 
-                value: language, 
-                writable: true 
+            Object.defineProperty(window.navigator, 'language', {
+                value: language,
+                writable: true
+            });
+            Object.defineProperty(window.navigator, 'languages', {
+                value: [language],
+                writable: true
             });
         }
         setLanguage('en-EN');
@@ -41,4 +45,4 @@ describe("Test i18n.js", () => {
         expect(currentLocale()).equal("zh-HK");
     });
 
-});
+});