[SR] Add aria labels to interactive Circle graph #1928

nishasy · 2024-11-27T23:24:46Z

Summary:

Make the Circle interactive graph screen reader accessible as outlined by the Circle SRUX doc.

Add aria label, aria-described-by, and aria-live for the outer circle
Add aria label, aria-described-by, and aria-live for the radius point on the edge of the circle
Add all the label and description strings to the strings.ts file for translations later

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

Test plan:

http://localhost:6006/iframe.html?args=&globals=&id=perseuseditor-widgets-interactive-graph--interactive-graph-circle&viewMode=story (Or use the storybook publish below)
test the screen reader experience
initial focus should include the additional info that's a part of the aria-describedby
updating the circle position should read out the new info that part of the aria-label
updating the radius point position should read out the new info that part of the aria-label

github-actions · 2024-11-27T23:27:35Z

npm Snapshot: Published

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

Example:

yarn add @khanacademy/perseus@PR1928

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

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

github-actions · 2024-11-27T23:27:43Z

Size Change: +976 B (+0.08%)

Total Size: 1.27 MB

Filename	Size	Change
`packages/perseus/dist/es/index.js`	416 kB	+554 B (+0.13%)
`packages/perseus/dist/es/strings.js`	4.12 kB	+422 B (+11.41%)	⚠️

ℹ️ View Unchanged

Filename	Size
`packages/kas/dist/es/index.js`	39 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`	77.9 kB
`packages/math-input/dist/es/strings.js`	1.79 kB
`packages/perseus-core/dist/es/index.js`	1.48 kB
`packages/perseus-editor/dist/es/index.js`	688 kB
`packages/perseus-linter/dist/es/index.js`	22.2 kB
`packages/pure-markdown/dist/es/index.js`	3.66 kB
`packages/simple-markdown/dist/es/index.js`	12.5 kB

_{compressed-size-action}

…name.

khan-actions-bot · 2024-12-06T19:56:25Z

Gerald

Required Reviewers

@Khan/perseus for changes to .changeset/cool-bulldogs-dance.md, packages/perseus/src/strings.ts, packages/perseus/src/widgets/interactive-graphs/mafs-graph.test.tsx, packages/perseus/src/widgets/interactive-graphs/graphs/circle.tsx

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

nishasy · 2024-12-10T02:14:53Z

packages/perseus/src/widgets/interactive-graphs/graphs/circle.test.tsx

Unfortunately, I don't think I can test the changes to the aria properties on update with jest. I don't even think I can test that the radius point's aria live value state updates when the circle is moved.

Someone please tell me if I'm wrong. I'm open to suggestions for how to test this stuff.

You should be able to use a command (can't remember it off the top of my head) where you fire onMove or move event and then you can use expect(aria-live value in element to be "polite").

It's worth a 15 min time box to see if this can be done.

This article might have what you're looking for, the tool is called fireEvent:
https://vinayak-hegde.medium.com/js-react-and-customevent-testing-using-jest-and-react-testing-library-abb247fd758a

Added tests!

…comments

catandthemachines

Approved! If you can give the test one extra try to trigger a move event and then check that the aria-live changes. Other than that you look good. ❤️

catandthemachines · 2024-12-12T18:20:54Z

packages/perseus/src/widgets/interactive-graphs/graphs/circle.test.tsx

You should be able to use a command (can't remember it off the top of my head) where you fire onMove or move event and then you can use expect(aria-live value in element to be "polite").

It's worth a 15 min time box to see if this can be done.

catandthemachines · 2024-12-12T18:22:02Z

packages/perseus/src/widgets/interactive-graphs/mafs-graph.test.tsx

@@ -20,32 +21,6 @@ function expectLabelInDoc(label: string) {
    expect(screen.getByLabelText(label)).toBeInTheDocument();
 }

-function getBaseMafsGraphProps(): MafsGraphProps {


Nice! Glad you moved this <3

anakaren-rojas · 2024-12-12T22:48:54Z

packages/perseus/src/widgets/interactive-graphs/graphs/circle.tsx

@@ -37,31 +38,101 @@ function CircleGraph(props: CircleGraphProps) {
    const {dispatch, graphState} = props;
    const {center, radiusPoint} = graphState;

+    const {strings} = usePerseusI18n();
+    const [radiusPointAriaLive, setRadiusPointAriaLive] = React.useState<
+        "off" | "polite"


I'd recommend using the aria live type in
packages/perseus/src/widgets/interactive-graphs/types.ts

anakaren-rojas · 2024-12-12T22:51:23Z

packages/perseus/src/widgets/interactive-graphs/graphs/circle.tsx

-        </>
+            {/* Hidden elements to provide the descriptions for the
+                circle and radius point's `aria-describedby` properties. */}
+            <g id={radiusId} style={{display: "hidden"}}>


If I remember correctly, using display: "hidden" also hides it from the screen reader. Did you have any issues when testing this?
Using a11y.srOnly might be an alternative if you do have issues
packages/perseus/src/util/a11y.ts

I used display: hidden because I don't want the screen reader (or any user) to ever actually access this element. It's only there for its text and ID so that other stuff can refer to it. It seemed to work fine in my manual tests, so I think this should be okay?

[SR] Add aria labels to interactive Circle graph

8bf74c3

nishasy self-assigned this Nov 27, 2024

nishasy added 5 commits December 4, 2024 14:42

move strings to string file

9fcc4cd

Merge branch 'main' into sr-circle

19a34b2

Add outer points to main aria labels. Changeset.

9c1d13b

Go back to putting outer points in aria-describedby. Update variable …

4897d19

…name.

Merge branch 'main' into sr-circle

60e2a07

nishasy marked this pull request as ready for review December 6, 2024 19:56

nishasy marked this pull request as draft December 6, 2024 19:56

khan-actions-bot requested a review from a team December 6, 2024 19:56

nishasy added 2 commits December 9, 2024 17:15

move the circle aria props so they actually work

8282a65

add a test

e57d865

nishasy commented Dec 10, 2024

View reviewed changes

nishasy added 2 commits December 9, 2024 18:21

add comments

bb4a5c3

Move non-interactive graph string inside the strings.ts file and add …

3d824ca

…comments

nishasy marked this pull request as ready for review December 10, 2024 02:26

nishasy requested review from catandthemachines, anakaren-rojas and a team and removed request for a team December 10, 2024 02:35

catandthemachines approved these changes Dec 12, 2024

View reviewed changes

anakaren-rojas approved these changes Dec 12, 2024

View reviewed changes

nishasy added 2 commits December 12, 2024 14:57

use AriaLive type

199146b

update tests

193facf

nishasy merged commit 09d906c into main Dec 13, 2024
8 checks passed

nishasy deleted the sr-circle branch December 13, 2024 00:13

khan-actions-bot mentioned this pull request Dec 13, 2024

Version Packages #1998

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[SR] Add aria labels to interactive Circle graph #1928

[SR] Add aria labels to interactive Circle graph #1928

nishasy commented Nov 27, 2024 •

edited

Loading

github-actions bot commented Nov 27, 2024 •

edited

Loading

github-actions bot commented Nov 27, 2024 •

edited

Loading

khan-actions-bot commented Dec 6, 2024

nishasy Dec 10, 2024

catandthemachines Dec 12, 2024

catandthemachines Dec 12, 2024

nishasy Dec 13, 2024

catandthemachines left a comment

catandthemachines Dec 12, 2024

catandthemachines Dec 12, 2024

anakaren-rojas Dec 12, 2024

anakaren-rojas Dec 12, 2024

nishasy Dec 12, 2024 •

edited

Loading

[SR] Add aria labels to interactive Circle graph #1928

[SR] Add aria labels to interactive Circle graph #1928

Conversation

nishasy commented Nov 27, 2024 • edited Loading

Summary:

Test plan:

github-actions bot commented Nov 27, 2024 • edited Loading

npm Snapshot: Published

github-actions bot commented Nov 27, 2024 • edited Loading

khan-actions-bot commented Dec 6, 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

catandthemachines left a 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

Choose a reason for hiding this comment

nishasy Dec 12, 2024 • edited Loading

Choose a reason for hiding this comment

nishasy commented Nov 27, 2024 •

edited

Loading

github-actions bot commented Nov 27, 2024 •

edited

Loading

github-actions bot commented Nov 27, 2024 •

edited

Loading

nishasy Dec 12, 2024 •

edited

Loading