Support visible/aria label for the Expression widget #1404

handeyeco · 2024-07-11T15:41:41Z

Summary:

Adds two new options for the Expression widget via the ExpressionEditor:

visibleLabel
ariaLabel

Caitlyn wanted these to be separate so that they could read differently. Her example is if the label should be "Number in cm": a screen reader might read that as "Number in C M" whereas we want it to read "Number in centimeters." So this supports that case.

Issue: LEMS-2081

Test plan:

Looking at the labels:

Go to a page that has an Expression with label (like this page)
Note there is a visible label
Note that when you click the visible label, it focuses the MathQuill input
Note that the MathQuill input (a textarea) has an aria label

Editing the labels:

Go to an editing page that has an Expression widget (like this page)
Note in the dropdown for the Expression options there are two new fields for visible and aria labels
Edit the labels, publish, wait for release, and note the labels are saved

khan-actions-bot · 2024-07-11T15:41:56Z

Gerald

Required Reviewers

@Khan/perseus for changes to .changeset/stupid-coats-dance.md, packages/math-input/src/full-mobile-input.stories.tsx, packages/perseus/src/perseus-types.ts, packages/perseus/src/strings.ts, packages/perseus/src/components/math-input.tsx, packages/perseus/src/styles/perseus-renderer.less, packages/perseus/src/widgets/expression.tsx, packages/perseus-editor/src/__stories__/article-editor.stories.tsx, packages/perseus-editor/src/widgets/expression-editor.tsx, packages/math-input/src/components/__tests__/integration.test.tsx, packages/math-input/src/components/input/math-input.tsx, packages/math-input/src/components/input/math-wrapper.ts, packages/perseus/src/components/__stories__/math-input.stories.tsx, packages/perseus/src/components/__tests__/math-input.test.tsx, packages/perseus/src/widgets/__stories__/expression.stories.tsx, packages/perseus/src/widgets/__testdata__/expression.testdata.ts, packages/perseus/src/widgets/__tests__/expression.test.tsx, packages/math-input/src/components/input/__tests__/context-tracking.test.ts, packages/math-input/src/components/input/__tests__/mathquill.test.ts, packages/perseus/src/widgets/__tests__/__snapshots__/input-number.test.ts.snap, packages/perseus/src/widgets/__tests__/__snapshots__/numeric-input.test.ts.snap

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

github-actions · 2024-07-11T15:43:21Z

npm Snapshot: Published

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

Example:

yarn add @khanacademy/perseus@PR1404

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

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

github-actions · 2024-07-11T15:44:35Z

Size Change: -4.46 kB (-0.52%)

Total Size: 850 kB

Filename	Size	Change
`packages/kas/dist/es/index.js`	38.3 kB	+77 B (+0.2%)
`packages/math-input/dist/es/index.js`	80.6 kB	-146 B (-0.18%)
`packages/perseus-editor/dist/es/index.js`	271 kB	-2.07 kB (-0.76%)
`packages/perseus/dist/es/index.js`	412 kB	-2.33 kB (-0.56%)
`packages/perseus/dist/es/strings.js`	3.23 kB	+17 B (+0.53%)

ℹ️ View Unchanged

Filename	Size
`packages/kmath/dist/es/index.js`	4.27 kB
`packages/math-input/dist/es/strings.js`	1.73 kB
`packages/perseus-core/dist/es/index.js`	1.48 kB
`packages/perseus-linter/dist/es/index.js`	21.6 kB
`packages/pure-markdown/dist/es/index.js`	3.67 kB
`packages/simple-markdown/dist/es/index.js`	12.4 kB

_{compressed-size-action}

codecov · 2024-07-11T17:07:24Z

Codecov Report

Attention: Patch coverage is 94.63415% with 11 lines in your changes missing coverage. Please review.

Project coverage is 70.37%. Comparing base (c6a5cbe) to head (66f1682).
Report is 22 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #1404      +/-   ##
==========================================
+ Coverage   69.86%   70.37%   +0.50%     
==========================================
  Files         505      509       +4     
  Lines      105665   105014     -651     
  Branches     7670    11369    +3699     
==========================================
+ Hits        73826    73901      +75     
+ Misses      31659    31113     -546     
+ Partials      180        0     -180

Files	Coverage Δ
...ges/math-input/src/components/input/math-input.tsx	`45.47% <100.00%> (+1.11%)`	⬆️
...es/math-input/src/components/input/math-wrapper.ts	`61.38% <100.00%> (+1.59%)`	⬆️
packages/perseus/src/strings.ts	`99.54% <100.00%> (+<0.01%)`	⬆️
...s/perseus-editor/src/widgets/expression-editor.tsx	`83.22% <95.55%> (+0.96%)`	⬆️
packages/perseus/src/components/math-input.tsx	`79.51% <66.66%> (-2.09%)`	⬇️
packages/perseus/src/widgets/expression.tsx	`82.62% <94.65%> (+1.39%)`	⬆️

... and 178 files with indirect coverage changes

Continue to review full report in Codecov by Sentry.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 7bf32b7...66f1682. Read the comment docs.

handeyeco · 2024-07-25T14:44:05Z

packages/math-input/src/components/input/math-wrapper.ts

+                };
+            },
+        );
+        this.mathField?.setAriaLabel(ariaLabel);


Aria-label for mobile

handeyeco · 2024-07-25T14:44:23Z

packages/perseus/src/components/math-input.tsx

@@ -241,6 +241,7 @@ class InnerMathInput extends React.Component<InnerProps, State> {
            );
        }

+        this.__mathField?.setAriaLabel(this.props.ariaLabel);


Aria-label for desktop

handeyeco · 2024-07-25T14:46:49Z

packages/perseus/src/widgets/__tests__/expression.test.tsx

@@ -327,243 +328,278 @@ describe("Expression Widget", function () {
            await assertCorrect(userEvent, item, "tg x");
        });
    });
-});


A lot of these changes are because I thought some of these describes should have been nested. It might be easier to look at this file with "hide whitespace" enabled.

handeyeco · 2024-07-25T14:48:40Z

packages/perseus/src/widgets/expression.tsx

-                />
+                <View style={{padding: "15px 4px 0"}}>
+                    {!!this.props.visibleLabel && (
+                        <label


Mobile visible label

handeyeco · 2024-07-25T14:48:48Z

packages/perseus/src/widgets/expression.tsx

-                {/**
+            <View style={{margin: "5px 5px 0"}}>
+                {!!this.props.visibleLabel && (
+                    <label


Desktop visible label

anakaren-rojas · 2024-07-25T17:36:00Z

noob question: when do the new labels get saved and pushed to the backend?

catandthemachines

It's getting so close! The biggest questions I have is whether we can use a WonderBlocks components for the labels so the styling is consistent with our design system.

packages/math-input/src/components/input/math-wrapper.ts

packages/perseus-editor/src/widgets/expression-editor.tsx

packages/perseus/src/perseus-types.ts

packages/perseus/src/widgets/expression.tsx

packages/perseus-editor/src/__stories__/article-editor.stories.tsx

catandthemachines · 2024-07-26T21:19:58Z

packages/perseus/src/widgets/expression.tsx

        );
    }
 }

+const styles = StyleSheet.create({


Did Caitlyn get a chance to take a look at these padding values for mobile and desktop?

handeyeco added 2 commits July 10, 2024 12:07

add inputs for labels to the expression editor

f77bd8c

add aria label to mobile input

5611df6

handeyeco self-assigned this Jul 11, 2024

khan-actions-bot requested a review from a team July 11, 2024 15:41

handeyeco changed the title ~~add inputs for labels to the expression editor~~ WIP: add inputs for labels to the expression editor Jul 11, 2024

handeyeco mentioned this pull request Jul 11, 2024

WIP: Expression w/ Label POC #1378

Closed

handeyeco added 2 commits July 11, 2024 11:58

fix tests

2245b4b

changeset

ad71e8c

handeyeco added 8 commits July 17, 2024 14:26

Merge branch 'main' into LEMS-2081/expr-editor-label

526d892

rough out idea for CSS

2a5992c

flow elements better

ee07028

add comment to hack

dceae4c

change name of prop and tweak tests

f7fc769

remove findDOMNode from render

e39a4e1

consolidate mobile vs desktop logic

6d5006e

add more tests

953b0d5

handeyeco mentioned this pull request Jul 22, 2024

remove Interactive Graph Cypress tests #1430

Merged

handeyeco added 5 commits July 22, 2024 12:32

Merge branch 'main' into LEMS-2081/expr-editor-label

119629b

merge main, fix conflicts

6847808

make labels serializable

08b66c4

ignore errors in story

098bd21

try again with vertical-align

8ecce28

handeyeco changed the title ~~WIP: add inputs for labels to the expression editor~~ Add inputs for labels to the ExpressionEditor Jul 25, 2024

handeyeco changed the title ~~Add inputs for labels to the ExpressionEditor~~ Support visible/aria label for the Expression widget Jul 25, 2024

handeyeco requested review from catandthemachines and anakaren-rojas July 25, 2024 14:32

handeyeco requested a review from a team July 25, 2024 14:32

handeyeco commented Jul 25, 2024

View reviewed changes

catandthemachines reviewed Jul 25, 2024

View reviewed changes

handeyeco added 4 commits July 26, 2024 09:32

use WB labels

e7cc0d0

move styles to aphrodite

2466d79

add comments

0df7d36

i18n aria label default

84cc86c

handeyeco requested a review from catandthemachines July 26, 2024 14:56

catandthemachines approved these changes Jul 26, 2024

View reviewed changes

add WCAG link to tooltip thing

66f1682

handeyeco merged commit 284e068 into main Jul 31, 2024
11 checks passed

handeyeco deleted the LEMS-2081/expr-editor-label branch July 31, 2024 13:50

khan-actions-bot mentioned this pull request Jul 30, 2024

Version Packages #1464

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Support visible/aria label for the Expression widget #1404

Support visible/aria label for the Expression widget #1404

handeyeco commented Jul 11, 2024 •

edited

Loading

khan-actions-bot commented Jul 11, 2024 •

edited

Loading

github-actions bot commented Jul 11, 2024 •

edited

Loading

github-actions bot commented Jul 11, 2024 •

edited

Loading

codecov bot commented Jul 11, 2024 •

edited

Loading

handeyeco Jul 25, 2024

handeyeco Jul 25, 2024

handeyeco Jul 25, 2024

handeyeco Jul 25, 2024

handeyeco Jul 25, 2024

anakaren-rojas commented Jul 25, 2024

catandthemachines left a comment

catandthemachines Jul 26, 2024

Support visible/aria label for the Expression widget #1404

Support visible/aria label for the Expression widget #1404

Conversation

handeyeco commented Jul 11, 2024 • edited Loading

Summary:

Test plan:

khan-actions-bot commented Jul 11, 2024 • edited Loading

Gerald

github-actions bot commented Jul 11, 2024 • edited Loading

npm Snapshot: Published

github-actions bot commented Jul 11, 2024 • edited Loading

codecov bot commented Jul 11, 2024 • edited Loading

Codecov Report

handeyeco Jul 25, 2024

Choose a reason for hiding this comment

handeyeco Jul 25, 2024

Choose a reason for hiding this comment

handeyeco Jul 25, 2024

Choose a reason for hiding this comment

handeyeco Jul 25, 2024

Choose a reason for hiding this comment

handeyeco Jul 25, 2024

Choose a reason for hiding this comment

anakaren-rojas commented Jul 25, 2024

catandthemachines left a comment

Choose a reason for hiding this comment

catandthemachines Jul 26, 2024

Choose a reason for hiding this comment

handeyeco commented Jul 11, 2024 •

edited

Loading

khan-actions-bot commented Jul 11, 2024 •

edited

Loading

github-actions bot commented Jul 11, 2024 •

edited

Loading

github-actions bot commented Jul 11, 2024 •

edited

Loading

codecov bot commented Jul 11, 2024 •

edited

Loading