Fix Expressive Code UI labels (#2334)

3 files changed, 21 insertions, 2 deletions

diff --git a/.changeset/perfect-crews-train.md b/.changeset/perfect-crews-train.md
new file mode 100644
index 00000000..7b08b021
--- /dev/null
+++ b/.changeset/perfect-crews-train.md
@@ -0,0 +1,5 @@
+---
+'@astrojs/starlight': patch
+---
+
+Fixes an issue with Expressive Code UI labels not displaying correctly.
diff --git a/packages/starlight/__tests__/i18n/translations-ec.test.ts b/packages/starlight/__tests__/i18n/translations-ec.test.ts
index fd240aae..58b34842 100644
--- a/packages/starlight/__tests__/i18n/translations-ec.test.ts
+++ b/packages/starlight/__tests__/i18n/translations-ec.test.ts
@@ -97,6 +97,20 @@ test('add translations in a multilingual site with french as default locale', as
 	expect(getExpressiveCodeOverridenLanguages()).toEqual(['fr', 'ru']);
 });
 
+test('does not add translations if the label does not exist', async () => {
+	const [config] = getStarlightConfigAndUseTranslations(undefined);
+
+	addTranslations(config, getUseTranslations(false));
+
+	expect(vi.mocked(pluginFramesTexts.overrideTexts)).not.toHaveBeenCalled();
+});
+
+function getUseTranslations(exists: boolean = true) {
+	const t = () => 'test UI string';
+	t.exists = vi.fn().mockReturnValue(exists);
+	return vi.fn().mockReturnValue(t);
+}
+
 function getStarlightConfigAndUseTranslations(
 	locales: StarlightUserConfig['locales'],
 	defaultLocale?: StarlightUserConfig['defaultLocale']
@@ -107,7 +121,7 @@ function getStarlightConfigAndUseTranslations(
 			locales,
 			defaultLocale,
 		}),
-		vi.fn().mockReturnValue(() => 'test UI string'),
+		getUseTranslations(),
 	] as const;
 }
 
diff --git a/packages/starlight/integrations/expressive-code/translations.ts b/packages/starlight/integrations/expressive-code/translations.ts
index 7aa5a4a1..82590008 100644
--- a/packages/starlight/integrations/expressive-code/translations.ts
+++ b/packages/starlight/integrations/expressive-code/translations.ts
@@ -29,7 +29,7 @@ function addTranslationsForLocale(
 		'expressiveCode.terminalWindowFallbackTitle',
 	] as const;
 	translationKeys.forEach((key) => {
-		const translation = t(key);
+		const translation = t.exists(key) ? t(key) : undefined;
 		if (!translation) return;
 		const ecId = key.replace(/^expressiveCode\./, '');
 		pluginFramesTexts.overrideTexts(lang, { [ecId]: translation });