Skip to content

Commit

Permalink
Wrap text node to reduce Google Translate bug (#1814)
Browse files Browse the repository at this point in the history 
[It looks like Google Translate doesn't play nicely with React.](https://martijnhols.nl/gists/everything-about-google-translate-crashing-react)
There is [a known issue that Google plans to address](https://issues.chromium.org/issues/41407169)... one day, maybe.
In the short term, it looks like if we wrap text nodes in elements, we should be good to go.

Issue: LEMS-2574

Testing:
Use Google Translate on any radio widget exercise and do something that causes the radio widgets to change state to render a text node (the easiest way was showing rationales). The red bar of doom doesn't show.

Author: nedredmond

Reviewers: benchristel, mark-fitzgerald

Required Reviewers:

Approved By: benchristel, mark-fitzgerald

Checks: ✅ Publish npm snapshot (ubuntu-latest, 20.x), ✅ Cypress (ubuntu-latest, 20.x), ✅ Check builds for changes in size (ubuntu-latest, 20.x), ✅ Lint, Typecheck, Format, and Test (ubuntu-latest, 20.x), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ✅ Publish Storybook to Chromatic (ubuntu-latest, 20.x), ✅ gerald

Pull Request URL: #1814
  • Loading branch information
@nedredmond
nedredmond authored Nov 1, 2024
1 parent 2c40219 commit 035191c
Show file tree
Hide file tree
Showing 5 changed files with 112 additions and 40 deletions.
5 changes: 5 additions & 0 deletions .changeset/rude-spies-doubt.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@khanacademy/perseus": patch
---

Wraps a text node in a `span` to reduce bugs caused by Google Translate
20 changes: 15 additions & 5 deletions packages/perseus/src/multi-items/__tests__/__snapshots__/multi-renderer.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -223,7 +223,9 @@ exports[`multi-item renderer should snapshot: initial render 1`] = `
<div
class="innerWrapper_177sg8x"
>
A
<span>
A
</span>
</div>
</div>
</span>
Expand Down Expand Up @@ -387,7 +389,9 @@ exports[`multi-item renderer should snapshot: initial render 1`] = `
<div
class="innerWrapper_177sg8x"
>
B
<span>
B
</span>
</div>
</div>
</span>
Expand Down Expand Up @@ -551,7 +555,9 @@ exports[`multi-item renderer should snapshot: initial render 1`] = `
<div
class="innerWrapper_177sg8x"
>
C
<span>
C
</span>
</div>
</div>
</span>
Expand Down Expand Up @@ -715,7 +721,9 @@ exports[`multi-item renderer should snapshot: initial render 1`] = `
<div
class="innerWrapper_177sg8x"
>
D
<span>
D
</span>
</div>
</div>
</span>
Expand Down Expand Up @@ -879,7 +887,9 @@ exports[`multi-item renderer should snapshot: initial render 1`] = `
<div
class="innerWrapper_177sg8x"
>
E
<span>
E
</span>
</div>
</div>
</span>
Expand Down
20 changes: 15 additions & 5 deletions packages/perseus/src/widgets/group/__snapshots__/group.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -197,7 +197,9 @@ exports[`group widget should snapshot: initial render 1`] = `
<div
class="innerWrapper_177sg8x"
>
A
<span>
A
</span>
</div>
</div>
</span>
Expand Down Expand Up @@ -309,7 +311,9 @@ exports[`group widget should snapshot: initial render 1`] = `
<div
class="innerWrapper_177sg8x"
>
B
<span>
B
</span>
</div>
</div>
</span>
Expand Down Expand Up @@ -421,7 +425,9 @@ exports[`group widget should snapshot: initial render 1`] = `
<div
class="innerWrapper_177sg8x"
>
C
<span>
C
</span>
</div>
</div>
</span>
Expand Down Expand Up @@ -533,7 +539,9 @@ exports[`group widget should snapshot: initial render 1`] = `
<div
class="innerWrapper_177sg8x"
>
D
<span>
D
</span>
</div>
</div>
</span>
Expand Down Expand Up @@ -645,7 +653,9 @@ exports[`group widget should snapshot: initial render 1`] = `
<div
class="innerWrapper_177sg8x"
>
E
<span>
E
</span>
</div>
</div>
</span>
Expand Down
96 changes: 72 additions & 24 deletions packages/perseus/src/widgets/radio/__tests__/__snapshots__/radio.test.ts.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -132,7 +132,9 @@ exports[`multi-choice question should snapshot the same when invalid: invalid st
<div
class="innerWrapper_177sg8x"
>
A
<span>
A
</span>
</div>
</div>
</span>
Expand Down Expand Up @@ -244,7 +246,9 @@ exports[`multi-choice question should snapshot the same when invalid: invalid st
<div
class="innerWrapper_177sg8x"
>
B
<span>
B
</span>
</div>
</div>
</span>
Expand Down Expand Up @@ -356,7 +360,9 @@ exports[`multi-choice question should snapshot the same when invalid: invalid st
<div
class="innerWrapper_177sg8x"
>
C
<span>
C
</span>
</div>
</div>
</span>
Expand Down Expand Up @@ -459,7 +465,9 @@ exports[`multi-choice question should snapshot the same when invalid: invalid st
<div
class="innerWrapper_177sg8x"
>
D
<span>
D
</span>
</div>
</div>
</span>
Expand Down Expand Up @@ -693,7 +701,9 @@ exports[`single-choice question reviewMode: false should snapshot the same with
<div
class="innerWrapper_177sg8x"
>
A
<span>
A
</span>
</div>
</div>
</span>
Expand Down Expand Up @@ -818,7 +828,9 @@ exports[`single-choice question reviewMode: false should snapshot the same with
<div
class="innerWrapper_177sg8x"
>
B
<span>
B
</span>
</div>
</div>
</span>
Expand Down Expand Up @@ -930,7 +942,9 @@ exports[`single-choice question reviewMode: false should snapshot the same with
<div
class="innerWrapper_177sg8x"
>
C
<span>
C
</span>
</div>
</div>
</span>
Expand Down Expand Up @@ -1045,7 +1059,9 @@ exports[`single-choice question reviewMode: false should snapshot the same with
<div
class="innerWrapper_177sg8x"
>
D
<span>
D
</span>
</div>
</div>
</span>
Expand Down Expand Up @@ -1253,7 +1269,9 @@ exports[`single-choice question reviewMode: false should snapshot the same with
<div
class="innerWrapper_177sg8x"
>
A
<span>
A
</span>
</div>
</div>
</span>
Expand Down Expand Up @@ -1378,7 +1396,9 @@ exports[`single-choice question reviewMode: false should snapshot the same with
<div
class="innerWrapper_177sg8x"
>
B
<span>
B
</span>
</div>
</div>
</span>
Expand Down Expand Up @@ -1490,7 +1510,9 @@ exports[`single-choice question reviewMode: false should snapshot the same with
<div
class="innerWrapper_177sg8x"
>
C
<span>
C
</span>
</div>
</div>
</span>
Expand Down Expand Up @@ -1605,7 +1627,9 @@ exports[`single-choice question reviewMode: false should snapshot the same with
<div
class="innerWrapper_177sg8x"
>
D
<span>
D
</span>
</div>
</div>
</span>
Expand Down Expand Up @@ -1813,7 +1837,9 @@ exports[`single-choice question reviewMode: false should snapshot the same: firs
<div
class="innerWrapper_177sg8x"
>
A
<span>
A
</span>
</div>
</div>
</span>
Expand Down Expand Up @@ -1938,7 +1964,9 @@ exports[`single-choice question reviewMode: false should snapshot the same: firs
<div
class="innerWrapper_177sg8x"
>
B
<span>
B
</span>
</div>
</div>
</span>
Expand Down Expand Up @@ -2050,7 +2078,9 @@ exports[`single-choice question reviewMode: false should snapshot the same: firs
<div
class="innerWrapper_177sg8x"
>
C
<span>
C
</span>
</div>
</div>
</span>
Expand Down Expand Up @@ -2165,7 +2195,9 @@ exports[`single-choice question reviewMode: false should snapshot the same: firs
<div
class="innerWrapper_177sg8x"
>
D
<span>
D
</span>
</div>
</div>
</span>
Expand Down Expand Up @@ -2373,7 +2405,9 @@ exports[`single-choice question reviewMode: true should snapshot the same with c
<div
class="innerWrapper_177sg8x"
>
A
<span>
A
</span>
</div>
</div>
</span>
Expand Down Expand Up @@ -2498,7 +2532,9 @@ exports[`single-choice question reviewMode: true should snapshot the same with c
<div
class="innerWrapper_177sg8x"
>
B
<span>
B
</span>
</div>
</div>
</span>
Expand Down Expand Up @@ -2610,7 +2646,9 @@ exports[`single-choice question reviewMode: true should snapshot the same with c
<div
class="innerWrapper_177sg8x"
>
C
<span>
C
</span>
</div>
</div>
</span>
Expand Down Expand Up @@ -2725,7 +2763,9 @@ exports[`single-choice question reviewMode: true should snapshot the same with c
<div
class="innerWrapper_177sg8x"
>
D
<span>
D
</span>
</div>
</div>
</span>
Expand Down Expand Up @@ -2933,7 +2973,9 @@ exports[`single-choice question reviewMode: true should snapshot the same with i
<div
class="innerWrapper_177sg8x"
>
A
<span>
A
</span>
</div>
</div>
</span>
Expand Down Expand Up @@ -3058,7 +3100,9 @@ exports[`single-choice question reviewMode: true should snapshot the same with i
<div
class="innerWrapper_177sg8x"
>
B
<span>
B
</span>
</div>
</div>
</span>
Expand Down Expand Up @@ -3170,7 +3214,9 @@ exports[`single-choice question reviewMode: true should snapshot the same with i
<div
class="innerWrapper_177sg8x"
>
C
<span>
C
</span>
</div>
</div>
</span>
Expand Down Expand Up @@ -3285,7 +3331,9 @@ exports[`single-choice question reviewMode: true should snapshot the same with i
<div
class="innerWrapper_177sg8x"
>
D
<span>
D
</span>
</div>
</div>
</span>
Expand Down
Loading

0 comments on commit 035191c

Please sign in to comment.