All user-facing text must be wrapped with translation functions instead of using hardcoded English strings. This includes regular UI text, accessibility attributes (aria-label, title, alt), and screen reader announcements. Using translation keys creates a consistent, maintainable internationalization system and ensures the application is accessible to users...
All user-facing text must be wrapped with translation functions instead of using hardcoded English strings. This includes regular UI text, accessibility attributes (aria-label, title, alt), and screen reader announcements. Using translation keys creates a consistent, maintainable internationalization system and ensures the application is accessible to users in all supported languages.
When using translation functions:
// Incorrect
<h2 className="text-lg font-bold">Something went wrong</h2>
<button title="Add reaction" aria-label="Collapse command management section">
{screenReaderAnnouncement}
</button>
// Correct
<h2 className="text-lg font-bold">{t("errorBoundary.title")}</h2>
<button
title={t("emojiReactions.add")}
aria-label={t("chat:commandExecution.collapseManagement")}>
{t("chat:screenReader.announcement")}
</button>
For string interpolation, use translation parameters rather than concatenating strings:
// Incorrect
<span>{`File: ${selectedOption.value}, ${selectedMenuIndex + 1} of ${options.length}`}</span>
// Correct
<span>
{t("chat:contextMenu.announceFile", {
name: selectedOption.value,
position: t("chat:contextMenu.position", {
current: selectedMenuIndex + 1,
total: options.length
})
})}
</span>
Enter the URL of a public GitHub repository