diff --git a/.changeset/rude-spies-doubt.md b/.changeset/rude-spies-doubt.md
new file mode 100644
index 0000000000..33c267fb7a
--- /dev/null
+++ b/.changeset/rude-spies-doubt.md
@@ -0,0 +1,5 @@
+---
+"@khanacademy/perseus": patch
+---
+
+Wraps a text node in a `span` to reduce bugs caused by Google Translate
diff --git a/packages/perseus/src/multi-items/__tests__/__snapshots__/multi-renderer.test.tsx.snap b/packages/perseus/src/multi-items/__tests__/__snapshots__/multi-renderer.test.tsx.snap
index d21c6d8c1e..078e779ff6 100644
--- a/packages/perseus/src/multi-items/__tests__/__snapshots__/multi-renderer.test.tsx.snap
+++ b/packages/perseus/src/multi-items/__tests__/__snapshots__/multi-renderer.test.tsx.snap
@@ -223,7 +223,9 @@ exports[`multi-item renderer should snapshot: initial render 1`] = `
- A
+
+ A
+
@@ -387,7 +389,9 @@ exports[`multi-item renderer should snapshot: initial render 1`] = `
- B
+
+ B
+
@@ -551,7 +555,9 @@ exports[`multi-item renderer should snapshot: initial render 1`] = `
- C
+
+ C
+
@@ -715,7 +721,9 @@ exports[`multi-item renderer should snapshot: initial render 1`] = `
- D
+
+ D
+
@@ -879,7 +887,9 @@ exports[`multi-item renderer should snapshot: initial render 1`] = `
- E
+
+ E
+
diff --git a/packages/perseus/src/widgets/group/__snapshots__/group.test.tsx.snap b/packages/perseus/src/widgets/group/__snapshots__/group.test.tsx.snap
index 4ee90f354c..828a6ab9b6 100644
--- a/packages/perseus/src/widgets/group/__snapshots__/group.test.tsx.snap
+++ b/packages/perseus/src/widgets/group/__snapshots__/group.test.tsx.snap
@@ -197,7 +197,9 @@ exports[`group widget should snapshot: initial render 1`] = `
- A
+
+ A
+
@@ -309,7 +311,9 @@ exports[`group widget should snapshot: initial render 1`] = `
- B
+
+ B
+
@@ -421,7 +425,9 @@ exports[`group widget should snapshot: initial render 1`] = `
- C
+
+ C
+
@@ -533,7 +539,9 @@ exports[`group widget should snapshot: initial render 1`] = `
- D
+
+ D
+
@@ -645,7 +653,9 @@ exports[`group widget should snapshot: initial render 1`] = `
- E
+
+ E
+
diff --git a/packages/perseus/src/widgets/radio/__tests__/__snapshots__/radio.test.ts.snap b/packages/perseus/src/widgets/radio/__tests__/__snapshots__/radio.test.ts.snap
index 4487f3ba68..3aa1b49f93 100644
--- a/packages/perseus/src/widgets/radio/__tests__/__snapshots__/radio.test.ts.snap
+++ b/packages/perseus/src/widgets/radio/__tests__/__snapshots__/radio.test.ts.snap
@@ -132,7 +132,9 @@ exports[`multi-choice question should snapshot the same when invalid: invalid st
- A
+
+ A
+
@@ -244,7 +246,9 @@ exports[`multi-choice question should snapshot the same when invalid: invalid st
- B
+
+ B
+
@@ -356,7 +360,9 @@ exports[`multi-choice question should snapshot the same when invalid: invalid st
- C
+
+ C
+
@@ -459,7 +465,9 @@ exports[`multi-choice question should snapshot the same when invalid: invalid st
- D
+
+ D
+
@@ -693,7 +701,9 @@ exports[`single-choice question reviewMode: false should snapshot the same with
- A
+
+ A
+
@@ -818,7 +828,9 @@ exports[`single-choice question reviewMode: false should snapshot the same with
- B
+
+ B
+
@@ -930,7 +942,9 @@ exports[`single-choice question reviewMode: false should snapshot the same with
- C
+
+ C
+
@@ -1045,7 +1059,9 @@ exports[`single-choice question reviewMode: false should snapshot the same with
- D
+
+ D
+
@@ -1253,7 +1269,9 @@ exports[`single-choice question reviewMode: false should snapshot the same with
- A
+
+ A
+
@@ -1378,7 +1396,9 @@ exports[`single-choice question reviewMode: false should snapshot the same with
- B
+
+ B
+
@@ -1490,7 +1510,9 @@ exports[`single-choice question reviewMode: false should snapshot the same with
- C
+
+ C
+
@@ -1605,7 +1627,9 @@ exports[`single-choice question reviewMode: false should snapshot the same with
- D
+
+ D
+
@@ -1813,7 +1837,9 @@ exports[`single-choice question reviewMode: false should snapshot the same: firs
- A
+
+ A
+
@@ -1938,7 +1964,9 @@ exports[`single-choice question reviewMode: false should snapshot the same: firs
- B
+
+ B
+
@@ -2050,7 +2078,9 @@ exports[`single-choice question reviewMode: false should snapshot the same: firs
- C
+
+ C
+
@@ -2165,7 +2195,9 @@ exports[`single-choice question reviewMode: false should snapshot the same: firs
- D
+
+ D
+
@@ -2373,7 +2405,9 @@ exports[`single-choice question reviewMode: true should snapshot the same with c
- A
+
+ A
+
@@ -2498,7 +2532,9 @@ exports[`single-choice question reviewMode: true should snapshot the same with c
- B
+
+ B
+
@@ -2610,7 +2646,9 @@ exports[`single-choice question reviewMode: true should snapshot the same with c
- C
+
+ C
+
@@ -2725,7 +2763,9 @@ exports[`single-choice question reviewMode: true should snapshot the same with c
- D
+
+ D
+
@@ -2933,7 +2973,9 @@ exports[`single-choice question reviewMode: true should snapshot the same with i
- A
+
+ A
+
@@ -3058,7 +3100,9 @@ exports[`single-choice question reviewMode: true should snapshot the same with i
- B
+
+ B
+
@@ -3170,7 +3214,9 @@ exports[`single-choice question reviewMode: true should snapshot the same with i
- C
+
+ C
+
@@ -3285,7 +3331,9 @@ exports[`single-choice question reviewMode: true should snapshot the same with i
- D
+
+ D
+
diff --git a/packages/perseus/src/widgets/radio/choice-icon/choice-icon.tsx b/packages/perseus/src/widgets/radio/choice-icon/choice-icon.tsx
index 1a241d2908..5f5e004090 100644
--- a/packages/perseus/src/widgets/radio/choice-icon/choice-icon.tsx
+++ b/packages/perseus/src/widgets/radio/choice-icon/choice-icon.tsx
@@ -41,7 +41,7 @@ function ChoiceInner(props: ChoiceInnerProps) {
const letter = getChoiceLetter(pos, strings);
if (!showCorrectness) {
- return letter;
+ return {letter};
}
if (correct) {
return (
@@ -68,14 +68,14 @@ function getDynamicStyles(
multipleSelect: boolean,
correct?: boolean | null,
): {
- backgroundColor: string | null | undefined;
+ backgroundColor: string | undefined;
borderColor: string;
color: string;
borderRadius: number;
} {
- let backgroundColor;
- let borderColor;
- let color;
+ let backgroundColor: string | undefined;
+ let borderColor: string;
+ let color: string;
if (!showCorrectness && pressed) {
borderColor = WBColor.blue;
color = WBColor.blue;
@@ -131,7 +131,6 @@ const ChoiceIcon = function (props: ChoiceIconProps): React.ReactElement {
multipleSelect={multipleSelect}
>
'.
style={dynamicStyles}
data-testid="choice-icon__library-choice-icon"
className={css(