[SR] Linear - Add the interactive elements linear description to the whole graph container #2110
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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.
…inear System interactive graph
…scription to the whole graph container
npm Snapshot: PublishedGood news!! We've packaged up the latest commit from this PR (05e1c6b) and published it to npm. You Example: yarn add @khanacademy/perseus@PR2110If you are working in Khan Academy's webapp, you can run: ./dev/tools/bump_perseus_version.sh -t PR2110 |
|
Size Change: +94 B (+0.01%) Total Size: 1.47 MB
ℹ️ View Unchanged
|
|
The parent pull-request (#2036) has been merged into |
catandthemachines
requested changes
Jan 22, 2025
| @@ -99,3 +95,52 @@ const LinearGraph = (props: LinearGraphProps, key: number) => { | |||
| </g> | |||
| ); | |||
| }; | |||
|
|
|||
| function LinearGraphDescription({state}: {state: LinearGraphState}) { | |||
| // The reason that LinearGraphDescription is a component (rather than a | |||
There was a problem hiding this comment.
Can you pass in the i18n content into this function? Typically if you have a function that relies on the content or result of a hook you can avoid turning it into a component by simply passing the content through a parameter.
catandthemachines
approved these changes
Jan 22, 2025
…nteractive-elements
Merged
catandthemachines
added a commit
that referenced
this pull request
Jan 27, 2025
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] ### Major Changes - [#1965](#1965) [`0f2bec314`](0f2bec3) Thanks [@Myranae](https://github.com/Myranae)! - Refactor the LabelImage widget to separate out answers from userInput into scoringData - [#2134](#2134) [`117e78d03`](117e78d) Thanks [@handeyeco](https://github.com/handeyeco)! - Move widget ID utils to perseus-core - [#2153](#2153) [`29a1c656e`](29a1c65) Thanks [@jeremywiebe](https://github.com/jeremywiebe)! - Rename all instances of the term "ScoringData" back to "Rubric" - [#2135](#2135) [`7a984eba6`](7a984eb) Thanks [@handeyeco](https://github.com/handeyeco)! - Move Expression WidgetOptions logic to core ### Minor Changes - [#2002](#2002) [`a1e22a4e3`](a1e22a4) Thanks [@jeremywiebe](https://github.com/jeremywiebe)! - Add and improve types for scoring and validation - [#2155](#2155) [`0df0b1940`](0df0b19) Thanks [@benchristel](https://github.com/benchristel)! - Move `parsePerseusItem`, `parseAndMigratePerseusItem`, `parseAndMigratePerseusArticle`, `isSuccess`, and `isFailure` to the `perseus-core` package, and deprecate the equivalent exports from the `perseus` package. - [#2032](#2032) [`22d108fdc`](22d108f) Thanks [@anakaren-rojas](https://github.com/anakaren-rojas)! - adds aria labels to line segment - [#2038](#2038) [`e6f7cc91e`](e6f7cc9) Thanks [@Myranae](https://github.com/Myranae)! - Fix some naming discrepancies related to validation and simplify Matcher ScoringData type - [#2083](#2083) [`4c10af109`](4c10af1) Thanks [@jeremywiebe](https://github.com/jeremywiebe)! - Use empty widgets check in scoring function - [#2000](#2000) [`0db68d222`](0db68d2) Thanks [@jeremywiebe](https://github.com/jeremywiebe)! - Change empty widgets check in Renderer to depend only on data available (and not on scoring data) - [#2137](#2137) [`b4b3a3dbb`](b4b3a3d) Thanks [@Myranae](https://github.com/Myranae)! - Implement a widget export function to filter out rubric data from widget options for the orderer widget - [#2006](#2006) [`879d2a501`](879d2a5) Thanks [@Myranae](https://github.com/Myranae)! - Rename usages of rubric to scoringData - [#2139](#2139) [`32cc4a45b`](32cc4a4) Thanks [@Myranae](https://github.com/Myranae)! - Implement a widget export function to filter out rubric data from widget options for the Expression widget - [#2016](#2016) [`55ad836c6`](55ad836) Thanks [@Myranae](https://github.com/Myranae)! - Introduces a validation function for the label-image widget (extracted from label-image scoring function). ### Patch Changes - [#2142](#2142) [`d7bcb14c3`](d7bcb14) Thanks [@handeyeco](https://github.com/handeyeco)! - Move Radio upgrade logic to Perseus Core - [#2122](#2122) [`1a75ca628`](1a75ca6) Thanks [@jeremywiebe](https://github.com/jeremywiebe)! - Type and test fixes for new MockWidget (isolating to be seen only in tests) - [#2143](#2143) [`459c25074`](459c250) Thanks [@handeyeco](https://github.com/handeyeco)! - Move Passage widgets upgrade logic to Perseus Core - [#1997](#1997) [`0464a760f`](0464a76) Thanks [@Myranae](https://github.com/Myranae)! - Remove unused CS Program rubric type - [#2110](#2110) [`e2f2cee9f`](e2f2cee) Thanks [@nishasy](https://github.com/nishasy)! - [SR] Linear - Add the interactive elements linear description to the whole graph container - [#2136](#2136) [`ffaa3904a`](ffaa390) Thanks [@nishasy](https://github.com/nishasy)! - [SR] Quadratic - add screen reader support for Quadratic interactive graph - [#1996](#1996) [`b6623bb56`](b6623bb) Thanks [@Myranae](https://github.com/Myranae)! - Remove unused iframe rubric type - [#2124](#2124) [`bdbdafe5d`](bdbdafe) Thanks [@dependabot](https://github.com/apps/dependabot)! - Updating wonder-blocks dependences. - [#2152](#2152) [`f8c9d3574`](f8c9d35) Thanks [@Myranae](https://github.com/Myranae)! - Move the categorizer, orderer, and expression public widget options functions from perseus package to their widget folders in perseus-core - [#1995](#1995) [`99cd254de`](99cd254) Thanks [@jeremywiebe](https://github.com/jeremywiebe)! - TESTS: swap input-number out of renderer tests as it is deprecated - [#2141](#2141) [`1355d6cfc`](1355d6c) Thanks [@handeyeco](https://github.com/handeyeco)! - Move Measurer upgrade logic to Perseus Core - Updated dependencies \[[`8f8955718`](8f89557), [`d7bcb14c3`](d7bcb14), [`685774f2e`](685774f), [`8a489600e`](8a48960), [`1a75ca628`](1a75ca6), [`459c25074`](459c250), [`0df0b1940`](0df0b19), [`dc8118aa1`](dc8118a), [`82fa90299`](82fa902), [`b4b3a3dbb`](b4b3a3d), [`117e78d03`](117e78d), [`29a1c656e`](29a1c65), [`7a984eba6`](7a984eb), [`f8c9d3574`](f8c9d35), [`1355d6cfc`](1355d6c), [`75f43a8f4`](75f43a8), [`32cc4a45b`](32cc4a4), [`ebf3695b6`](ebf3695)]: - @khanacademy/[email protected] - @khanacademy/[email protected] - @khanacademy/[email protected] - @khanacademy/[email protected] - @khanacademy/[email protected] - @khanacademy/[email protected] - @khanacademy/[email protected] - @khanacademy/[email protected] - @khanacademy/[email protected] ## @khanacademy/[email protected] ### Major Changes - [#2153](#2153) [`29a1c656e`](29a1c65) Thanks [@jeremywiebe](https://github.com/jeremywiebe)! - Rename all instances of the term "ScoringData" back to "Rubric" ### Patch Changes - Updated dependencies \[[`8f8955718`](8f89557), [`d7bcb14c3`](d7bcb14), [`685774f2e`](685774f), [`8a489600e`](8a48960), [`1a75ca628`](1a75ca6), [`459c25074`](459c250), [`0df0b1940`](0df0b19), [`dc8118aa1`](dc8118a), [`82fa90299`](82fa902), [`b4b3a3dbb`](b4b3a3d), [`117e78d03`](117e78d), [`7a984eba6`](7a984eb), [`f8c9d3574`](f8c9d35), [`1355d6cfc`](1355d6c), [`75f43a8f4`](75f43a8), [`32cc4a45b`](32cc4a4), [`ebf3695b6`](ebf3695)]: - @khanacademy/[email protected] - @khanacademy/[email protected] - @khanacademy/[email protected] ## @khanacademy/[email protected] ### Minor Changes - [#2158](#2158) [`8f8955718`](8f89557) Thanks [@jeremywiebe](https://github.com/jeremywiebe)! - Re-export widget id support function: addWidget - [#2142](#2142) [`d7bcb14c3`](d7bcb14) Thanks [@handeyeco](https://github.com/handeyeco)! - Move Radio upgrade logic to Perseus Core - [#2148](#2148) [`685774f2e`](685774f) Thanks [@handeyeco](https://github.com/handeyeco)! - Move Matcher upgrade logic to Perseus Core - [#2145](#2145) [`8a489600e`](8a48960) Thanks [@handeyeco](https://github.com/handeyeco)! - Move simple widget upgrade logic to Perseus Core (pt 2) - [#2143](#2143) [`459c25074`](459c250) Thanks [@handeyeco](https://github.com/handeyeco)! - Move Passage widgets upgrade logic to Perseus Core - [#2155](#2155) [`0df0b1940`](0df0b19) Thanks [@benchristel](https://github.com/benchristel)! - Move `parsePerseusItem`, `parseAndMigratePerseusItem`, `parseAndMigratePerseusArticle`, `isSuccess`, and `isFailure` to the `perseus-core` package, and deprecate the equivalent exports from the `perseus` package. - [#2144](#2144) [`dc8118aa1`](dc8118a) Thanks [@handeyeco](https://github.com/handeyeco)! - Move simple widget upgrade logic to Perseus Core (pt 1) - [#2150](#2150) [`82fa90299`](82fa902) Thanks [@handeyeco](https://github.com/handeyeco)! - Move InteractiveGraph widget upgrade to Perseus Core - [#2134](#2134) [`117e78d03`](117e78d) Thanks [@handeyeco](https://github.com/handeyeco)! - Move widget ID utils to perseus-core - [#2135](#2135) [`7a984eba6`](7a984eb) Thanks [@handeyeco](https://github.com/handeyeco)! - Move Expression WidgetOptions logic to core - [#2141](#2141) [`1355d6cfc`](1355d6c) Thanks [@handeyeco](https://github.com/handeyeco)! - Move Measurer upgrade logic to Perseus Core - [#2149](#2149) [`75f43a8f4`](75f43a8) Thanks [@handeyeco](https://github.com/handeyeco)! - Move Table upgrade logic to Perseus Core - [#2147](#2147) [`ebf3695b6`](ebf3695) Thanks [@handeyeco](https://github.com/handeyeco)! - Move upgrade logic for NumberLine to Perseus Core ### Patch Changes - [#2122](#2122) [`1a75ca628`](1a75ca6) Thanks [@jeremywiebe](https://github.com/jeremywiebe)! - Type and test fixes for new MockWidget (isolating to be seen only in tests) - [#2137](#2137) [`b4b3a3dbb`](b4b3a3d) Thanks [@Myranae](https://github.com/Myranae)! - Move util files out of widget folder in perseus package to utils folder in perseus-core - [#2152](#2152) [`f8c9d3574`](f8c9d35) Thanks [@Myranae](https://github.com/Myranae)! - Move the categorizer, orderer, and expression public widget options functions from perseus package to their widget folders in perseus-core - [#2139](#2139) [`32cc4a45b`](32cc4a4) Thanks [@Myranae](https://github.com/Myranae)! - Move util files out of widget folder in perseus package to utils folder in perseus-core ## @khanacademy/[email protected] ### Minor Changes - [#2015](#2015) [`46623c8f1`](46623c8) Thanks [@mark-fitzgerald](https://github.com/mark-fitzgerald)! - [Numeric Input] Re-organize editor and improve its UI - [#2015](#2015) [`46623c8f1`](46623c8) Thanks [@mark-fitzgerald](https://github.com/mark-fitzgerald)! - [Numeric Input] - Adjust editor to organize settings more logically ### Patch Changes - [#2142](#2142) [`d7bcb14c3`](d7bcb14) Thanks [@handeyeco](https://github.com/handeyeco)! - Move Radio upgrade logic to Perseus Core - [#2148](#2148) [`685774f2e`](685774f) Thanks [@handeyeco](https://github.com/handeyeco)! - Move Matcher upgrade logic to Perseus Core - [#2145](#2145) [`8a489600e`](8a48960) Thanks [@handeyeco](https://github.com/handeyeco)! - Move simple widget upgrade logic to Perseus Core (pt 2) - [#2122](#2122) [`1a75ca628`](1a75ca6) Thanks [@jeremywiebe](https://github.com/jeremywiebe)! - Type and test fixes for new MockWidget (isolating to be seen only in tests) - [#2143](#2143) [`459c25074`](459c250) Thanks [@handeyeco](https://github.com/handeyeco)! - Move Passage widgets upgrade logic to Perseus Core - [#2144](#2144) [`dc8118aa1`](dc8118a) Thanks [@handeyeco](https://github.com/handeyeco)! - Move simple widget upgrade logic to Perseus Core (pt 1) - [#2150](#2150) [`82fa90299`](82fa902) Thanks [@handeyeco](https://github.com/handeyeco)! - Move InteractiveGraph widget upgrade to Perseus Core - [#1965](#1965) [`0f2bec314`](0f2bec3) Thanks [@Myranae](https://github.com/Myranae)! - Refactor the LabelImage widget to separate out answers from userInput into scoringData - [#2124](#2124) [`bdbdafe5d`](bdbdafe) Thanks [@dependabot](https://github.com/apps/dependabot)! - Updating wonder-blocks dependences. - [#2135](#2135) [`7a984eba6`](7a984eb) Thanks [@handeyeco](https://github.com/handeyeco)! - Move Expression WidgetOptions logic to core - [#2141](#2141) [`1355d6cfc`](1355d6c) Thanks [@handeyeco](https://github.com/handeyeco)! - Move Measurer upgrade logic to Perseus Core - [#2149](#2149) [`75f43a8f4`](75f43a8) Thanks [@handeyeco](https://github.com/handeyeco)! - Move Table upgrade logic to Perseus Core - [#2147](#2147) [`ebf3695b6`](ebf3695) Thanks [@handeyeco](https://github.com/handeyeco)! - Move upgrade logic for NumberLine to Perseus Core - Updated dependencies \[[`8f8955718`](8f89557), [`d7bcb14c3`](d7bcb14), [`685774f2e`](685774f), [`8a489600e`](8a48960), [`1a75ca628`](1a75ca6), [`459c25074`](459c250), [`a1e22a4e3`](a1e22a4), [`0464a760f`](0464a76), [`0df0b1940`](0df0b19), [`22d108fdc`](22d108f), [`dc8118aa1`](dc8118a), [`82fa90299`](82fa902), [`e2f2cee9f`](e2f2cee), [`ffaa3904a`](ffaa390), [`0f2bec314`](0f2bec3), [`b4b3a3dbb`](b4b3a3d), [`e6f7cc91e`](e6f7cc9), [`4c10af109`](4c10af1), [`b6623bb56`](b6623bb), [`0db68d222`](0db68d2), [`bdbdafe5d`](bdbdafe), [`117e78d03`](117e78d), [`b4b3a3dbb`](b4b3a3d), [`29a1c656e`](29a1c65), [`7a984eba6`](7a984eb), [`f8c9d3574`](f8c9d35), [`879d2a501`](879d2a5), [`32cc4a45b`](32cc4a4), [`99cd254de`](99cd254), [`1355d6cfc`](1355d6c), [`75f43a8f4`](75f43a8), [`32cc4a45b`](32cc4a4), [`55ad836c6`](55ad836), [`ebf3695b6`](ebf3695)]: - @khanacademy/[email protected] - @khanacademy/[email protected] - @khanacademy/[email protected] - @khanacademy/[email protected] - @khanacademy/[email protected] - @khanacademy/[email protected] - @khanacademy/[email protected] - @khanacademy/[email protected] ## @khanacademy/[email protected] ### Patch Changes - Updated dependencies \[[`8f8955718`](8f89557), [`d7bcb14c3`](d7bcb14), [`685774f2e`](685774f), [`8a489600e`](8a48960), [`1a75ca628`](1a75ca6), [`459c25074`](459c250), [`0df0b1940`](0df0b19), [`dc8118aa1`](dc8118a), [`82fa90299`](82fa902), [`b4b3a3dbb`](b4b3a3d), [`117e78d03`](117e78d), [`7a984eba6`](7a984eb), [`f8c9d3574`](f8c9d35), [`1355d6cfc`](1355d6c), [`75f43a8f4`](75f43a8), [`32cc4a45b`](32cc4a4), [`ebf3695b6`](ebf3695)]: - @khanacademy/[email protected] ## @khanacademy/[email protected] ### Patch Changes - Updated dependencies \[[`8f8955718`](8f89557), [`d7bcb14c3`](d7bcb14), [`685774f2e`](685774f), [`8a489600e`](8a48960), [`1a75ca628`](1a75ca6), [`459c25074`](459c250), [`0df0b1940`](0df0b19), [`dc8118aa1`](dc8118a), [`82fa90299`](82fa902), [`b4b3a3dbb`](b4b3a3d), [`117e78d03`](117e78d), [`7a984eba6`](7a984eb), [`f8c9d3574`](f8c9d35), [`1355d6cfc`](1355d6c), [`75f43a8f4`](75f43a8), [`32cc4a45b`](32cc4a4), [`ebf3695b6`](ebf3695)]: - @khanacademy/[email protected] ## @khanacademy/[email protected] ### Patch Changes - Updated dependencies \[[`8f8955718`](8f89557), [`d7bcb14c3`](d7bcb14), [`685774f2e`](685774f), [`8a489600e`](8a48960), [`1a75ca628`](1a75ca6), [`459c25074`](459c250), [`0df0b1940`](0df0b19), [`dc8118aa1`](dc8118a), [`82fa90299`](82fa902), [`b4b3a3dbb`](b4b3a3d), [`117e78d03`](117e78d), [`7a984eba6`](7a984eb), [`f8c9d3574`](f8c9d35), [`1355d6cfc`](1355d6c), [`75f43a8f4`](75f43a8), [`32cc4a45b`](32cc4a4), [`ebf3695b6`](ebf3695)]: - @khanacademy/[email protected] ## @khanacademy/[email protected] ### Patch Changes - Updated dependencies \[[`8f8955718`](8f89557), [`d7bcb14c3`](d7bcb14), [`685774f2e`](685774f), [`8a489600e`](8a48960), [`1a75ca628`](1a75ca6), [`459c25074`](459c250), [`0df0b1940`](0df0b19), [`dc8118aa1`](dc8118a), [`82fa90299`](82fa902), [`b4b3a3dbb`](b4b3a3d), [`117e78d03`](117e78d), [`7a984eba6`](7a984eb), [`f8c9d3574`](f8c9d35), [`1355d6cfc`](1355d6c), [`75f43a8f4`](75f43a8), [`32cc4a45b`](32cc4a4), [`ebf3695b6`](ebf3695)]: - @khanacademy/[email protected] - @khanacademy/[email protected] ## @khanacademy/[email protected] ### Patch Changes - Updated dependencies \[[`8f8955718`](8f89557), [`d7bcb14c3`](d7bcb14), [`685774f2e`](685774f), [`8a489600e`](8a48960), [`1a75ca628`](1a75ca6), [`459c25074`](459c250), [`0df0b1940`](0df0b19), [`dc8118aa1`](dc8118a), [`82fa90299`](82fa902), [`b4b3a3dbb`](b4b3a3d), [`117e78d03`](117e78d), [`7a984eba6`](7a984eb), [`f8c9d3574`](f8c9d35), [`1355d6cfc`](1355d6c), [`75f43a8f4`](75f43a8), [`32cc4a45b`](32cc4a4), [`ebf3695b6`](ebf3695)]: - @khanacademy/[email protected] ## @khanacademy/[email protected] ### Patch Changes - Updated dependencies \[[`8f8955718`](8f89557), [`d7bcb14c3`](d7bcb14), [`685774f2e`](685774f), [`8a489600e`](8a48960), [`1a75ca628`](1a75ca6), [`459c25074`](459c250), [`0df0b1940`](0df0b19), [`dc8118aa1`](dc8118a), [`82fa90299`](82fa902), [`b4b3a3dbb`](b4b3a3d), [`117e78d03`](117e78d), [`7a984eba6`](7a984eb), [`f8c9d3574`](f8c9d35), [`1355d6cfc`](1355d6c), [`75f43a8f4`](75f43a8), [`32cc4a45b`](32cc4a4), [`ebf3695b6`](ebf3695)]: - @khanacademy/[email protected] - @khanacademy/[email protected] ## @khanacademy/[email protected] ### Patch Changes - Updated dependencies \[[`8f8955718`](8f89557), [`d7bcb14c3`](d7bcb14), [`685774f2e`](685774f), [`8a489600e`](8a48960), [`1a75ca628`](1a75ca6), [`459c25074`](459c250), [`0df0b1940`](0df0b19), [`dc8118aa1`](dc8118a), [`82fa90299`](82fa902), [`b4b3a3dbb`](b4b3a3d), [`117e78d03`](117e78d), [`7a984eba6`](7a984eb), [`f8c9d3574`](f8c9d35), [`1355d6cfc`](1355d6c), [`75f43a8f4`](75f43a8), [`32cc4a45b`](32cc4a4), [`ebf3695b6`](ebf3695)]: - @khanacademy/[email protected] ## @khanacademy/[email protected] ### Patch Changes - [#2124](#2124) [`bdbdafe5d`](bdbdafe) Thanks [@dependabot](https://github.com/apps/dependabot)! - Updating wonder-blocks dependences. - Updated dependencies \[[`8f8955718`](8f89557), [`d7bcb14c3`](d7bcb14), [`685774f2e`](685774f), [`8a489600e`](8a48960), [`1a75ca628`](1a75ca6), [`459c25074`](459c250), [`0df0b1940`](0df0b19), [`dc8118aa1`](dc8118a), [`82fa90299`](82fa902), [`b4b3a3dbb`](b4b3a3d), [`117e78d03`](117e78d), [`7a984eba6`](7a984eb), [`f8c9d3574`](f8c9d35), [`1355d6cfc`](1355d6c), [`75f43a8f4`](75f43a8), [`32cc4a45b`](32cc4a4), [`ebf3695b6`](ebf3695)]: - @khanacademy/[email protected] - @khanacademy/[email protected] - @khanacademy/[email protected] - @khanacademy/[email protected] - @khanacademy/[email protected] - @khanacademy/[email protected] - @khanacademy/[email protected]
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary:
Add the interactive Linear graph description to the full graph container.
This adds the "Interactive elements: Line..." description to the outermost graph container.
Issue: https://khanacademy.atlassian.net/browse/LEMS-1726
Test plan:
yarn jest packages/perseus/src/widgets/interactive-graphs/graphs/linear.test.tsxStorybook