Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[Interactive Graph] Stop the Mafs graphs from being user selectable (#…
…1523) ## Summary: Currently, graphs can be selected and copied when the user drag-selects them. We don't want this to be the case. It causes a bunch of graph information to be awkwardly copied, such as the background image or all the axis tick labels. Here, I'm adding `user-select: none` to the Mafs graph to stop this behavior. NOTE: This works perfectly in Safari and Firefox, but there is a known bug in Chrome that makes it so that the drag-selected element (which does successfully look non-selected) still gets copied to the clipboard. As this is a browser-specific issue, I did not try to fix it here. I think there might be a super roundabout way to to this, like blocking mouse events on specific parts of the graph, but I'm not sure that's worth it for a behavior like this that's out of our control. Issue: https://khanacademy.atlassian.net/browse/LEMS-2151 ## Test plan: Storybook - For tick labels - http://localhost:6006/?path=/story/perseus-widgets-interactive-graph--segment-with-mafs-and-locked-points - For background image - http://localhost:6006/?path=/story/perseus-widgets-interactive-graph--angle-with-mafs - Try to copy the graph (start dragging from any text above it to make it easier) - Paste into a notes app. Confirm that the graph info doesn't paste. (Except in Chrome) ## Recordings: ### Before https://github.com/user-attachments/assets/0baced92-e0b5-4df3-9198-2e8ae6439370 ### After https://github.com/user-attachments/assets/92c55f1e-2e91-4c43-b97f-9852317c0576 Author: nishasy Reviewers: benchristel, Myranae, jeremywiebe, mark-fitzgerald Required Reviewers: Approved By: benchristel Checks: ✅ codecov/project, ✅ codecov/patch, ✅ gerald, ✅ Upload Coverage (ubuntu-latest, 20.x), ⏭️ Publish npm snapshot, ✅ Lint, Typecheck, Format, and Test (ubuntu-latest, 20.x), ✅ Cypress (ubuntu-latest, 20.x), ✅ Jest Coverage (ubuntu-latest, 20.x), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ✅ Check builds for changes in size (ubuntu-latest, 20.x), 🚫 Upload Coverage, ✅ gerald, ⏭️ Publish npm snapshot, 🚫 Jest Coverage (ubuntu-latest, 20.x), 🚫 Check builds for changes in size (ubuntu-latest, 20.x), 🚫 Check for .changeset entries for all changed files (ubuntu-latest, 20.x), 🚫 Lint, Typecheck, Format, and Test (ubuntu-latest, 20.x), ✅ Publish Storybook to Chromatic (ubuntu-latest, 20.x), 🚫 Cypress (ubuntu-latest, 20.x), ✅ gerald Pull Request URL: #1523
- Loading branch information