[Locked Figure Aria] Locked polygon aria labels (graph + editor)

[nishasy]

Summary:

• Add ariaLabel field to LockedPolygonType
• Add the aria label behavior to the LockedPolygon on the mafs graph
• Use LockedFigureAria within LockedPolygonSettings
• Write the function to auto-generate the locked polygon aria label with its coordinates and visible labels.

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

Test plan:

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

Storybook

Graph behavior

• Go to http://localhost:6006/iframe.html?args=&id=perseuseditor-widgets-interactive-graph--mafs-with-locked-figure-labels-all-flags&viewMode=story
• Use a screen reader to navigate through the preview graph
• Using the screenreader controls (VO + arrow keys) should be able to navigate to the locked polygon. It should read out as "Polygon E"

Editor

• Confirm that the locked polygon aria label field is already populated with "Polygon E" (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 polygon
  • Check the web inspector to confirm the aria-label text is updated
  • Use a screen reader to confirm the new label is read out

Screenshots & Videos

Graph experience

locked-polygon-aria.mov

Editor experience

Screen.Recording.2024-09-27.at.3.03.56.PM.mov

[github-actions]

npm Snapshot: Published

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

Example:

yarn add @khanacademy/perseus@PR1691

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

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

[github-actions]

Size Change: +84 B (+0.01%)

Total Size: 864 kB

Filename	Size	Change
packages/perseus-editor/dist/es/index.js	280 kB	+74 B (+0.03%)
packages/perseus/dist/es/index.js	418 kB	+10 B (0%)

ℹ️ 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/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/honest-frogs-walk.md, packages/perseus/src/perseus-types.ts, packages/perseus/src/widgets/interactive-graphs/graph-locked-layer.tsx, packages/perseus/src/widgets/interactive-graphs/interactive-graph-question-builder.test.ts, packages/perseus/src/widgets/interactive-graphs/interactive-graph-question-builder.ts, packages/perseus/src/widgets/interactive-graphs/interactive-graph.test.tsx, packages/perseus/src/widgets/interactive-graphs/interactive-graph.testdata.ts, packages/perseus/src/widgets/interactive-graphs/locked-figures/locked-polygon.tsx, packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-polygon-settings.test.tsx, packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-polygon-settings.tsx

---

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

[benchristel]

Left one minor suggestion inline, but LGTM!