[Interactive Graph + Editor] Add aria label and description to entire interactive graph and its UI to the editor

[nishasy]

Summary:

• Add fullGraphAriaLabel and fullGraphAriaDescription fields to interactive graph.
• Hook up the graph so that if the fullGraphAriaLabel and/or fullGraphAriaDescription fields are present, then the graph has the respective aria-label and aria-describedby properties.
• Add the UI to the interactive graph editor that allows the content author to add a title (label) and description to the graph.

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

Test plan:

yarn jest packages/perseus-editor/src/components/__tests__/interactive-graph-description.test.tsx
yarn jest packages/perseus-editor/src/widgets/__tests__/interactive-graph-editor.test.tsx
yarn jest packages/perseus/src/widgets/interactive-graphs/interactive-graph.test.tsx

Storybook

• Go to http://localhost:6006/iframe.html?id=perseuseditor-widgets-interactive-graph--interactive-graph-with-aria-label&viewMode=story
• There should already be a title and description written in their respective fields
• Use a screenreader to tab to the graph
• Confirm that the title and description are read. They will both be read at once in Safari and Firefox. With Chrome, use the screenreader controls to go to the next element to hear the description.
• Change the values in the title and description inputs, and confirm that the aria label and description on the graph updates.

Demo:

Screen.Recording.2024-09-05.at.5.54.30.PM.mov

NOTE! The janky textarea will be replaced with a Wonder Blocks TextArea soon.

[github-actions]

Size Change: +568 B (+0.07%)

Total Size: 859 kB

Filename	Size	Change
packages/perseus-editor/dist/es/index.js	275 kB	+419 B (+0.15%)
packages/perseus/dist/es/index.js	417 kB	+149 B (+0.04%)

ℹ️ 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.36 kB
packages/pure-markdown/dist/es/index.js	3.66 kB
packages/simple-markdown/dist/es/index.js	12.4 kB

_{compressed-size-action}

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 70.98%. Comparing base (6c4e9e1) to head (5456ccb).
Report is 1 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #1568      +/-   ##
==========================================
+ Coverage   70.46%   70.98%   +0.51%     
==========================================
  Files         546      572      +26     
  Lines      106885   111539    +4654     
  Branches     5533    11930    +6397     
==========================================
+ Hits        75319    79176    +3857     
- Misses      31450    32363     +913     
+ Partials      116        0     -116     

see 1118 files with indirect coverage changes

---

Continue to review full report in Codecov by Sentry.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 6c4e9e1...5456ccb. Read the comment docs.

[github-actions]

npm Snapshot: Published

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

Example:

yarn add @khanacademy/perseus@PR1568

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

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

[khan-actions-bot]

Gerald

Required Reviewers

• @Khan/perseus for changes to .changeset/new-pigs-begin.md, packages/perseus/src/perseus-types.ts, packages/perseus-editor/src/__stories__/interactive-graph-editor.stories.tsx, packages/perseus-editor/src/components/interactive-graph-description.tsx, 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/mafs-graph.tsx, packages/perseus/src/widgets/interactive-graphs/stateful-mafs-graph.tsx, packages/perseus-editor/src/components/__tests__/interactive-graph-description.test.tsx, packages/perseus-editor/src/widgets/__tests__/interactive-graph-editor.test.tsx, packages/perseus-editor/src/widgets/interactive-graph-editor/interactive-graph-editor.tsx

---

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

[benchristel]

The code looks good! I have a design question: what's an example of an aria-label content creators might set on a graph? It seems like the description field is the most important one. Could the label always be set to something generic like "graph"? I worry that, in the long run, content creators won't understand the distinction between these fields or how to use them effectively.

I imagine my question is already answered somewhere, so please link me to a document or slack thread if there is one.

[nishasy]

@benchristel I started a conversation in Slack around your question!

It seems like we'd keep both the title and the description regardless, so I'm going to land this. Thank you!