[Locked Figure Aria] Locked function aria labels (graph + editor) #1687

nishasy · 2024-09-26T23:46:52Z

Summary:

Add ariaLabel field to LockedFunctionType
Add the aria label behavior to the LockedFunction on the mafs graph
Use LockedFigureAria within LockedFunctionSettings
Write the function to auto-generate the locked function aria label
with its coordinates and visible labels.

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

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-function-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 function. It should read out as "Function E".

Editor

Confirm that the locked function aria label field is already populated with "Function 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 function
- 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-function-experience.mov

Editor

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

…tor)

…itor)

github-actions · 2024-09-26T23:49:14Z

npm Snapshot: Published

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

Example:

yarn add @khanacademy/perseus@PR1687

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

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

github-actions · 2024-09-26T23:49:30Z

Size Change: +98 B (+0.01%)

Total Size: 864 kB

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

ℹ️ 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 · 2024-09-26T23:55:54Z

Gerald

Required Reviewers

@Khan/perseus for changes to .changeset/beige-worms-hope.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-function.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

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

benchristel · 2024-09-27T22:20:19Z

packages/perseus/src/widgets/interactive-graphs/locked-figures/locked-function.tsx

+        <g
+            className="locked-function"
+            aria-label={hasAria ? props.ariaLabel : undefined}
+            aria-hidden={!hasAria}


Why is aria-hidden needed here? Does the screenreader read something for this SVG element if there's no aria-label?

Yes! It says "empty group"

benchristel · 2024-09-27T22:32:05Z

...editor/src/widgets/interactive-graph-editor/locked-figures/locked-function-settings.test.tsx

+                const input = screen.getByRole("textbox", {name: "Aria label"});
+
+                // Assert
+                expect(input).toHaveValue("Ellipse at (x, y)");


Maybe this label shouldn't contain Ellipse - just to avoid confusion :)

benchristel · 2024-09-27T22:34:54Z

...seus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-function-settings.tsx

+        // Add the domain/range constraints to the aria label
+        // if they are not the default values.
+        if (domain && !(domain[0] === -Infinity && domain[1] === Infinity)) {
+            str += `, ${domainRangeText} from ${domain[0]} to ${domain[1]}`;


I think, rather than using ${domainRangeText}, we always want this word to be domain. IIUC, the domain of a function is always the set of input values, so if the function has the form x = f(y), the domain is a set of y coordinates.

Might be good to confirm this with math content creators, though.

That is a good point! I'll ask

I haven't gotten a response from the content authors yet, but I think you're right. I'll change it to domain here and in the editor UI. If a change is requested in the future, we can update it. For now, I'd like to unblock this so I can keep landing all the PRs stacked on top of this.

… referring to input values.

anakaren-rojas · 2024-09-30T18:19:20Z

...seus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-function-settings.tsx

@@ -223,7 +248,7 @@ const LockedFunctionSettings = (props: Props) => {
                    tag="label"
                    style={[styles.dropdownLabel, styles.domainMin]}


Does the label component for domain min also need an aria label like the domain max one?

No, it's automatically labeled by the label itself. You can see in the test file that the aria labels successfully get set as "domain min" and "domain max".

anakaren-rojas · 2024-09-30T18:28:45Z

...seus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-function-settings.tsx

@@ -80,6 +81,30 @@ const LockedFunctionSettings = (props: Props) => {
        ]);
    }, [domain]);

+    function getPrepopulatedAriaLabel() {
+        let str = `Function with equation ${equationPrefix}${equation}`;
+


Should there be an additional check to validate that there is text added to the labels? Or make the text a required field if the button to add a visible label is clicked?

I did think about that, and that is a good point. I do agree with you. Unfortunately, validation in the content editor has been deprioritized in favor of just trusting the content authors and giving them ultimate freedom. The content authors should definitely be checking that the label makes sense before saving this on the exercise.

If this ends up being an issue and content authors ask for extra validation, we would definitely add that in the future.

benchristel

LGTM!

@nishasy

This PR was opened by the [Changesets release](https://github.com/changesets/action) GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to main, this PR will be updated. # Releases ## @khanacademy/[email protected] ### Minor Changes - [#1687](#1687) [`c0cbb484a`](c0cbb48) Thanks [@nishasy](https://github.com/nishasy)! - [Locked Figure Aria] Locked function aria labels (graph + editor) - [#1690](#1690) [`a65da60c2`](a65da60) Thanks [@nishasy](https://github.com/nishasy)! - [Locked Figure Labels] Add/edit/delete locked polygon labels - [#1683](#1683) [`2d7cadaf0`](2d7cada) Thanks [@nishasy](https://github.com/nishasy)! - [Locked Figure Aria] Implement locked line aria label behavior on graph - [#1691](#1691) [`fc16bc77f`](fc16bc7) Thanks [@nishasy](https://github.com/nishasy)! - [Locked Figure Aria] Locked polygon aria labels (graph + editor) - [#1677](#1677) [`3c73f4aa4`](3c73f4a) Thanks [@nishasy](https://github.com/nishasy)! - [Locked Figure Aria] Implement locked point aria label behavior on graph - [#1684](#1684) [`17ebfc0de`](17ebfc0) Thanks [@nishasy](https://github.com/nishasy)! - [Locked Figure Aria] Locked line aria label editor UI - [#1685](#1685) [`b3de0d80e`](b3de0d8) Thanks [@nishasy](https://github.com/nishasy)! - [Locked Figure Aria] Implement locked vector aria labels (graph + editor) - [#1689](#1689) [`eda436f00`](eda436f) Thanks [@nishasy](https://github.com/nishasy)! - [Locked Figure Labels] View locked polygon labels - [#1682](#1682) [`039e0a360`](039e0a3) Thanks [@nishasy](https://github.com/nishasy)! - [Locked Figure Aria] Locked point aria label editor UI - [#1686](#1686) [`8230d96ee`](8230d96) Thanks [@nishasy](https://github.com/nishasy)! - [Locked Figure Aria] Implement locked ellipse aria labels (graph + editor) ### Patch Changes - [#1702](#1702) [`30725ec88`](30725ec) Thanks [@handeyeco](https://github.com/handeyeco)! - Split out validation logic for NumberLine - [#1671](#1671) [`f326139ee`](f326139) Thanks [@handeyeco](https://github.com/handeyeco)! - Move and test Grapher's validator - [#1704](#1704) [`82e0ebd71`](82e0ebd) Thanks [@handeyeco](https://github.com/handeyeco)! - Split out validation logic from table - [#1664](#1664) [`c41e4b2f3`](c41e4b2) Thanks [@benchristel](https://github.com/benchristel)! - Omit unused data from interactive graph onChange callback - [#1678](#1678) [`49efaaff5`](49efaaf) Thanks [@handeyeco](https://github.com/handeyeco)! - Port some tests to new custom matcher - [#1676](#1676) [`f5af24371`](f5af243) Thanks [@benchristel](https://github.com/benchristel)! - Internal: remove dead code from InteractiveGraph.validate() - [#1698](#1698) [`339a6db38`](339a6db) Thanks [@handeyeco](https://github.com/handeyeco)! - Refine Expression's Rubric type - [#1700](#1700) [`493715e3d`](493715e) Thanks [@handeyeco](https://github.com/handeyeco)! - Split out InteractiveGraph validator - [#1705](#1705) [`e432666fd`](e432666) Thanks [@Myranae](https://github.com/Myranae)! - Move validation logic out of the iframe widget and add tests - [#1693](#1693) [`466d010c6`](466d010) Thanks [@nishasy](https://github.com/nishasy)! - [Locked Figure Labels] Add color select to locked figure labels settings - [#1707](#1707) [`d3767f720`](d3767f7) Thanks [@handeyeco](https://github.com/handeyeco)! - Split out matcherValidator from Matcher - [#1670](#1670) [`463755970`](4637559) Thanks [@handeyeco](https://github.com/handeyeco)! - Split validation logic out of Matrix - [#1688](#1688) [`10ce86925`](10ce869) Thanks [@Myranae](https://github.com/Myranae)! - Move validation logic out of the cs-program widget and add tests - [#1703](#1703) [`e818b0f15`](e818b0f) Thanks [@handeyeco](https://github.com/handeyeco)! - Split out Plotter validator ## @khanacademy/[email protected] ### Minor Changes - [#1687](#1687) [`c0cbb484a`](c0cbb48) Thanks [@nishasy](https://github.com/nishasy)! - [Locked Figure Aria] Locked function aria labels (graph + editor) - [#1690](#1690) [`a65da60c2`](a65da60) Thanks [@nishasy](https://github.com/nishasy)! - [Locked Figure Labels] Add/edit/delete locked polygon labels - [#1683](#1683) [`2d7cadaf0`](2d7cada) Thanks [@nishasy](https://github.com/nishasy)! - [Locked Figure Aria] Implement locked line aria label behavior on graph - [#1691](#1691) [`fc16bc77f`](fc16bc7) Thanks [@nishasy](https://github.com/nishasy)! - [Locked Figure Aria] Locked polygon aria labels (graph + editor) - [#1677](#1677) [`3c73f4aa4`](3c73f4a) Thanks [@nishasy](https://github.com/nishasy)! - [Locked Figure Aria] Implement locked point aria label behavior on graph - [#1684](#1684) [`17ebfc0de`](17ebfc0) Thanks [@nishasy](https://github.com/nishasy)! - [Locked Figure Aria] Locked line aria label editor UI - [#1685](#1685) [`b3de0d80e`](b3de0d8) Thanks [@nishasy](https://github.com/nishasy)! - [Locked Figure Aria] Implement locked vector aria labels (graph + editor) - [#1689](#1689) [`eda436f00`](eda436f) Thanks [@nishasy](https://github.com/nishasy)! - [Locked Figure Labels] View locked polygon labels - [#1682](#1682) [`039e0a360`](039e0a3) Thanks [@nishasy](https://github.com/nishasy)! - [Locked Figure Aria] Locked point aria label editor UI - [#1686](#1686) [`8230d96ee`](8230d96) Thanks [@nishasy](https://github.com/nishasy)! - [Locked Figure Aria] Implement locked ellipse aria labels (graph + editor) ### Patch Changes - [#1706](#1706) [`624be8143`](624be81) Thanks [@nishasy](https://github.com/nishasy)! - [Locked Figures Aria] Use TextArea instead of TextField in the locked figures aria settings - [#1693](#1693) [`466d010c6`](466d010) Thanks [@nishasy](https://github.com/nishasy)! - [Locked Figure Labels] Add color select to locked figure labels settings - Updated dependencies \[[`30725ec88`](30725ec), [`c0cbb484a`](c0cbb48), [`f326139ee`](f326139), [`a65da60c2`](a65da60), [`82e0ebd71`](82e0ebd), [`c41e4b2f3`](c41e4b2), [`2d7cadaf0`](2d7cada), [`49efaaff5`](49efaaf), [`fc16bc77f`](fc16bc7), [`f5af24371`](f5af243), [`339a6db38`](339a6db), [`3c73f4aa4`](3c73f4a), [`17ebfc0de`](17ebfc0), [`493715e3d`](493715e), [`e432666fd`](e432666), [`466d010c6`](466d010), [`b3de0d80e`](b3de0d8), [`eda436f00`](eda436f), [`d3767f720`](d3767f7), [`463755970`](4637559), [`10ce86925`](10ce869), [`039e0a360`](039e0a3), [`8230d96ee`](8230d96), [`e818b0f15`](e818b0f)]: - @khanacademy/[email protected] Author: khan-actions-bot Reviewers: benchristel Required Reviewers: Approved By: benchristel Checks: ⏭️ Publish npm snapshot, ✅ Cypress (ubuntu-latest, 20.x), ✅ Check builds for changes in size (ubuntu-latest, 20.x), ✅ Lint, Typecheck, Format, and Test (ubuntu-latest, 20.x), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ✅ gerald Pull Request URL: #1680

nishasy added 12 commits September 25, 2024 17:32

[Locked Figure Aria] Implement locked point aria label behavior on graph

4632687

[Locked Figures Aria] Add/edit/delete locked point aria label

3dd3251

Keep text field there at all times

53acecf

Break out the aria section into its own component. Add tooltip.

e15d264

changeset

10a8d55

Add test for undefined

e099b44

[Locked Figure Aria] Implement locked line aria label behavior on graph

fd3875e

[Locked Figure Aria] Locked line aria label editor UI

6340759

[Locked Figure Aria] Implement locked vector aria labels (graph + edi…

1003256

…tor)

[Locked Figure Aria] Implement locked ellipse aria labels (graph + ed…

3c48adc

…itor)

streamline commas

111505f

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

f5ac0a2

nishasy self-assigned this Sep 26, 2024

nishasy requested review from benchristel, catandthemachines, anakaren-rojas and a team September 26, 2024 23:53

nishasy marked this pull request as ready for review September 26, 2024 23:55

benchristel reviewed Sep 27, 2024

View reviewed changes

Stop referring to ellipses in test

4dfb429

khan-actions-bot requested a review from a team September 27, 2024 23:20

Change the domain/range text to just domain to reflect that it's only…

523bc9c

… referring to input values.

anakaren-rojas reviewed Sep 30, 2024

View reviewed changes

benchristel self-requested a review September 30, 2024 21:46

benchristel approved these changes Sep 30, 2024

View reviewed changes

Base automatically changed from locked-ellipse-aria to main September 30, 2024 22:19

Merge branch 'main' into locked-function-aria

d628478

nishasy merged commit c0cbb48 into main Sep 30, 2024
9 checks passed

nishasy deleted the locked-function-aria branch September 30, 2024 22:27

khan-actions-bot mentioned this pull request Sep 30, 2024

Version Packages #1680

Merged

khan-actions-bot mentioned this pull request Oct 1, 2024

Version Packages #1709

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Locked Figure Aria] Locked function aria labels (graph + editor) #1687

[Locked Figure Aria] Locked function aria labels (graph + editor) #1687

nishasy commented Sep 26, 2024 •

edited

Loading

github-actions bot commented Sep 26, 2024 •

edited

Loading

github-actions bot commented Sep 26, 2024 •

edited

Loading

khan-actions-bot commented Sep 26, 2024

benchristel Sep 27, 2024

nishasy Sep 27, 2024

benchristel Sep 27, 2024

benchristel Sep 27, 2024

nishasy Sep 27, 2024

nishasy Sep 30, 2024 •

edited

Loading

anakaren-rojas Sep 30, 2024

nishasy Sep 30, 2024

anakaren-rojas Sep 30, 2024

nishasy Sep 30, 2024

benchristel left a comment

		@@ -223,7 +248,7 @@ const LockedFunctionSettings = (props: Props) => {
		tag="label"
		style={[styles.dropdownLabel, styles.domainMin]}

[Locked Figure Aria] Locked function aria labels (graph + editor) #1687

[Locked Figure Aria] Locked function aria labels (graph + editor) #1687

Conversation

nishasy commented Sep 26, 2024 • edited Loading

Summary:

Test plan:

Storybook

Screenshots & Videos

github-actions bot commented Sep 26, 2024 • edited Loading

npm Snapshot: Published

github-actions bot commented Sep 26, 2024 • edited Loading

khan-actions-bot commented Sep 26, 2024

Gerald

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

nishasy Sep 30, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

benchristel left a comment

Choose a reason for hiding this comment

nishasy commented Sep 26, 2024 •

edited

Loading

github-actions bot commented Sep 26, 2024 •

edited

Loading

github-actions bot commented Sep 26, 2024 •

edited

Loading

nishasy Sep 30, 2024 •

edited

Loading