[Locked Figure Aria] Locked point aria label editor UI

[nishasy]

Summary:

• Create a new locked-figure-aria.tsx file that can
  be reused for each locked figure's settings.
• Use this locked-figure-aria.tsx component within
  LockedPointSettings.
• Write the function to auto-generate the locked
  point aria label with its coordinates and
  visible labels.

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

Test plan:

• yarn jest packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-point-settings.test.tsx
• yarn jest packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-figure-aria.test.tsx

Storybook

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

[github-actions]

npm Snapshot: Published

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

Example:

yarn add @khanacademy/perseus@PR1682

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

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

[github-actions]

Size Change: +820 B (+0.1%)

Total Size: 864 kB

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

ℹ️ 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/strong-spoons-talk.md, packages/perseus-editor/src/widgets/interactive-graph-editor/components/interactive-graph-description.tsx, packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-figure-aria.test.tsx, packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-figure-aria.tsx, packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-point-settings.test.tsx, packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-point-settings.tsx

---

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

[catandthemachines]

General question: Do we want to auto generate a label that includes the coordinates? And why is it part of the autogenerated labels, and not the default one? 🤔

[catandthemachines]

The code looks good, but just had a question about the intention behind the autogenerated aria-labels.

[nishasy]

@catandthemachines

General question: Do we want to auto generate a label that includes the coordinates? And why is it part of the autogenerated labels, and not the default one? 🤔

Since this auto-generation is just to aid the content authors (and not to actually have those labels on the figures automatically), I just wanted to add all the info that would be relevant. The content authors can edit this field as necessary. Some questions may require hiding that information, and some may not.

Also @catandthemachines What do you mean by "default labels"? The default label should be empty string (undefined when saved).

[nishasy]

Talked about this offline. We're gonna land this for now, but we'll call the release blocked on design until we have more input on what the auto-generated text should look like.