[lab][LoadingButton] Prevent React crash with Google Translate #42552
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
aarongarciah
added
package: lab
aarongarciah
changed the title
Netlify deploy previewBundle size reportDetails of bundle changes (Toolpad) |
aarongarciah
force-pushed
the
loading-button-wrap-contents
branch
from
521f813 to
4856247
Compare
|
Closing this to continue in the original PR: #35198 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Resolves #27853. Based on a previous attempt #35198.
Original PR description:
Use case summary:
Using the LoadingButton while have Google translation (chrome feature) active on your site.
Problem: Google modifies the button contents and React can't figure out its bindings anymore. Causes crash 💥
How to reproduce:
https://codesandbox.io/s/dry-water-eig2e7?file=/demo.tsx
Steps:
Additional description:
I introduced two changes from the original PR:
<span>instead of a<div>to wrapchildren.display: contents.Regarding number 2,
display: contentssuffered from deep accessibility issues, the most important one causing elements with the property applied to be removed from the accessibility tree. Most of these issues have been solved over the years, but it's still unclear if it's 100% reliable, especially on Safari. I'm wary of using this property if we're not 100% sure about it'll have the expected behavior. Let me know your thoughts. Some literature about the topic: