Skip to content

[Interactive Graph] Add WB Announcer to Ray graph#3685

Draft
catandthemachines wants to merge 1 commit into
mainfrom
catjohnson/wb-announcer-ray
Draft

[Interactive Graph] Add WB Announcer to Ray graph#3685
catandthemachines wants to merge 1 commit into
mainfrom
catjohnson/wb-announcer-ray

Conversation

@catandthemachines
Copy link
Copy Markdown
Member

@catandthemachines catandthemachines commented May 29, 2026

Summary:

Wires the Ray graph's movePoint (endpoint) and moveRay (whole-line grab
handle) actions into the existing WB Announcer pipeline.

What this PR does:

  • Reducer: case "ray" in doMovePointInFigure now emits
    stateAnnouncement: {type: "move-ray-point", pointIndex, x, y} when an
    endpoint moves. case "ray" in doMoveLine emits
    stateAnnouncement: {type: "move-ray-line", coords} when the whole ray is
    dragged via the grab handle. Both case "ray" blocks are split out from
    the shared case "linear"/case "vector" blocks so linear and vector
    are intentionally untouched.
  • Types: adds MoveRayPointAnnouncement and MoveRayLineAnnouncement to
    InteractiveGraphStateAnnouncement.
  • Screen reader text: getAnnouncementText handles "move-ray-point" by
    index — the endpoint (index 0) uses srRayEndpoint ("Endpoint at X comma
    Y."
    ) and the terminal point (index 1) uses srRayTerminalPoint
    ("Through point at X comma Y.") — and "move-ray-line" uses
    srRayGrabHandle ("Ray with endpoint X1 comma Y1 going through point X2
    comma Y2."
    ).
  • Component: adds an optional ariaLive override prop to MovableLine. It
    defaults to undefined, preserving the internal aria-live state machine
    for the other graphs that still share MovableLine (linear, segment,
    linear-system). ray.tsx passes ariaLive="off" so the WB Announcer is
    the only source of move announcements for the Ray graph.
  • TODOs reference LEMS-4189,
    which tracks removing aria-live from useControlPoint and MovableLine
    once every line graph's reducer is wired to the announcer.
  • Tests: adds reducer tests for movePoint and moveRay on ray, adds
    screenreader-text tests (move-ray-point at both indices +
    move-ray-line), and removes the now-obsolete "Should update the
    aria-live when X is moved" test from ray.test.tsx.

Note: the ariaLive override prop on MovableLine is the same shared
infrastructure introduced in the Linear PR (#3683). This PR re-introduces
it identically so the two can merge in either order with a trivial /
no-op conflict on movable-line.tsx.

Issue: LEMS-4199

Test plan:

Automated

  • pnpm tsc — passes
  • pnpm lint packages/perseus — passes
  • pnpm jest packages/perseus/src/widgets/interactive-graphs — passes

Manual (reviewer)

  • Open the Interactive Graph → Ray story in Storybook (pnpm storybook). Turn on VoiceOver / NVDA (or use the Storybook a11y addon's live-region inspector).
  • Tab to the ray's endpoint handle. Confirm the initial focus announces "Endpoint at X comma Y." (from aria-label, unchanged).
  • Press arrow keys to move the endpoint one snap step at a time. Confirm:
    • You hear "Endpoint at X comma Y." after each move (new WB Announcer payload).
    • You do not hear the announcement twice. Before this PR, both the endpoint's aria-live and the WB Announcer would have fired.
  • Tab to the terminal point (the point the ray passes through). Confirm moves announce "Through point at X comma Y.".
  • Tab to the ray itself (the whole-line grab handle). Press arrow keys to drag the ray. Confirm you hear "Ray with endpoint X1 comma Y1 going through point X2 comma Y2." after each keyboard drag — this is the new move-ray-line announcement, and you should hear it only once.
  • Regression: open the Linear, Segment, and Linear System stories and confirm they still announce moves the same way they did before (their behavior is unchanged in this PR).

Wires the Ray graph's movePoint (endpoint) and moveRay (whole-line grab
handle) actions into the existing WB Announcer pipeline.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented May 29, 2026

Size Change: +216 B (+0.04%)

Total Size: 506 kB

📦 View Changed
Filename Size Change
packages/perseus/dist/es/index.js 199 kB +216 B (+0.11%)
ℹ️ View Unchanged
Filename Size
packages/kas/dist/es/index.js 20.6 kB
packages/keypad-context/dist/es/index.js 1 kB
packages/kmath/dist/es/index.js 6.32 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.1 kB
packages/perseus-core/dist/es/index.js 26.1 kB
packages/perseus-editor/dist/es/index.js 105 kB
packages/perseus-linter/dist/es/index.js 9.41 kB
packages/perseus-score/dist/es/index.js 10.2 kB
packages/perseus-utils/dist/es/index.js 403 B
packages/perseus/dist/es/strings.js 8.55 kB
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
Copy link
Copy Markdown
Contributor

npm Snapshot: Published

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

Example:

pnpm add @khanacademy/perseus@PR3685

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

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

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

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

@catandthemachines catandthemachines marked this pull request as draft May 29, 2026 01:13
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant