i18n-sweep

i18n sweep

Two failure modes: strings that were never wrapped, and strings that were wrapped in a way translators can't work with. The second is more expensive because it looks done.

Untranslated strings

Scan for user-visible literals in JSX text, and in these props: title, label, placeholder, aria-label, alt, description, helpText, tooltip, emptyMessage, confirmButtonText, cancelButtonText, plus toast and error messages surfaced to the UI.

Not findings: data-test-subj, className, ids, route paths, log messages, dev-only errors, and anything behind an internal flag no user sees.

Defects that break translation

Concatenation. Word order differs by language, so assembled sentences can't be translated.

// Broken
<>{count} {count === 1 ? 'item' : 'items'} found</>

// Correct: one message, pluralisation inside it
i18n.translate('xpack.myPlugin.itemsFound', {
  defaultMessage: '{count, plural, one {# item} other {# items}} found',
  values: { count },
})

Pluralisation by ternary. Many languages have more than two plural forms. Use ICU plural, always.

Gender or list interpolation built with string joins rather than ICU select and a list formatter.

Dates, numbers, currency formatted by hand. Use Intl or the framework's formatter so locale conventions apply.

Missing values for a message with placeholders, or a placeholder name that doesn't match the message.

Reused message id with different copy, or the same copy duplicated under two ids. Both create translation drift.

Unstable id built at runtime (`xpack.p.${key}`). The extractor can't find it, so it never gets translated.

JSX inside a plain i18n.translate. Use FormattedMessage when the message embeds markup, so translators see one coherent string with tags.

No context for an ambiguous word. "Open" is a verb and an adjective. Add a description so the translator knows which.

House conventions

• Ids: stable, namespaced, camelCase: myApp.featureArea.descriptiveName.
• Hoist to a SCREAMING_SNAKE module const when the message is used more than once or would bloat the JSX.
• Shared copy for a component folder goes in a colocated translations.ts.
• FormattedMessage only when the message contains JSX; i18n.translate otherwise.