[ Interactive Graph | Vector Graph ] PR3: Rendering & Accessibility by SonicScrewdriver · Pull Request #3441 · Khan/perseus

SonicScrewdriver · 2026-03-31T23:41:41Z

Summary

This PR was created with the help of AI, albeit with heavy oversight and review.

This is part of a series of PRs implementing the vector graph type for the Interactive Graph widget:

PR1 – type definitions and schema
PR2 – state management
▶️ PR3 – rendering & accessibility (this PR)
PR4 – scoring
PR5 – editor support

Issue: LEMS-3971

Added the visual rendering component and screen reader support for the vector graph type
Extracted a shared PillDragHandle component from the asymptote-specific drag handle, now reused by both vector and exponential/logarithm graphs
The graph is now fully visible and interactive for learners — a directed line segment with an arrowhead at the tip, a draggable tip point, and a pill-shaped grab handle on the body for whole-vector translation. This replaces the "Not implemented" stubs from PR 1.

Changes:

New files:

graphs/vector.tsx — Rendering component composed from low-level primitives:
- Body grab handle — useDraggable on a <g> element with transparent hit target, visible line with rounded caps (thickens on hover/focus/drag via CSS class .movable-vector-line), extension line to arrowhead, and a PillDragHandle at 1/3 along the line.
- Tip point — useControlPoint hook providing draggable dot with keyboard constraint that prevents overlap with the tail.
- Arrowhead — rendered last in SVG order (on top of tip dot), positioned 1.5 grid steps past the tip along the vector direction with fixed strokeWidth={2}.
- Grab handle blurs on drag end (onDragEnd) to prevent lingering focus ring. aria-live="polite" for screen reader announcements.
graphs/vector.test.tsx — 10 tests: 5 SR label tests, 2 describeVectorGraph tests, 3 getVectorTipKeyboardConstraint tests.
graphs/components/pill-drag-handle.tsx — Shared pill-shaped drag handle extracted from the former AsymptoteDragHandle. Supports arbitrary rotation angles via rotation prop. Used by vector (rotated to match vector angle) and asymptote (0° or 90°).
graphs/components/pill-drag-handle.test.tsx — 6 tests covering grip dots, focus ring, rotation, and default state.

Modified files:

graphs/components/movable-asymptote.tsx — Now imports PillDragHandle directly instead of the deleted AsymptoteDragHandle wrapper.
strings.ts — Four SR strings: srVectorGraph, srVectorPoints, srVectorTipPoint, srVectorGrabHandle.
mafs-graph.tsx — Replaced stub with renderVectorGraph() dispatch.
interactive-graph.tsx — Replaced stub with getVectorEquationString() showing component form ⟨dx, dy⟩.
mafs-styles.css — Added .movable-vector-line (stroke color, weight, rounded caps) and .pill-drag-handle-* classes. Removed old .movable-asymptote-handle-* classes.
interactive-graph.stories.tsx — Added Vector Storybook story.

Deleted files:

graphs/components/asymptote-drag-handle.tsx — Replaced by PillDragHandle used directly in MovableAsymptote.

Design decisions:

Shared PillDragHandle — Extracted from the asymptote-specific handle so vector, exponential, and logarithm graphs all use the same component. The rotation prop replaces the old orientation prop (0° = horizontal, 90° = vertical, arbitrary angles for vector).
No focus outline lines — Unlike MovableLine, the vector uses the drag handle pill's focus ring for focus indication, avoiding extra SVG lines on tab focus.
Line thickens on hover/focus/drag — Both visible lines apply the movable-dragging CSS class when active, but the arrowhead does not (fixed strokeWidth).
Arrowhead on top — Rendered after the tip point in SVG order so it stays visible over the thickened line.
CSS-driven styles — Line color (--mafs-blue), weight (--movable-line-stroke-weight), and caps (stroke-linecap: round) are in .movable-vector-line CSS class rather than inline styles.

Test plan:

pnpm tsc — no new type errors
pnpm test packages/perseus/src/widgets/interactive-graphs/graphs/ — all tests pass including 10 vector tests and 6 pill-drag-handle tests
Existing exponential and movable-asymptote tests pass (20 tests) — verified PillDragHandle migration doesn't regress
Verified in Storybook: default state, hover (line thickens, arrowhead doesn't), focus (pill focus ring, no extra lines), drag (grab handle blurs on release), arrowhead extends past tip at all angles
No existing interactive graph tests regress

claude

Claude Code Review

This repository is configured for manual code reviews. Comment @claude review to trigger a review and subscribe this PR to future pushes, or @claude review once for a one-time review.

_{Tip: disable this comment in your organization's Code Review settings.}

github-actions · 2026-03-31T23:43:14Z

🗄️ Schema Change: No Changes ✅

github-actions · 2026-03-31T23:43:40Z

🛠️ Item Splitting: No Changes ✅

github-actions · 2026-03-31T23:43:47Z

Size Change: +2.25 kB (+0.45%)

Total Size: 501 kB

📦 View Changed

Filename	Size	Change
`packages/perseus/dist/es/index.js`	198 kB	+2.06 kB (+1.05%)
`packages/perseus/dist/es/strings.js`	8.45 kB	+183 B (+2.21%)

ℹ️ View Unchanged

Filename	Size
`packages/kas/dist/es/index.js`	20.5 kB
`packages/keypad-context/dist/es/index.js`	1 kB
`packages/kmath/dist/es/index.js`	6.36 kB
`packages/math-input/dist/es/index.js`	98.5 kB
`packages/math-input/dist/es/strings.js`	1.61 kB
`packages/perseus-core/dist/es/index.item-splitting.js`	12 kB
`packages/perseus-core/dist/es/index.js`	25.2 kB
`packages/perseus-editor/dist/es/index.js`	102 kB
`packages/perseus-linter/dist/es/index.js`	9.3 kB
`packages/perseus-score/dist/es/index.js`	9.7 kB
`packages/perseus-utils/dist/es/index.js`	403 B
`packages/pure-markdown/dist/es/index.js`	1.39 kB
`packages/simple-markdown/dist/es/index.js`	6.71 kB

_{compressed-size-action}

github-actions · 2026-03-31T23:43:50Z

npm Snapshot: Published

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

Example:

pnpm add @khanacademy/perseus@PR3441

If you are working in Khan Academy's frontend, you can run the below command.

./dev/tools/bump_perseus_version.ts -t PR3441

If you are working in Khan Academy's webapp, you can run the below command.

./dev/tools/bump_perseus_version.js -t PR3441

ivyolamit

Adding here my initial comment for the first pass. I'm happy to chat about the focus state behavior in chat.

ivyolamit · 2026-04-16T19:26:30Z

Something I fixed recently based on the playtest feedback on the drag handle focus, the expected behavior is when the user drags using the pill and the mouse hover away from the pill it will retain the focus state until user navigates away or navigate to another point whether it's using keyboard or mouse.

Vector Logarithm

Suggestion: retaining the pill focus to have consistent behavior. I'm happy to discuss this with you 😉

Ooo great point, I'll match that!

Hmmm I reviewed the play test feedback and I see a message from our designer specifically requesting that the drag handle should lose the focus state when the mouse moves out, which is how I implemented it. Should we check in with them before adjusting?

ivyolamit · 2026-04-16T19:27:59Z

Also a nit pick: what you think of naming this drag-handle-pill.tsx DragHandlePill?
edit: it also matches how we're naming most things by using the action first.

This is an edge case, i'm not sure though but worth checking with content if there's a scenario if the point and arrow is 1 point apart or less, the user experience is not so great can't drag it all the time. I wonder if there's a mathematical limit of the distance of the line 🤔

Oooo makes sense to me! I didn't think about the order of the words so much while I was renaming it to be more generic.

I've also discussed the minimum distance with design/content but I haven't heard back yet. I might suggest that we leave this "as is" so that we can get feedback during the play test about minimum distances for the vector graph. ;) However, I can also implement a 2-grid-step minimum now if you feel we should make an executive decision

ivyolamit

@SonicScrewdriver here's my second pass, I think overall it's looking good. Let's chat about the items I pointed out for consistency. And please have a follow-up PR for the regression and state stories. Great work here! the drag handle looks simple, but i can see that you have done a great consideration here to make it look and work. 🎉

ivyolamit · 2026-04-16T20:22:19Z

Note: once all the PRs are merged for vector, can you please do a smoke test to ensure that the dashed asymptote and focus still works as expected.

ivyolamit · 2026-04-16T20:24:36Z

Note: once this is release, please keep an eye out on the translation PR comment in frontend release and request for the new strings based on our process timeline is two weeks after it is requested, it should be still within timeline before our next internal and content play test.

ivyolamit · 2026-04-16T20:28:19Z

Please don't forget to add the regression story for this, as a followup PR after all 5 PRs are landed.

Whoops thought I had one!

ivyolamit · 2026-04-16T20:29:47Z

In a followup PR after all 5 PRs are landed please update/added new state behavior here

ivyolamit · 2026-04-16T20:37:43Z

This is an edge case, i'm not sure though but worth checking with content if there's a scenario if the point and arrow is 1 point apart or less, the user experience is not so great can't drag it all the time. I wonder if there's a mathematical limit of the distance of the line 🤔

ivyolamit · 2026-04-16T20:38:38Z

+     * Arbitrary angles are supported (e.g. for vector alignment).
+     * @default 0
+     */
+    rotation?: number;


just a comment, this addition is smart. good work! 🎉

ivyolamit · 2026-04-16T20:46:13Z

+    focused: boolean;
+};
+
+// useControlArrowhead mirrors useControlPoint but renders a


Suggested change

// useControlArrowhead mirrors useControlPoint but renders a

// Hook that mirrors useControlPoint but renders a

ivyolamit · 2026-04-16T20:55:20Z

I just realized looking at the chromatic snapshot, you might need to rebase from main 😓 it tag the difference between the dashed drag handle. But I think this will go away once you do the interactive rebase once PR1 and PR2 landed.

ivyolamit

Based on our chat, the minimum distance will be something to discuss with content and can be improved later in a followup PR if needed. Adding ✅ 👍🏼

…ndle

…and subcomponents.

…more correct

…ssues,

SonicScrewdriver self-assigned this Mar 31, 2026

SonicScrewdriver added the olc-5.0.c4fcb label Mar 31, 2026

claude Bot reviewed Mar 31, 2026

View reviewed changes

SonicScrewdriver changed the title ~~docs(changeset): Creation of new Vector graph and subcomponents.~~ [ Interactive Graph | Vector Graph ] PR3: Rendering & Accessibility Mar 31, 2026

SonicScrewdriver force-pushed the LEMS-3971/vector-pr2 branch from cd4b7ce to 68ae5c4 Compare March 31, 2026 23:57

SonicScrewdriver force-pushed the LEMS-3971/vector-pr3 branch 2 times, most recently from 77f5629 to 52d299e Compare April 7, 2026 19:52

github-actions Bot added item-splitting-change and removed item-splitting-change labels Apr 9, 2026

SonicScrewdriver force-pushed the LEMS-3971/vector-pr3 branch from 8e83938 to cec842e Compare April 9, 2026 22:23

SonicScrewdriver force-pushed the LEMS-3971/vector-pr2 branch from fbb7178 to 705a8e0 Compare April 13, 2026 21:16

SonicScrewdriver force-pushed the LEMS-3971/vector-pr3 branch from acb02ad to 3e10b58 Compare April 13, 2026 21:17

SonicScrewdriver force-pushed the LEMS-3971/vector-pr2 branch 2 times, most recently from 86a5da9 to da4b606 Compare April 15, 2026 22:06

SonicScrewdriver force-pushed the LEMS-3971/vector-pr3 branch 2 times, most recently from bd44dd3 to 0c99f50 Compare April 15, 2026 22:26

ivyolamit reviewed Apr 16, 2026

View reviewed changes

ivyolamit approved these changes Apr 16, 2026

View reviewed changes

SonicScrewdriver force-pushed the LEMS-3971/vector-pr2 branch from c6ebc40 to ad02a65 Compare April 16, 2026 22:13

SonicScrewdriver added 5 commits April 16, 2026 15:13

[LEMS-3971/vector-pr3] New Vector Graph + Refactoring of pill drag ha…

11f571d

…ndle

[LEMS-3971/vector-pr3] docs(changeset): Creation of new Vector graph …

3446ffd

…and subcomponents.

[LEMS-3971/vector-pr3] Moved from PR2

b7c23cc

[LEMS-3971/vector-pr3] formatting

42d5cad

[LEMS-3971/vector-pr3] New direction :)

0e6186b

SonicScrewdriver added 8 commits April 16, 2026 15:13

[LEMS-3971/vector-pr3] Tip to tail

d169e1c

[LEMS-3971/vector-pr3] remove extra space

6c18018

[LEMS-3971/vector-pr3] Adjusting arrowhead position slightly to feel …

78b49d2

…more correct

[LEMS-3971/vector-pr3] Move hairlines in-graph to avoid overlapping i…

bd41da8

…ssues,

[LEMS-3971/vector-pr3] matching design

99209c0

[LEMS-3971/vector-pr3] last changes to match current design

9371284

[LEMS-3971/vector-pr3] prettier fix

64cc5be

[LEMS-3971/vector-pr3] fix test

8ae7021

SonicScrewdriver force-pushed the LEMS-3971/vector-pr3 branch from cee09bc to 8ae7021 Compare April 16, 2026 22:13

SonicScrewdriver added 2 commits April 20, 2026 14:51

[LEMS-3971/vector-pr3] Rename

19ea683

[LEMS-3971/vector-pr3] formatting sigh

ec0075a

	// useControlArrowhead mirrors useControlPoint but renders a
	// Hook that mirrors useControlPoint but renders a

Conversation

SonicScrewdriver commented Mar 31, 2026 • edited by atlassian Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Changes:

New files:

Modified files:

Deleted files:

Design decisions:

Test plan:

Uh oh!

claude Bot left a comment

Choose a reason for hiding this comment

Claude Code Review

Uh oh!

github-actions Bot commented Mar 31, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🗄️ Schema Change: No Changes ✅

Uh oh!

github-actions Bot commented Mar 31, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🛠️ Item Splitting: No Changes ✅

Uh oh!

github-actions Bot commented Mar 31, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions Bot commented Mar 31, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

npm Snapshot: Published

Uh oh!

ivyolamit left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ivyolamit Apr 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ivyolamit left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ivyolamit commented Apr 16, 2026

Uh oh!

ivyolamit left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

SonicScrewdriver commented Mar 31, 2026 •

edited by atlassian Bot

Loading

github-actions Bot commented Mar 31, 2026 •

edited

Loading

github-actions Bot commented Mar 31, 2026 •

edited

Loading

github-actions Bot commented Mar 31, 2026 •

edited

Loading

github-actions Bot commented Mar 31, 2026 •

edited

Loading

ivyolamit Apr 16, 2026 •

edited

Loading