[SR] Ray graph - Add screen reader support for Ray interactive graph #2036

nishasy · 2024-12-18T23:57:38Z

Summary:

Add the aria label and descriptions for the full graph and the
interactive elements in the Linear System graph, based on the
SRUX doc.

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

Test plan:

yarn jest packages/perseus/src/widgets/interactive-graphs/graphs/ray.test.tsx

Storybook
http://localhost:6006/iframe.html?globals=&args=&id=perseuseditor-widgets-interactive-graph--interactive-graph-ray&viewMode=story

Screen.Recording.2024-12-18.at.3.57.53.PM.mov

The [SRUX doc](https://khanacademy.atlassian.net/wiki/spaces/LC/pages/3460366348/Linear) still needs a label for the grab handle, but I tried my best in the meantime. - Add a label and describedby for the grab handle. - Add aria-live states for the different interactive elements so they don't override each other. Issue: https://khanacademy.atlassian.net/browse/LEMS-1726 Test plan: `yarn jest packages/perseus/src/widgets/interactive-graphs/graphs/linear.test.tsx` Storybook - http://localhost:6006/iframe.html?id=perseuseditor-widgets-interactive-graph--interactive-graph-linear&viewMode=story - Try all the different slopes and intercepts - Move different elements and confirm that the updated aria-label is what is read out, and none of the other elements override the currently focused one.

…aria lives

…inear System interactive graph

…nteractive graph

github-actions · 2024-12-19T00:01:43Z

npm Snapshot: Published

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

Example:

yarn add @khanacademy/perseus@PR2036

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

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

github-actions · 2024-12-19T00:02:10Z

Size Change: +501 B (+0.03%)

Total Size: 1.47 MB

Filename	Size	Change
`packages/perseus/dist/es/index.js`	412 kB	+361 B (+0.09%)
`packages/perseus/dist/es/strings.js`	5.04 kB	+140 B (+2.85%)

ℹ️ 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`	83.1 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`	23.1 kB
`packages/perseus-editor/dist/es/index.js`	689 kB
`packages/perseus-linter/dist/es/index.js`	22.2 kB
`packages/perseus-score/dist/es/index.js`	103 kB
`packages/pure-markdown/dist/es/index.js`	3.66 kB
`packages/simple-markdown/dist/es/index.js`	12.5 kB

_{compressed-size-action}

catandthemachines

Looks good to me! 😉

anakaren-rojas · 2025-01-15T18:37:18Z

packages/perseus/src/strings.ts

@@ -523,6 +548,13 @@ export const strings: {
        "Point %(pointSequence)s on line %(lineNumber)s at %(x)s comma %(y)s.",
    srLinearSystemGrabHandle:
        "Line %(lineNumber)s from %(point1X)s comma %(point1Y)s to %(point2X)s comma %(point2Y)s.",
+    srRayGraph: "A ray on a coordinate plane.",
+    srRayPoints:
+        "The endpoint is at %(point1X)s comma %(point1Y)s and the terminal point is at %(point2X)s comma %(point2Y)s.",


This might've changed since you looked at it last, but the copy is different in the SRUX doc

Thank you for catching that!

nishasy · 2025-01-15T23:55:45Z

The parent pull-request (#2030) has been merged into main, but this branch (sr-ray) now has conflicts with the new base branch. These conflicts must be resolved before checks can complete on this pull-request.

@handeyeco

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/perseus@51.0.0 ### Major Changes - [#2101](#2101) [`9cabe689a`](9cabe68) Thanks [@handeyeco](https://github.com/handeyeco)! - Move scorers and validators to `perseus-score` ### Minor Changes - [#2127](#2127) [`6f2813cfc`](6f2813c) Thanks [@benchristel](https://github.com/benchristel)! - Avoid adding undefined values to objects parsed from Perseus JSON when properties are missing. ### Patch Changes - [#2130](#2130) [`165305e11`](165305e) Thanks [@jeremywiebe](https://github.com/jeremywiebe)! - Change interactive-graph visual regression stories to Storybook's CSF v3 - [#2077](#2077) [`faccc2d59`](faccc2d) Thanks [@benchristel](https://github.com/benchristel)! - Internal: Enable the exhaustive test tool for parsePerseusItem to test articles. - [#2030](#2030) [`d96821e08`](d96821e) Thanks [@nishasy](https://github.com/nishasy)! - [SR] Linear System - add screen reader support for Linear System interactive graph - [#2036](#2036) [`0f8d11c0b`](0f8d11c) Thanks [@nishasy](https://github.com/nishasy)! - [SR] Ray graph - Add screen reader support for Ray interactive graph - [#2109](#2109) [`41ffd4a71`](41ffd4a) Thanks [@dependabot](https://github.com/apps/dependabot)! - Updating our wonder-blocks packages with the latest versions. - Updated dependencies \[[`9cabe689a`](9cabe68), [`41ffd4a71`](41ffd4a)]: - @khanacademy/kmath@0.3.0 - @khanacademy/perseus-core@3.2.0 - @khanacademy/perseus-score@1.1.0 - @khanacademy/math-input@22.2.1 - @khanacademy/kas@0.4.11 - @khanacademy/keypad-context@1.0.14 - @khanacademy/perseus-linter@1.2.13 - @khanacademy/pure-markdown@0.3.22 - @khanacademy/simple-markdown@0.13.15 ## @khanacademy/kmath@0.3.0 ### Minor Changes - [#2101](#2101) [`9cabe689a`](9cabe68) Thanks [@handeyeco](https://github.com/handeyeco)! - Move scorers and validators to `perseus-score` ### Patch Changes - Updated dependencies \[[`9cabe689a`](9cabe68)]: - @khanacademy/perseus-core@3.2.0 ## @khanacademy/perseus-core@3.2.0 ### Minor Changes - [#2101](#2101) [`9cabe689a`](9cabe68) Thanks [@handeyeco](https://github.com/handeyeco)! - Move scorers and validators to `perseus-score` ## @khanacademy/perseus-score@1.1.0 ### Minor Changes - [#2101](#2101) [`9cabe689a`](9cabe68) Thanks [@handeyeco](https://github.com/handeyeco)! - Move scorers and validators to `perseus-score` ### Patch Changes - Updated dependencies \[[`9cabe689a`](9cabe68)]: - @khanacademy/kmath@0.3.0 - @khanacademy/perseus-core@3.2.0 - @khanacademy/kas@0.4.11 ## @khanacademy/kas@0.4.11 ### Patch Changes - Updated dependencies \[[`9cabe689a`](9cabe68)]: - @khanacademy/perseus-core@3.2.0 ## @khanacademy/keypad-context@1.0.14 ### Patch Changes - Updated dependencies \[[`9cabe689a`](9cabe68)]: - @khanacademy/perseus-core@3.2.0 ## @khanacademy/math-input@22.2.1 ### Patch Changes - [#2101](#2101) [`9cabe689a`](9cabe68) Thanks [@handeyeco](https://github.com/handeyeco)! - Move scorers and validators to `perseus-score` - [#2109](#2109) [`41ffd4a71`](41ffd4a) Thanks [@dependabot](https://github.com/apps/dependabot)! - Updating our wonder-blocks packages with the latest versions. - Updated dependencies \[[`9cabe689a`](9cabe68)]: - @khanacademy/perseus-core@3.2.0 - @khanacademy/keypad-context@1.0.14 ## @khanacademy/perseus-editor@17.3.1 ### Patch Changes - [#2101](#2101) [`9cabe689a`](9cabe68) Thanks [@handeyeco](https://github.com/handeyeco)! - Move scorers and validators to `perseus-score` - [#2126](#2126) [`518b005f2`](518b005) Thanks [@benchristel](https://github.com/benchristel)! - Fix a React warning about non-unique component keys in the exercise editor. - [#2109](#2109) [`41ffd4a71`](41ffd4a) Thanks [@dependabot](https://github.com/apps/dependabot)! - Updating our wonder-blocks packages with the latest versions. - Updated dependencies \[[`165305e11`](165305e), [`6f2813cfc`](6f2813c), [`faccc2d59`](faccc2d), [`9cabe689a`](9cabe68), [`d96821e08`](d96821e), [`0f8d11c0b`](0f8d11c), [`41ffd4a71`](41ffd4a)]: - @khanacademy/perseus@51.0.0 - @khanacademy/kmath@0.3.0 - @khanacademy/perseus-core@3.2.0 - @khanacademy/perseus-score@1.1.0 - @khanacademy/math-input@22.2.1 - @khanacademy/kas@0.4.11 - @khanacademy/keypad-context@1.0.14 - @khanacademy/pure-markdown@0.3.22 ## @khanacademy/perseus-linter@1.2.13 ### Patch Changes - Updated dependencies \[[`9cabe689a`](9cabe68)]: - @khanacademy/perseus-core@3.2.0 ## @khanacademy/pure-markdown@0.3.22 ### Patch Changes - Updated dependencies \[[`9cabe689a`](9cabe68)]: - @khanacademy/perseus-core@3.2.0 - @khanacademy/simple-markdown@0.13.15 ## @khanacademy/simple-markdown@0.13.15 ### Patch Changes - Updated dependencies \[[`9cabe689a`](9cabe68)]: - @khanacademy/perseus-core@3.2.0 ## @khanacademy/perseus-dev-ui@5.1.1 ### Patch Changes - [#2101](#2101) [`9cabe689a`](9cabe68) Thanks [@handeyeco](https://github.com/handeyeco)! - Move scorers and validators to `perseus-score` - [#2109](#2109) [`41ffd4a71`](41ffd4a) Thanks [@dependabot](https://github.com/apps/dependabot)! - Updating our wonder-blocks packages with the latest versions. - Updated dependencies \[[`9cabe689a`](9cabe68), [`41ffd4a71`](41ffd4a)]: - @khanacademy/kmath@0.3.0 - @khanacademy/perseus-core@3.2.0 - @khanacademy/math-input@22.2.1 - @khanacademy/kas@0.4.11 - @khanacademy/perseus-linter@1.2.13 - @khanacademy/pure-markdown@0.3.22 - @khanacademy/simple-markdown@0.13.15 Author: khan-actions-bot Reviewers: jeremywiebe Required Reviewers: Approved By: jeremywiebe Checks: ⏭️ Publish npm snapshot, ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ✅ Check builds for changes in size (ubuntu-latest, 20.x), ✅ Lint, Typecheck, Format, and Test (ubuntu-latest, 20.x), ✅ Cypress (ubuntu-latest, 20.x) Pull Request URL: #2117

nishasy added 7 commits December 17, 2024 17:04

docs(changeset): [SR] Linear graph - add grab handle description and …

586c962

…aria lives

Merge branch 'main' into sr-linear-body

ee8b9b2

Linear System SR

a5ef0f8

docs(changeset): [SR] Linear System - add screen reader support for L…

0fbbbfa

…inear System interactive graph

Ray SR

48f17c5

docs(changeset): [SR] Ray graph - Add screen reader support for Ray i…

625c9a4

…nteractive graph

nishasy self-assigned this Dec 18, 2024

nishasy marked this pull request as ready for review December 19, 2024 00:03

nishasy requested review from catandthemachines, anakaren-rojas and a team December 19, 2024 00:03

nishasy added 16 commits December 18, 2024 16:26

Merge branch 'main' into sr-linear-system

951fc96

fix misunderstanding from linear PR. update tests

193ee2a

Merge branch 'sr-linear-system' into sr-ray

1ffe7fa

update test

f754610

Merge branch 'main' into sr-linear-system

c01b4f6

remove contexts from strings

b315fbf

Add full graph description of all interactive elements

7d96885

Merge branch 'sr-linear-system' into sr-ray

8c8cbf5

remove context from strings

33e209a

Add full graph description of interactive element

914ea5a

Rename lineSequence --> lineNumber

9ac9782

Merge branch 'sr-linear-system' into sr-ray

c242323

Create custom matcher for aria descriptions

5b48e40

Include ID in template string

24f71a1

Use srOnly style instead of invalid display hidden

8669b75

use isFinite

ed8ccbd

nishasy added 4 commits January 9, 2025 13:18

Merge branch 'main' into sr-linear-system

4523ca0

Merge branch 'sr-linear-system' into sr-ray

07b60bf

use srOnly style

e625ea6

use new matcher for aria descriptions in test

c56b3c3

catandthemachines approved these changes Jan 15, 2025

View reviewed changes

nishasy added 5 commits January 14, 2025 21:55

handle SR for lines overlapping axes

f8c8c11

Use existing aria description matcher rather than creating a new one

1dcf3fd

correct string in test

d64ac0d

Merge branch 'sr-linear-system' into sr-ray

a2210a5

Fix comments

91f3166

anakaren-rojas approved these changes Jan 15, 2025

View reviewed changes

anakaren-rojas reviewed Jan 15, 2025

View reviewed changes

nishasy added 6 commits January 15, 2025 13:15

Add types

4468c3e

Merge branch 'sr-linear-system' into sr-ray

cbd82f6

fix import

e4a7322

Update grab handle description to match SRUX doc

11f2a4a

Merge branch 'sr-linear-system' into sr-ray

336ac2f

Update copy to match SRUX doc

a164397

Base automatically changed from sr-linear-system to main January 15, 2025 23:55

Merge branch 'main' into sr-ray

e5b8cd1

nishasy merged commit 0f8d11c into main Jan 16, 2025
8 checks passed

nishasy deleted the sr-ray branch January 16, 2025 00:04

nishasy mentioned this pull request Jan 16, 2025

[SR] Linear - Add the interactive elements linear description to the whole graph container #2110

Merged

khan-actions-bot mentioned this pull request Jan 16, 2025

Version Packages #2117

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[SR] Ray graph - Add screen reader support for Ray interactive graph #2036

[SR] Ray graph - Add screen reader support for Ray interactive graph #2036

nishasy commented Dec 18, 2024 •

edited

Loading

github-actions bot commented Dec 19, 2024 •

edited

Loading

github-actions bot commented Dec 19, 2024 •

edited

Loading

catandthemachines left a comment

anakaren-rojas Jan 15, 2025

nishasy Jan 15, 2025

nishasy commented Jan 15, 2025

[SR] Ray graph - Add screen reader support for Ray interactive graph #2036

[SR] Ray graph - Add screen reader support for Ray interactive graph #2036

Conversation

nishasy commented Dec 18, 2024 • edited Loading

Summary:

Test plan:

github-actions bot commented Dec 19, 2024 • edited Loading

npm Snapshot: Published

github-actions bot commented Dec 19, 2024 • edited Loading

catandthemachines left a comment

Choose a reason for hiding this comment

anakaren-rojas Jan 15, 2025

Choose a reason for hiding this comment

nishasy Jan 15, 2025

Choose a reason for hiding this comment

nishasy commented Jan 15, 2025

nishasy commented Dec 18, 2024 •

edited

Loading

github-actions bot commented Dec 19, 2024 •

edited

Loading

github-actions bot commented Dec 19, 2024 •

edited

Loading