Skip to content

[Interactive Graph] Add WB Announcer to Angle Graph#3676

Open
catandthemachines wants to merge 2 commits into
mainfrom
catjohnson/wb-announcer-angle
Open

[Interactive Graph] Add WB Announcer to Angle Graph#3676
catandthemachines wants to merge 2 commits into
mainfrom
catjohnson/wb-announcer-angle

Conversation

@catandthemachines
Copy link
Copy Markdown
Member

@catandthemachines catandthemachines commented May 28, 2026

Summary:

Wires the Angle graph's movePoint action into the WB Announcer
pipeline.

What this PR does:

  • Reducer: case "angle" in doMovePoint now emits
    stateAnnouncement: {type: "move-angle-point", pointIndex, x, y, angleMeasure}.
    The reducer pre-computes the measure via getClockwiseAngle (honoring
    allowReflexAngles) since it already imports the angle helpers.
  • Types: adds MoveAnglePointAnnouncement to InteractiveGraphStateAnnouncement.
  • Screen reader text: getAnnouncementText handles "move-angle-point"
    by picking one of three strings based on the coord layout
    [endingSide(0), vertex(1), startingSide(2)]:
    • index 0srAngleEndingSide({x, y})
    • index 1srAngleVertexWithAngleMeasure({x, y, angleMeasure})
    • index 2srAngleStartingSide({x, y})
  • Angle component: passes ariaLive="off" to each of the three
    MovablePoints (vertex + both side points) so the WB Announcer is
    the only source of move announcements for angle. Includes a
    TODO(LEMS-4189) on each call site to remove the prop once
    aria-live is dropped from useControlPoint.
  • Tests: adds two reducer tests for movePoint on angle (vertex emits
    the measured angle; side point emits move-angle-point with the
    right pointIndex), and three screenreader-text tests covering
    each of the three pointIndex branches.

Issue: LEMS-4191

Test plan:

Automated

  • pnpm tsc — passes
  • pnpm lint packages/perseus — passes

Manual (reviewer)

  • Open the Interactive Graph → Angle story in Storybook (pnpm storybook). Turn on VoiceOver / NVDA (or use the Storybook a11y addon's live-region inspector).
  • Tab to the vertex handle (the middle point). Confirm the initial focus announces the vertex aria-label (unchanged).
  • Press arrow keys to move the vertex one snap step at a time. Confirm:
    • You hear "Point 1, vertex at X comma Y. Angle N degrees." after each move (new WB Announcer payload).
    • You do not hear the announcement twice. Before this PR, both the per-point aria-live and the WB Announcer would have fired.
  • Tab to one of the side handles and press arrow keys. Confirm you hear "Point 2, ending side at X comma Y." (index 0) or "Point 3, starting side at X comma Y." (index 2) after each move — these are the new move-angle-point announcements for the sides.

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented May 28, 2026

Size Change: +151 B (+0.03%)

Total Size: 505 kB

📦 View Changed
Filename Size Change
packages/perseus/dist/es/index.js 198 kB +151 B (+0.08%)
ℹ️ 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 104 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 (c5fe009) and published it to npm. You
can install it using the tag PR3676.

Example:

pnpm add @khanacademy/perseus@PR3676

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

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

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

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

@github-actions github-actions Bot added item-splitting-change schema-change Attached to PRs when we detect Perseus Schema changes in it and removed schema-change Attached to PRs when we detect Perseus Schema changes in it item-splitting-change labels May 28, 2026
Copy link
Copy Markdown
Member

@benchristel benchristel left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM!

"en",
);

expect(result).toBe("Point 3, starting side at 0 comma 2.");
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

A thought: it seems kind of weird that point 1 is the ending side and point 3 is the starting side. No action needed on this PR.

@catandthemachines catandthemachines requested a review from nishasy May 28, 2026 21:19
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants