[Locked Figure Aria] Locked line aria label editor UI

[nishasy]

Summary:

• Use locked-figure-aria.tsx within LockedLineSettings.
• Write the function to auto-generate the locked line
  aria label with its coordinates and visible labels.

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

Test plan:

yarn jest packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-line-settings.test.tsx

Storybook

• http://localhost:6006/?path=/story/perseuseditor-widgets-interactive-graph--mafs-with-locked-figure-labels-all-flags
• Confirm that the locked line aria label field is already populated with "Line PQ" (passed in via builder)
• Confirm that pressing "Auto-generate" works with no labels, one label, and multiple labels
• Confirm that updating the aria label in the editor also updates the aria label on the line
  • Check the web inspector to confirm the aria-label text is updated
  • Use a screen reader to confirm the new label is read out

Screen.Recording.2024-09-26.at.2.35.29.PM.mov

[github-actions]

npm Snapshot: Published

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

Example:

yarn add @khanacademy/perseus@PR1684

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

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

[github-actions]

Size Change: +53 B (+0.01%)

Total Size: 864 kB

Filename	Size	Change
packages/perseus-editor/dist/es/index.js	280 kB	+53 B (+0.02%)

ℹ️ 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-linter/dist/es/index.js	22.2 kB
packages/perseus/dist/es/index.js	418 kB
packages/perseus/dist/es/strings.js	3.4 kB
packages/pure-markdown/dist/es/index.js	3.66 kB
packages/simple-markdown/dist/es/index.js	12.4 kB

_{compressed-size-action}

[khan-actions-bot]

Gerald

Required Reviewers

• @Khan/perseus for changes to .changeset/itchy-pears-march.md, packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-line-settings.test.tsx, packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-line-settings.tsx

---

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

[benchristel]

I made a few non-blocking suggestions inline. LGTM overall!

[benchristel]

Could this be simplified to

Suggested change

	for (let i = 0; i < labels.length; i++) {
	// Separate additional labels with commas.
	if (i > 0) {
	str += ",";
	}
	str += ` ${labels[i].text}`;
	}
	str += ` ${labels.map((l) => l.text).join(", ")}`;

or am I missing something?

[nishasy]

That's much cleaner, thank you!

[benchristel]

I imagine this formatting style will be reused in the aria labels for many different locked figure types, so... what do you think about extracting a function like

function formatLockedPoint(point: LockedPointType): string {
    const [x, y] = point.coord;
    return `(${x}, ${y})`;
}

[nishasy]

I think the LockedPointType is only used in locked points and locked lines, so I personally don't think there's enough usage of that yet to extract the coordinates out?

[benchristel]

I notice that the points of a line can also have their own labels (at least, according to the LockedPointType). Do we want to include those as well?

[nishasy]

I thought about that, but I think I'm going to forego it because the more I thought about it, the more it sounded like something the content authors should manually write the aria label for. Especially since each point can hypothetically have multiple labels.

[nishasy]

The parent pull-request (#1683) has been merged into main, but this branch (locked-line-aria-editor) now has conflicts with the new base branch. These conflicts must be resolved before checks can complete on this pull-request.