feat(LEMS-2526): update aria label to include appearance descriptions

[anakaren-rojas]

Summary:

Updates the aria description to include visual traits

New aria label structure will be:
Element Type Visible Label(s) Math Details Visual Traits

Note:

• Other updates to aria descriptions will be submitted in separate PRs

Issue: LEMS-2526

Test plan:

1. Navigate to storybook
2. Add interactive graph widget using the add widget dropdown
3. Scroll down to add locked figure - select any from the dropdown
4. Click auto generate button to see basic auto generated aria label (AL)
5. Update color / line style / fill
6. Re-generate AL by clicking auto generate button to see updated label text

Expected Behavior

Visual Traits of each of the locked figures should change when an input (color, line style, fill) is updated and the generate aria label button is pressed

Screen recording

Screen.Recording.2024-10-17.at.11.13.27.AM.mov

[github-actions]

Size Change: +245 B (+0.03%)

Total Size: 867 kB

Filename	Size	Change
packages/perseus-editor/dist/es/index.js	281 kB	+245 B (+0.09%)

ℹ️ View Unchanged

Filename	Size
packages/kas/dist/es/index.js	38.8 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	420 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}

[github-actions]

npm Snapshot: Published

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

Example:

yarn add @khanacademy/perseus@PR1745

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

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

[khan-actions-bot]

Gerald

Required Reviewers

• @Khan/perseus for changes to .changeset/tender-badgers-brush.md, packages/perseus/src/index.ts, packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-ellipse-settings.test.tsx, packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-ellipse-settings.tsx, packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-function-settings.test.tsx, packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-function-settings.tsx, 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, 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, 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, packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-vector-settings.test.tsx, packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-vector-settings.tsx, packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/util.test.ts, packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/util.ts

---

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

[benchristel]

I left some recommendations inline, but I don't see any blocking issues (the code looks correct). LGTM!

[benchristel]

Thanks for adding these thorough tests!

I think using a ternary in the test might be a bit overkill, though — it makes the tests harder to read, and in a way tautological, since now they duplicate the same logic that's in the production code.

An alternative would be to have just two tests: one that exemplifies the "normal" logic of passing the color name through unchanged, and one that calls out the special case of grayH:

it("describes a solid color", () => {
  const description =
    generateLockedFigureAppearanceDescription("red");
  expect(description).toBe(". Appearance solid red");
});

it("describes grayH as gray", () => {
  const description =
    generateLockedFigureAppearanceDescription("grayH");
  expect(description).toBe(". Appearance solid gray");
});

[catandthemachines]

Looks great to me!