feat(LEMS-2664): update use control point and movable point with optional props #1906

anakaren-rojas · 2024-11-23T00:03:25Z

Summary:

Updates MovablePoint component and useControlPoint method to include optional props for aria label, aria described by, aria live, and sequence number
Sets default for aria live to polite; based on design doc, only the removal of a point or trying to move a point of out bounds warrants the use of assertive
Set default for sequence number - if aria label and sequence number are not provided - sequence will default to 1
Creates logic for optional aria label - custom aria label will take precedence over sequence number

Issue: LEMS-2664

Test plan:

Using chromatic link, selecting an interactive graph point reads out the point's coordinates

Screen recording

Screen.Recording.2024-11-25.at.13.30.08.mov

github-actions · 2024-11-23T00:06:29Z

Size Change: +38 B (0%)

Total Size: 1.29 MB

Filename	Size	Change
`packages/perseus/dist/es/index.js`	421 kB	+38 B (+0.01%)

ℹ️ 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`	698 kB
`packages/perseus-linter/dist/es/index.js`	22.2 kB
`packages/perseus/dist/es/strings.js`	3.68 kB
`packages/pure-markdown/dist/es/index.js`	3.66 kB
`packages/simple-markdown/dist/es/index.js`	12.5 kB

_{compressed-size-action}

anakaren-rojas · 2024-11-23T00:06:52Z

packages/perseus/src/widgets/interactive-graphs/graphs/components/use-control-point.tsx

@@ -47,6 +51,9 @@ export function useControlPoint(params: Params): Return {
    const {
        point,
        sequenceNumber,
+        ariaDescribedBy,
+        ariaLabel,
+        ariaLive = "polite",


Only removing point or moving out of bounds should be assertive per design doc

github-actions · 2024-11-25T17:56:20Z

npm Snapshot: Published

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

Example:

yarn add @khanacademy/perseus@PR1906

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

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

khan-actions-bot · 2024-11-25T21:19:51Z

Gerald

Required Reviewers

@Khan/perseus for changes to .changeset/lazy-geckos-suffer.md, packages/perseus/src/widgets/interactive-graphs/types.ts, packages/perseus/src/widgets/interactive-graphs/graphs/components/movable-point.test.tsx, packages/perseus/src/widgets/interactive-graphs/graphs/components/movable-point.tsx, packages/perseus/src/widgets/interactive-graphs/graphs/components/use-control-point.tsx, packages/perseus/src/widgets/interactive-graphs/graphs/components/__snapshots__/movable-line.test.tsx.snap

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

packages/perseus/src/widgets/interactive-graphs/graphs/components/use-control-point.tsx

nishasy

Looks good to me! 🎉

nishasy · 2024-11-26T21:29:46Z

packages/perseus/src/widgets/interactive-graphs/graphs/components/movable-point.test.tsx

Nice tests! 🎉

nishasy · 2024-11-26T21:30:39Z

packages/perseus/src/widgets/interactive-graphs/graphs/components/movable-point.tsx

-    sequenceNumber: number;
-    onMove?: (newPoint: vec.Vector2) => unknown;
+    sequenceNumber?: number;
+    onBlur?: ((event: React.FocusEvent) => unknown) | undefined;


Does this need to explicitly have | undefined if it already has the ?? Same question with onFocus?

Nope, I kept them as they were, but it would be safe to remove the | undefined

nishasy · 2024-11-26T21:31:33Z

packages/perseus/src/widgets/interactive-graphs/graphs/components/use-control-point.tsx

        color,
        cursor,
        constrain = (p) => snap(snapStep, p),
+        forwardedRef = noop,
+        sequenceNumber = 1,


@Myranae

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 - [#1898](#1898) [`3a9b5921b`](3a9b592) Thanks [@Myranae](https://github.com/Myranae)! - Introduces a validation function for the dropdown widget (extracted from dropdown scoring function). - [#1862](#1862) [`451de899f`](451de89) Thanks [@Myranae](https://github.com/Myranae)! - Split out validation function for the `categorizer` widget. This can be used to check if the user selected an answer for every row, confirming the question is ready to be scored. - [#1882](#1882) [`40d2ebb75`](40d2ebb) Thanks [@jeremywiebe](https://github.com/jeremywiebe)! - Introduces a validation function for the numeric-input widget (extracted from numeric-input scoring function). - [#1899](#1899) [`2437ce61b`](2437ce6) Thanks [@Myranae](https://github.com/Myranae)! - Introduces a validation function for the plotter widget (extracted from the scoring function). - [#1869](#1869) [`f43edd42c`](f43edd4) Thanks [@Myranae](https://github.com/Myranae)! - Split out validation function for the `orderer` widget. This can be used to check if the user has ordered at least one option, confirming the question is ready to be scored. - [#1902](#1902) [`0cec7628c`](0cec762) Thanks [@Myranae](https://github.com/Myranae)! - Introduces a validation function for the radio widget (extracted from the scoring function), though not all validation logic can be extracted. - [#1876](#1876) [`0bd4270ad`](0bd4270) Thanks [@Myranae](https://github.com/Myranae)! - Split out validation function for the `sorter` widget. This can be used to check if the user has made any changes to the sorting order, confirming whether or not the question can be scored. ### Patch Changes - [#1907](#1907) [`3dbca965a`](3dbca96) Thanks [@benchristel](https://github.com/benchristel)! - Internal: add and pass regression tests for `PerseusItem` parser. - [#1915](#1915) [`ee09e9fc0`](ee09e9f) Thanks [@handeyeco](https://github.com/handeyeco)! - Remove use of findDOMNode in number-input component - [#1920](#1920) [`88ba71bef`](88ba71b) Thanks [@handeyeco](https://github.com/handeyeco)! - Fix some file-wide error suppressions - [#1919](#1919) [`64ea2ee86`](64ea2ee) Thanks [@handeyeco](https://github.com/handeyeco)! - Remove usage of findDOMNode in text-input component - [#1906](#1906) [`799ffe4a5`](799ffe4) Thanks [@anakaren-rojas](https://github.com/anakaren-rojas)! - update moveable point component and use control point method to have optional params - [#1895](#1895) [`841551a65`](841551a) Thanks [@benchristel](https://github.com/benchristel)! - Internal: remove unused fields from `answerArea` when parsing `PerseusItem`s. - [#1921](#1921) [`8ec06f444`](8ec06f4) Thanks [@benchristel](https://github.com/benchristel)! - Internal: Inline widget version into Expression widget parser. - [#1914](#1914) [`3e98b7cd3`](3e98b7c) Thanks [@handeyeco](https://github.com/handeyeco)! - Add tests for propUpgrades functions (and remove underscore usage) - [#1908](#1908) [`7f2866cf4`](7f2866c) Thanks [@benchristel](https://github.com/benchristel)! - Internal: Migrate expression widget options to the latest version in parseAndTypecheckPerseusItem (not yet used in production). - Updated dependencies \[[`88ba71bef`](88ba71b)]: - @khanacademy/[email protected] - @khanacademy/[email protected] - @khanacademy/[email protected] ## @khanacademy/[email protected] ### Patch Changes - [#1920](#1920) [`88ba71bef`](88ba71b) Thanks [@handeyeco](https://github.com/handeyeco)! - Fix some file-wide error suppressions ## @khanacademy/[email protected] ### Patch Changes - [#1920](#1920) [`88ba71bef`](88ba71b) Thanks [@handeyeco](https://github.com/handeyeco)! - Fix some file-wide error suppressions - [#1863](#1863) [`584153588`](5841535) Thanks [@jeremywiebe](https://github.com/jeremywiebe)! - Switch two corner usages of deprecated @khanacademy/wonder-blocks-spacing to @khanacademy/wonder-blocks-tokens - Updated dependencies \[[`3dbca965a`](3dbca96), [`ee09e9fc0`](ee09e9f), [`3a9b5921b`](3a9b592), [`88ba71bef`](88ba71b), [`64ea2ee86`](64ea2ee), [`451de899f`](451de89), [`40d2ebb75`](40d2ebb), [`799ffe4a5`](799ffe4), [`2437ce61b`](2437ce6), [`841551a65`](841551a), [`8ec06f444`](8ec06f4), [`f43edd42c`](f43edd4), [`0cec7628c`](0cec762), [`0bd4270ad`](0bd4270), [`3e98b7cd3`](3e98b7c), [`7f2866cf4`](7f2866c)]: - @khanacademy/[email protected] - @khanacademy/[email protected] - @khanacademy/[email protected] ## @khanacademy/[email protected] ### Patch Changes - Updated dependencies \[[`88ba71bef`](88ba71b)]: - @khanacademy/[email protected] ## @khanacademy/[email protected] ### Patch Changes - [#1920](#1920) [`88ba71bef`](88ba71b) Thanks [@handeyeco](https://github.com/handeyeco)! - Fix some file-wide error suppressions ## @khanacademy/[email protected] ### Patch Changes - Updated dependencies \[[`88ba71bef`](88ba71b)]: - @khanacademy/[email protected] - @khanacademy/[email protected] - @khanacademy/[email protected] Author: khan-actions-bot Reviewers: jeremywiebe Required Reviewers: Approved By: jeremywiebe Checks: ✅ Cypress (ubuntu-latest, 20.x), ⏭️ Publish npm snapshot, ✅ 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: #1918

update use control point and movable point with optional props

7eb2761

anakaren-rojas self-assigned this Nov 23, 2024

anakaren-rojas requested review from benchristel and nishasy November 23, 2024 00:03

anakaren-rojas commented Nov 23, 2024

View reviewed changes

anakaren-rojas changed the title ~~update use control point and movable point with optional props~~ feat(LEMS-2664): update use control point and movable point with optional props Nov 23, 2024

anakaren-rojas added 2 commits November 25, 2024 09:28

lint fix

83839b5

changeset

4b4236c

anakaren-rojas added 2 commits November 25, 2024 11:02

add accessibility tests for movable point

f01b2b4

lint fix

059baef

anakaren-rojas marked this pull request as ready for review November 25, 2024 21:19

khan-actions-bot requested a review from a team November 25, 2024 21:19

anakaren-rojas requested a review from catandthemachines November 25, 2024 21:20

nishasy reviewed Nov 26, 2024

View reviewed changes

packages/perseus/src/widgets/interactive-graphs/graphs/components/use-control-point.tsx Outdated Show resolved Hide resolved

packages/perseus/src/widgets/interactive-graphs/graphs/components/use-control-point.tsx Show resolved Hide resolved

make sequenceNumber optional

8bcc3b7

nishasy approved these changes Nov 26, 2024

View reviewed changes

anakaren-rojas added 3 commits November 26, 2024 13:44

remove unneeded undefined

7c19062

reorder params

0ec45c5

Merge branch 'main' into LEMS-2664-update-shared-utils

8cf8bbd

anakaren-rojas merged commit 799ffe4 into main Nov 26, 2024
9 checks passed

anakaren-rojas deleted the LEMS-2664-update-shared-utils branch November 26, 2024 22:07

khan-actions-bot mentioned this pull request Nov 26, 2024

Version Packages #1918

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(LEMS-2664): update use control point and movable point with optional props #1906

feat(LEMS-2664): update use control point and movable point with optional props #1906

anakaren-rojas commented Nov 23, 2024 •

edited

Loading

github-actions bot commented Nov 23, 2024 •

edited

Loading

anakaren-rojas Nov 23, 2024 •

edited

Loading

github-actions bot commented Nov 25, 2024 •

edited

Loading

khan-actions-bot commented Nov 25, 2024

nishasy left a comment

nishasy Nov 26, 2024

nishasy Nov 26, 2024

anakaren-rojas Nov 26, 2024

nishasy Nov 26, 2024

feat(LEMS-2664): update use control point and movable point with optional props #1906

feat(LEMS-2664): update use control point and movable point with optional props #1906

Conversation

anakaren-rojas commented Nov 23, 2024 • edited Loading

Summary:

Test plan:

Screen recording

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

anakaren-rojas Nov 23, 2024 • edited Loading

Choose a reason for hiding this comment

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

npm Snapshot: Published

khan-actions-bot commented Nov 25, 2024

Gerald

nishasy left a comment

Choose a reason for hiding this comment

nishasy Nov 26, 2024

Choose a reason for hiding this comment

nishasy Nov 26, 2024

Choose a reason for hiding this comment

anakaren-rojas Nov 26, 2024

Choose a reason for hiding this comment

nishasy Nov 26, 2024

Choose a reason for hiding this comment

anakaren-rojas commented Nov 23, 2024 •

edited

Loading

github-actions bot commented Nov 23, 2024 •

edited

Loading

anakaren-rojas Nov 23, 2024 •

edited

Loading

github-actions bot commented Nov 25, 2024 •

edited

Loading