Fix RangeError from HTTP quality values in navigator.languages

What does this MR do and why?

Fixes a RangeError: Invalid language tag: en;q=0.9 thrown by Intl.DateTimeFormat when navigator.languages contains HTTP Accept-Language quality values (e.g. en;q=0.9) instead of plain BCP 47 language tags.

The getPreferredLocales() function in locale/index.js passes navigator.languages entries directly to Intl.DateTimeFormat. The spec says navigator.languages should contain BCP 47 tags, but some browser environments (observed in Chrome 145) include quality-value suffixes like ;q=0.9. These are not valid BCP 47 and cause Intl.DateTimeFormat to throw a RangeError, breaking date formatting across all pages — most visibly in time_ago_tooltip.vue tooltips.

The fix strips everything from the first semicolon in each locale string before using it, converting en;q=0.9 to en and en-US;q=1.0 to en-US.

Closes https://gitlab.com/gitlab-org/gitlab/-/work_items/625056

References

Screenshots or screen recordings

N/A — logic-only fix, no UI change.

How to set up and validate locally

  1. Open browser DevTools console on any GitLab page with a TimeAgoTooltip (e.g. any issue list).
  2. Override navigator.languages to include quality values:
    Object.defineProperty(navigator, 'languages', { get: () => ['en;q=0.9'] });
  3. Hover over a relative timestamp — before this fix a RangeError is thrown; after the fix the tooltip renders correctly.

MR acceptance checklist

Evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

Merge request reports

Loading
Loading