Use FormatJS Intl.Collator polyfill to fix missing locales in Chromium (e.g. "se")

package.json

@@ -12,6 +12,7 @@
     "test-accessibility-cli-vocab-search": "npx cypress run --env cli=true --spec 'tests/cypress/accessibility/axe-vocab-search.cy.js'"
   },
   "dependencies": {
+    "@formatjs/intl-collator": "^0.2.2",
     "@fortawesome/fontawesome-free": "^7.2.0",
     "bootstrap": "^5.3.*",
     "vue": "^3.5.25"

resource/js/tab-hierarchy.js

@@ -327,19 +327,12 @@
         strA = strA || a.label || a.prefLabel || a.title || ''
         strB = strB || b.label || b.prefLabel || b.title || ''
 
-        // Set language and options
-        const lang = window.SKOSMOS.content_lang || window.SKOSMOS.lang
-        const options = {
-          numeric: window.SKOSMOS.sortByNotation === 'natural', // Set numeric to true if sort should be natural
-          sensitivity: 'variant' // Strings that differ in base letters, diacritic marks, or case compare as unequal
-        }
-
-        const result = strA.localeCompare(strB, lang, options)
+        const result = this.$collator.compare(strA, strB)
         if (result !== 0) {
           return result
         } else {
           // fall back to non-numeric sort to ensure a consistent order
-          return strA.localeCompare(strB, lang, { sensitivity: 'variant' })
+          return this.$fallbackCollator.compare(strA, strB)
         }
       }
     },
@@ -519,9 +512,42 @@
     `
   })
 
-  if (document.getElementById('tab-hierarchy')) {
-    tabHierApp.mount('#tab-hierarchy')
+  // initialize the collators needed by the app
+  tabHierApp.config.globalProperties.$collator = new Intl.Collator(
+    window.SKOSMOS.content_lang || window.SKOSMOS.lang,
+    {
+      sensitivity: 'variant',
+      numeric: window.SKOSMOS.sortByNotation === 'natural'
+    }
+  )
+  tabHierApp.config.globalProperties.$fallbackCollator = new Intl.Collator(
+    window.SKOSMOS.content_lang || window.SKOSMOS.lang,
+    {
+      sensitivity: 'variant',
+      numeric: false
+    }
+  )
+
+  tabHierApp.mount('#tab-hierarchy')
+}
+
+async function initializeHierarchyApp () {
+  try {
+    await window.getIntlCollatorReady()
+  } catch (e) {
+    console.error('Intl.Collator polyfill failed to load, continuing with native collator:', e)
   }
+
+  startHierarchyApp()
 }
 
-onTranslationReady(startHierarchyApp)
+onTranslationReady(function () {
+  if (document.getElementById('tab-hierarchy')) {
+    if (typeof window.getIntlCollatorReady === 'function') {
+      initializeHierarchyApp()
+    } else {
+      // wait for the polyfill promise to be initialized
+      document.addEventListener('intlCollatorPromiseReady', initializeHierarchyApp)
+    }
+  }
+})

src/view/scripts.inc.twig

@@ -60,6 +60,47 @@ window.SKOSMOS = {
 <!-- Bootstrap -->
 <script src="node_modules/bootstrap/dist/js/bootstrap.bundle.js"></script>
 
+<!-- FormatJS Intl.Collator polyfill for expanded locale support -->
+<script type="importmap">
+  {
+    "imports": {
+      "@formatjs/intl-localematcher": "./node_modules/@formatjs/intl-localematcher/index.js",
+      "@formatjs/fast-memoize": "./node_modules/@formatjs/fast-memoize/index.js"
+    }
+  }
+</script>
+<script type="module">
+  function needsCollatorPolyfill(locale) {
+    try {
+      const supported = Intl.Collator.supportedLocalesOf([locale])
+      return supported.length === 0
+    } catch {
+      return true; // fallback for old browsers
+    }
+  }
+
+  async function ensureCollator(locale) {
+    if (needsCollatorPolyfill(locale)) {
+      await import('./node_modules/@formatjs/intl-collator/polyfill-force.js')
+    }
+  }
+
+  // global Promise for loading the polyfill on-demand
+  let collatorPromise = null
+
+  window.getIntlCollatorReady = function () {
+    if (!collatorPromise) {
+      const locale = window.SKOSMOS.content_lang || window.SKOSMOS.lang
+      collatorPromise = ensureCollator(locale)
+    }
+    return collatorPromise
+  }
+
+  // custom event to signal that the collator promise has been initialized
+  const event = new Event('intlCollatorPromiseReady')
+  document.dispatchEvent(event)
+</script>
+
 <!-- Vue.js -->
 {% if GlobalConfig.uiDevMode %}
 <script src="node_modules/vue/dist/vue.global.js"></script>