[SR] Polygon (limited) - Add screen reader experience #2173

nishasy · 2025-01-30T09:10:44Z

Summary:

Add the aria labels and descriptions for the full graph and interactive elements in the Fixed Polygon graph, based on the SRUX doc.

The Unlimited Polygon SR experience will be added in a separate PR.

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

Test plan:

yarn jest packages/perseus/src/widgets/interactive-graphs/graphs/polygon.test.tsx
yarn jest packages/perseus/src/widgets/interactive-graphs/graphs/utils.test.ts

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

github-actions · 2025-01-30T09:13:31Z

npm Snapshot: Published

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

Example:

yarn add @khanacademy/perseus@PR2173

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

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

github-actions · 2025-01-30T09:13:33Z

Size Change: +1.97 kB (+0.13%)

Total Size: 1.48 MB

Filename	Size	Change
`packages/perseus/dist/es/index.js`	378 kB	+1.76 kB (+0.47%)
`packages/perseus/dist/es/strings.js`	6.02 kB	+208 B (+3.58%)

ℹ️ 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`	86.9 kB
`packages/math-input/dist/es/index.js`	77.6 kB
`packages/math-input/dist/es/strings.js`	1.79 kB
`packages/perseus-core/dist/es/index.js`	46.2 kB
`packages/perseus-editor/dist/es/index.js`	688 kB
`packages/perseus-linter/dist/es/index.js`	22.2 kB
`packages/perseus-score/dist/es/index.js`	115 kB
`packages/pure-markdown/dist/es/index.js`	3.66 kB
`packages/simple-markdown/dist/es/index.js`	12.5 kB

_{compressed-size-action}

nishasy · 2025-02-01T00:54:43Z

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

+        <UnlimitedPolygonGraph {...statefulProps} />
+    ) : (
+        <LimitedPolygonGraph {...statefulProps} />
+    );


I changed this to render as components this so I could use hooks inside each component separately. Otherwise it gives me a conditional hook error and crashes in the editor when changing between fixed and unlimited polygon graph type.

I prefer this over having a whole bunch of hooks up here in the parent that may or may not apply to the two different components and passing them down.

nishasy · 2025-02-01T00:56:50Z

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

+    srPolygonInteractiveElements: string;
+};
+
+function describePolygonGraph(


I didn't export this one for testing, because I tested all these strings inside the LimitedPolygon component since it's called in there.

nishasy · 2025-02-01T00:58:26Z

packages/perseus/src/widgets/interactive-graphs/graphs/screenreader-text.ts

+export function srFormatNumber(
+    a: number,
+    locale: string,
+    maximumFractionDigits?: number,


Adding this parameter so that the screen reader label for the side angles can match what's presented by the "show angles" button (which is only one decimal point).

…ence

SonicScrewdriver · 2025-02-04T20:47:41Z

packages/perseus/src/widgets/interactive-graphs/graphs/utils.ts

@@ -237,3 +239,103 @@ export function getQuadraticXIntercepts(

    return [x1, x2];
 }
+
+export function getAngleFromPoints(points: Coord[], i: number) {


Love this! It might be good to add a comment or two just to help save future devs some time.

SonicScrewdriver · 2025-02-04T20:52:11Z

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

+
+        // Assert
+        expect(polygonGraph).toBeInTheDocument();
+        expect(polygonGraph).toHaveAccessibleDescription(


I love these tests. Very clean and clear about what's being tested.

SonicScrewdriver · 2025-02-04T20:58:51Z

packages/perseus/src/widgets/interactive-graphs/graphs/utils.ts

+    return angle;
+}
+
+export function radianToDegree(radians: number) {


I could have sworn we already had a function for this, possibly in kmath?

Noting here for posterity: kmath had convertDegreesToRadians but not the other way around. I added convertRadiansToDegrees in another PR and pulled it in here.

SonicScrewdriver

Wow! Another set of amazing improvements - great work!

@benchristel

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@53.1.0 ### Minor Changes - [#2194](#2194) [`fd606f43d`](fd606f4) Thanks [@benchristel](https://github.com/benchristel)! - Create a function to get the public options for an interactive graph widget - [#2189](#2189) [`3ba74d173`](3ba74d1) Thanks [@benchristel](https://github.com/benchristel)! - Create a function to get the public options for a Table widget - [#2200](#2200) [`47cebd20f`](47cebd2) Thanks [@nishasy](https://github.com/nishasy)! - [Mafs] Remove mafs flag from Interactive Graph code - [#2207](#2207) [`097176a26`](097176a) Thanks [@benchristel](https://github.com/benchristel)! - Create a function to get the public options for a Matrix widget - [#2216](#2216) [`b3c562ac2`](b3c562a) Thanks [@Myranae](https://github.com/Myranae)! - Implement a widget export function to filter out rubric data from widget options for the Plotter widget - [#2198](#2198) [`649e6b16a`](649e6b1) Thanks [@benchristel](https://github.com/benchristel)! - Create a function to get the public options for a Grapher widget - [#2217](#2217) [`07779783a`](0777978) Thanks [@SonicScrewdriver](https://github.com/SonicScrewdriver)! - Move coord reverse logic for Angle graphs into scoring logic - [#2183](#2183) [`cac39013b`](cac3901) Thanks [@Myranae](https://github.com/Myranae)! - Implement a widget export function to filter out rubric data from widget options for the Radio widget - [#2188](#2188) [`163dd67d2`](163dd67) Thanks [@Myranae](https://github.com/Myranae)! - Implement a widget export function to retrieve public widget options for the IFrame widget ### Patch Changes - [#2107](#2107) [`b44c8cb0a`](b44c8cb) Thanks [@mark-fitzgerald](https://github.com/mark-fitzgerald)! - [Storybook] Configure Aphrodite to Not Append !important to Styles [Radio] Bugfix - Incorrect choice showing as blue instead of red - [#2191](#2191) [`55317d65e`](55317d6) Thanks [@nishasy](https://github.com/nishasy)! - [SR] Polygon (unlimited) - Add screen reader experience - [#2220](#2220) [`6b8185885`](6b81858) Thanks [@nishasy](https://github.com/nishasy)! - [SR] Stop graph from exposing random empty image to screen readers - [#2185](#2185) [`f83a1fb03`](f83a1fb) Thanks [@mark-fitzgerald](https://github.com/mark-fitzgerald)! - [Bugfix] Zoomable content within a collapsed parent not showing when expanded (Mobile only) - [#2222](#2222) [`55be8a775`](55be8a7) Thanks [@dependabot](https://github.com/apps/dependabot)! - Updating wonderblocks package versions. - [#2173](#2173) [`10ee67a9c`](10ee67a) Thanks [@nishasy](https://github.com/nishasy)! - [SR] Polygon - Add screen reader experience - [#2196](#2196) [`b07f2936f`](b07f293) Thanks [@nishasy](https://github.com/nishasy)! - [SR] Segment - fix 2 strings with typos - Updated dependencies \[[`fd606f43d`](fd606f4), [`3ba74d173`](3ba74d1), [`7ec6c2fbc`](7ec6c2f), [`097176a26`](097176a), [`b3c562ac2`](b3c562a), [`55be8a775`](55be8a7), [`649e6b16a`](649e6b1), [`07779783a`](0777978), [`cac39013b`](cac3901), [`163dd67d2`](163dd67)]: - @khanacademy/perseus-core@3.5.0 - @khanacademy/kmath@0.3.3 - @khanacademy/math-input@22.2.4 - @khanacademy/perseus-score@2.2.0 - @khanacademy/kas@0.4.14 - @khanacademy/keypad-context@1.0.17 - @khanacademy/perseus-linter@1.2.16 - @khanacademy/pure-markdown@0.3.25 - @khanacademy/simple-markdown@0.13.18 ## @khanacademy/perseus-core@3.5.0 ### Minor Changes - [#2194](#2194) [`fd606f43d`](fd606f4) Thanks [@benchristel](https://github.com/benchristel)! - Create a function to get the public options for an interactive graph widget - [#2189](#2189) [`3ba74d173`](3ba74d1) Thanks [@benchristel](https://github.com/benchristel)! - Create a function to get the public options for a Table widget - [#2207](#2207) [`097176a26`](097176a) Thanks [@benchristel](https://github.com/benchristel)! - Create a function to get the public options for a Matrix widget - [#2216](#2216) [`b3c562ac2`](b3c562a) Thanks [@Myranae](https://github.com/Myranae)! - Implement a widget export function to filter out rubric data from widget options for the Plotter widget - [#2198](#2198) [`649e6b16a`](649e6b1) Thanks [@benchristel](https://github.com/benchristel)! - Create a function to get the public options for a Grapher widget - [#2217](#2217) [`07779783a`](0777978) Thanks [@SonicScrewdriver](https://github.com/SonicScrewdriver)! - Move coord reverse logic for Angle graphs into scoring logic - [#2183](#2183) [`cac39013b`](cac3901) Thanks [@Myranae](https://github.com/Myranae)! - Implement a widget export function to filter out rubric data from widget options for the Radio widget - [#2188](#2188) [`163dd67d2`](163dd67) Thanks [@Myranae](https://github.com/Myranae)! - Implement a widget export function to retrieve public widget options for the IFrame widget ## @khanacademy/perseus-editor@17.6.0 ### Minor Changes - [#2200](#2200) [`47cebd20f`](47cebd2) Thanks [@nishasy](https://github.com/nishasy)! - [Mafs] Remove mafs flag from Interactive Graph code ### Patch Changes - [#2190](#2190) [`7ec6c2fbc`](7ec6c2f) Thanks [@nishasy](https://github.com/nishasy)! - Add convertRadiansToDegrees function to kmath - [#2222](#2222) [`55be8a775`](55be8a7) Thanks [@dependabot](https://github.com/apps/dependabot)! - Updating wonderblocks package versions. - [#2208](#2208) [`6a0bf7a52`](6a0bf7a) Thanks [@nishasy](https://github.com/nishasy)! - [SR Tree] Handle SR Tree when multiple editors are on the page - [#2193](#2193) [`8d569b74c`](8d569b7) Thanks [@beaesguerra](https://github.com/beaesguerra)! - Update internal addStyle variable name to address aphrodite-add-style-variable-name linting rule - Updated dependencies \[[`fd606f43d`](fd606f4), [`b44c8cb0a`](b44c8cb), [`3ba74d173`](3ba74d1), [`55317d65e`](55317d6), [`47cebd20f`](47cebd2), [`7ec6c2fbc`](7ec6c2f), [`6b8185885`](6b81858), [`f83a1fb03`](f83a1fb), [`097176a26`](097176a), [`b3c562ac2`](b3c562a), [`55be8a775`](55be8a7), [`649e6b16a`](649e6b1), [`07779783a`](0777978), [`cac39013b`](cac3901), [`10ee67a9c`](10ee67a), [`163dd67d2`](163dd67), [`b07f2936f`](b07f293)]: - @khanacademy/perseus@53.1.0 - @khanacademy/perseus-core@3.5.0 - @khanacademy/kmath@0.3.3 - @khanacademy/math-input@22.2.4 - @khanacademy/perseus-score@2.2.0 - @khanacademy/kas@0.4.14 - @khanacademy/keypad-context@1.0.17 - @khanacademy/pure-markdown@0.3.25 ## @khanacademy/perseus-score@2.2.0 ### Minor Changes - [#2217](#2217) [`07779783a`](0777978) Thanks [@SonicScrewdriver](https://github.com/SonicScrewdriver)! - Move coord reverse logic for Angle graphs into scoring logic ### Patch Changes - Updated dependencies \[[`fd606f43d`](fd606f4), [`3ba74d173`](3ba74d1), [`7ec6c2fbc`](7ec6c2f), [`097176a26`](097176a), [`b3c562ac2`](b3c562a), [`649e6b16a`](649e6b1), [`07779783a`](0777978), [`cac39013b`](cac3901), [`163dd67d2`](163dd67)]: - @khanacademy/perseus-core@3.5.0 - @khanacademy/kmath@0.3.3 - @khanacademy/kas@0.4.14 ## @khanacademy/kas@0.4.14 ### Patch Changes - Updated dependencies \[[`fd606f43d`](fd606f4), [`3ba74d173`](3ba74d1), [`097176a26`](097176a), [`b3c562ac2`](b3c562a), [`649e6b16a`](649e6b1), [`07779783a`](0777978), [`cac39013b`](cac3901), [`163dd67d2`](163dd67)]: - @khanacademy/perseus-core@3.5.0 ## @khanacademy/keypad-context@1.0.17 ### Patch Changes - Updated dependencies \[[`fd606f43d`](fd606f4), [`3ba74d173`](3ba74d1), [`097176a26`](097176a), [`b3c562ac2`](b3c562a), [`649e6b16a`](649e6b1), [`07779783a`](0777978), [`cac39013b`](cac3901), [`163dd67d2`](163dd67)]: - @khanacademy/perseus-core@3.5.0 ## @khanacademy/kmath@0.3.3 ### Patch Changes - [#2190](#2190) [`7ec6c2fbc`](7ec6c2f) Thanks [@nishasy](https://github.com/nishasy)! - Add convertRadiansToDegrees function to kmath - Updated dependencies \[[`fd606f43d`](fd606f4), [`3ba74d173`](3ba74d1), [`097176a26`](097176a), [`b3c562ac2`](b3c562a), [`649e6b16a`](649e6b1), [`07779783a`](0777978), [`cac39013b`](cac3901), [`163dd67d2`](163dd67)]: - @khanacademy/perseus-core@3.5.0 ## @khanacademy/math-input@22.2.4 ### Patch Changes - [#2222](#2222) [`55be8a775`](55be8a7) Thanks [@dependabot](https://github.com/apps/dependabot)! - Updating wonderblocks package versions. - Updated dependencies \[[`fd606f43d`](fd606f4), [`3ba74d173`](3ba74d1), [`097176a26`](097176a), [`b3c562ac2`](b3c562a), [`649e6b16a`](649e6b1), [`07779783a`](0777978), [`cac39013b`](cac3901), [`163dd67d2`](163dd67)]: - @khanacademy/perseus-core@3.5.0 - @khanacademy/keypad-context@1.0.17 ## @khanacademy/perseus-linter@1.2.16 ### Patch Changes - Updated dependencies \[[`fd606f43d`](fd606f4), [`3ba74d173`](3ba74d1), [`097176a26`](097176a), [`b3c562ac2`](b3c562a), [`649e6b16a`](649e6b1), [`07779783a`](0777978), [`cac39013b`](cac3901), [`163dd67d2`](163dd67)]: - @khanacademy/perseus-core@3.5.0 ## @khanacademy/pure-markdown@0.3.25 ### Patch Changes - Updated dependencies \[[`fd606f43d`](fd606f4), [`3ba74d173`](3ba74d1), [`097176a26`](097176a), [`b3c562ac2`](b3c562a), [`649e6b16a`](649e6b1), [`07779783a`](0777978), [`cac39013b`](cac3901), [`163dd67d2`](163dd67)]: - @khanacademy/perseus-core@3.5.0 - @khanacademy/simple-markdown@0.13.18 ## @khanacademy/simple-markdown@0.13.18 ### Patch Changes - Updated dependencies \[[`fd606f43d`](fd606f4), [`3ba74d173`](3ba74d1), [`097176a26`](097176a), [`b3c562ac2`](b3c562a), [`649e6b16a`](649e6b1), [`07779783a`](0777978), [`cac39013b`](cac3901), [`163dd67d2`](163dd67)]: - @khanacademy/perseus-core@3.5.0 ## @khanacademy/perseus-dev-ui@5.2.0 ### Minor Changes - [#2200](#2200) [`47cebd20f`](47cebd2) Thanks [@nishasy](https://github.com/nishasy)! - [Mafs] Remove mafs flag from Interactive Graph code ### Patch Changes - [#2107](#2107) [`b44c8cb0a`](b44c8cb) Thanks [@mark-fitzgerald](https://github.com/mark-fitzgerald)! - [Storybook] Configure Aphrodite to Not Append !important to Styles [Radio] Bugfix - Incorrect choice showing as blue instead of red - [#2222](#2222) [`55be8a775`](55be8a7) Thanks [@dependabot](https://github.com/apps/dependabot)! - Updating wonderblocks package versions. - Updated dependencies \[[`fd606f43d`](fd606f4), [`3ba74d173`](3ba74d1), [`7ec6c2fbc`](7ec6c2f), [`097176a26`](097176a), [`b3c562ac2`](b3c562a), [`55be8a775`](55be8a7), [`649e6b16a`](649e6b1), [`07779783a`](0777978), [`cac39013b`](cac3901), [`163dd67d2`](163dd67)]: - @khanacademy/perseus-core@3.5.0 - @khanacademy/kmath@0.3.3 - @khanacademy/math-input@22.2.4 - @khanacademy/kas@0.4.14 - @khanacademy/perseus-linter@1.2.16 - @khanacademy/pure-markdown@0.3.25 - @khanacademy/simple-markdown@0.13.18 Author: khan-actions-bot Reviewers: benchristel Required Reviewers: Approved By: benchristel Checks: ⏭️ Publish npm snapshot, ✅ Check builds for changes in size (ubuntu-latest, 20.x), ✅ Lint, Typecheck, Format, and Test (ubuntu-latest, 20.x), ✅ Cypress (ubuntu-latest, 20.x), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x) Pull Request URL: #2186

[sr-polygon] [SR] Polygon - Add screen reader experience

595ffd2

nishasy self-assigned this Jan 30, 2025

nishasy added 6 commits January 31, 2025 13:34

[sr-polygon] Change this to Limited Polygon only

e5531d1

[sr-polygon] Add whole movable polygon aria label

6be1ed8

[sr-polygon] Render as components so that we can use hooks inside

0dfecbd

[sr-polygon] Handle aria-live values for interactive elements

708d821

[sr-polygon] Merge branch 'main' into sr-polygon

09eb34e

[sr-polygon] Add tests

0b8c5ed

nishasy commented Feb 1, 2025

View reviewed changes

[sr-polygon] docs(changeset): [SR] Polygon - Add screen reader experi…

05a1319

…ence

nishasy changed the title ~~DRAFT!! DO NOT REVIEW - [SR] Polygon - Add screen reader experience~~ [SR] Polygon - Add screen reader experience Feb 1, 2025

nishasy changed the title ~~[SR] Polygon - Add screen reader experience~~ [SR] Polygon (not limited - Add screen reader experience Feb 1, 2025

nishasy changed the title ~~[SR] Polygon (not limited - Add screen reader experience~~ [SR] Polygon (limited) - Add screen reader experience Feb 1, 2025

nishasy requested review from SonicScrewdriver, catandthemachines and a team February 1, 2025 01:03

nishasy marked this pull request as ready for review February 1, 2025 01:04

SonicScrewdriver reviewed Feb 4, 2025

View reviewed changes

SonicScrewdriver approved these changes Feb 4, 2025

View reviewed changes

nishasy added 3 commits February 4, 2025 14:02

[sr-polygon] Add clarifying comments to getAngleFromPoints function

9117d5f

[sr-polygon] Merge branch 'main' into sr-polygon

d795acc

[sr-polygon] Use kmath convertRadiansToDegrees

299289f

nishasy merged commit 10ee67a into main Feb 4, 2025
7 of 8 checks passed

nishasy deleted the sr-polygon branch February 4, 2025 22:43

khan-actions-bot mentioned this pull request Feb 4, 2025

Version Packages #2186

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[SR] Polygon (limited) - Add screen reader experience #2173

[SR] Polygon (limited) - Add screen reader experience #2173

nishasy commented Jan 30, 2025 •

edited

Loading

github-actions bot commented Jan 30, 2025 •

edited

Loading

github-actions bot commented Jan 30, 2025 •

edited

Loading

nishasy Feb 1, 2025

nishasy Feb 1, 2025

nishasy Feb 1, 2025

SonicScrewdriver Feb 4, 2025

SonicScrewdriver Feb 4, 2025

SonicScrewdriver Feb 4, 2025

nishasy Feb 4, 2025

SonicScrewdriver left a comment

[SR] Polygon (limited) - Add screen reader experience #2173

[SR] Polygon (limited) - Add screen reader experience #2173

Conversation

nishasy commented Jan 30, 2025 • edited Loading

Summary:

Test plan:

github-actions bot commented Jan 30, 2025 • edited Loading

npm Snapshot: Published

github-actions bot commented Jan 30, 2025 • edited Loading

nishasy Feb 1, 2025

Choose a reason for hiding this comment

nishasy Feb 1, 2025

Choose a reason for hiding this comment

nishasy Feb 1, 2025

Choose a reason for hiding this comment

SonicScrewdriver Feb 4, 2025

Choose a reason for hiding this comment

SonicScrewdriver Feb 4, 2025

Choose a reason for hiding this comment

SonicScrewdriver Feb 4, 2025

Choose a reason for hiding this comment

nishasy Feb 4, 2025

Choose a reason for hiding this comment

SonicScrewdriver left a comment

Choose a reason for hiding this comment

nishasy commented Jan 30, 2025 •

edited

Loading

github-actions bot commented Jan 30, 2025 •

edited

Loading

github-actions bot commented Jan 30, 2025 •

edited

Loading