Focus movable points when you click on them

[benchristel]

We want this behavior so you can click to select a point on a point graph with
unlimited points, and then press backspace to delete it.

Issue: https://khanacademy.atlassian.net/browse/LEMS-2204

Test plan:

View:
http://localhost:6006/?path=/story/perseuseditor-widgets-interactive-graph--interactive-graph-point

Clicking on a point should focus it (the focus ring should appear and you
should be able to move the point with the keyboard)

[khan-actions-bot]

Gerald

Required Reviewers

• @Khan/perseus for changes to .changeset/chilled-brooms-begin.md, packages/perseus/src/widgets/interactive-graphs/mafs-styles.css, packages/perseus/src/widgets/interactive-graphs/graphs/components/movable-point-view.tsx, packages/perseus/src/widgets/interactive-graphs/graphs/components/movable-point.test.tsx, packages/perseus/src/widgets/interactive-graphs/graphs/components/movable-point.tsx

---

Don't want to be involved in this pull request? Comment #removeme and we won't notify you of further changes.

[github-actions]

Size Change: +118 B (+0.01%)

Total Size: 860 kB

Filename	Size	Change
packages/perseus/dist/es/index.js	418 kB	+118 B (+0.03%)

ℹ️ View Unchanged

Filename	Size
packages/kas/dist/es/index.js	38.3 kB
packages/keypad-context/dist/es/index.js	760 B
packages/kmath/dist/es/index.js	4.27 kB
packages/math-input/dist/es/index.js	78 kB
packages/math-input/dist/es/strings.js	1.79 kB
packages/perseus-core/dist/es/index.js	1.48 kB
packages/perseus-editor/dist/es/index.js	277 kB
packages/perseus-linter/dist/es/index.js	22.2 kB
packages/perseus/dist/es/strings.js	3.36 kB
packages/pure-markdown/dist/es/index.js	3.66 kB
packages/simple-markdown/dist/es/index.js	12.4 kB

_{compressed-size-action}

[codecov]

Codecov Report

Attention: Patch coverage is 92.85714% with 2 lines in your changes missing coverage. Please review.

Project coverage is 70.76%. Comparing base (21a908e) to head (cab6cd0).
Report is 5 commits behind head on main.

Files with missing lines	Patch %	Lines
...ve-graphs/graphs/components/movable-point-view.tsx	90.90%	2 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #1572      +/-   ##
==========================================
+ Coverage   70.34%   70.76%   +0.42%     
==========================================
  Files         521      524       +3     
  Lines      107316   107371      +55     
  Branches     5513    10999    +5486     
==========================================
+ Hits        75489    75985     +496     
+ Misses      31711    31386     -325     
+ Partials      116        0     -116     

Files with missing lines	Coverage Δ
...ractive-graphs/graphs/components/movable-point.tsx	100.00% <100.00%> (ø)
...ve-graphs/graphs/components/movable-point-view.tsx	94.08% <90.90%> (-0.59%)	⬇️

... and 128 files with indirect coverage changes

---

Continue to review full report in Codecov by Sentry.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 40d0b67...cab6cd0. Read the comment docs.

[nicolecomputer]

Why did this change?

[benchristel]

This change is necessary to make the focus ring appear when you click a movable point. It seems like elements that are focused programmatically get the :focus pseudoclass but not the :focus-visible pseudoclass. At least, this is true for SVG elements in Edge.

[github-actions]

npm Snapshot: Published

Good news!! We've packaged up the latest commit from this PR (cab6cd0) and published it to npm. You
can install it using the tag PR1572.

Example:

yarn add @khanacademy/perseus@PR1572

If you are working in Khan Academy's webapp, you can run:

./dev/tools/bump_perseus_version.sh -t PR1572