Add TeX support to dropdown #1810

daniellewhyte · 2024-10-30T15:44:20Z

Summary:

This PR adds support for showing TeX in the dropdown

Issue: LIT-1425

Test plan:

Inspect new story:
http://localhost:6006/?path=/story/perseus-widgets-dropdown--dropdown-with-math

Valid TeX renders in OptionItems when dropdown is expanded

Valid TeX renders when an option is selected

aria-labels exist on the mathjax-wrapper -- HTML inspection. SR reads the labels fine in the list box, but I've had mixed results after an option is selected (works on Firefox, but not Safari). This is not unique to TeX content, and there are a couple issues to address it here: LIT-1516 WB-1799

github-actions · 2024-10-30T15:46:48Z

npm Snapshot: Published

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

Example:

yarn add @khanacademy/perseus@PR1810

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

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

github-actions · 2024-10-30T15:46:51Z

Size Change: +44 B (0%)

Total Size: 1.27 MB

Filename	Size	Change
`packages/perseus/dist/es/index.js`	416 kB	+44 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`	78 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`	688 kB
`packages/perseus-linter/dist/es/index.js`	22.2 kB
`packages/perseus/dist/es/strings.js`	4.12 kB
`packages/pure-markdown/dist/es/index.js`	3.67 kB
`packages/simple-markdown/dist/es/index.js`	12.5 kB

_{compressed-size-action}

daniellewhyte · 2024-11-08T17:29:11Z

This will be ready for review once this update has been released to WB: Khan/wonder-blocks#2354

## Summary: When you pass in a JSX Element as a label to `OptionItem`, the SelectOpener is labeled with an empty string. This PR updates SelectOpener in the `SingleSelect` and `MultiSelect` components to return the JSX as a label in that case. This change is being made to unblock supporting TEX in the Perseus Dropdown widget. Issue: LIT-1425 ## Test plan: - Added new stories - https://5e1bf4b385e3fb0020b7073c-xhxyrfwkfd.chromatic.com/?path=/story/packages-dropdown-singleselect--custom-option-item-with-node-label - https://5e1bf4b385e3fb0020b7073c-xhxyrfwkfd.chromatic.com/?path=/story/packages-dropdown-multiselect--custom-option-items-with-node-label - Unit tests pass - Installed npm snapshot and tested against my branch in Perseus ([PR here](Khan/perseus#1810)) - Test in webapp and storybook to ensure no regressions Author: daniellewhyte Reviewers: marcysutton, daniellewhyte, beaesguerra, jandrade Required Reviewers: Approved By: beaesguerra, jandrade Checks: ✅ Chromatic - Get results on regular PRs (ubuntu-latest, 20.x), ✅ Test / Test (ubuntu-latest, 20.x, 2/2), ✅ Test / Test (ubuntu-latest, 20.x, 1/2), ✅ Lint / Lint (ubuntu-latest, 20.x), ✅ Check build sizes (ubuntu-latest, 20.x), ✅ Chromatic - Build on regular PRs / chromatic (ubuntu-latest, 20.x), ✅ Publish npm snapshot (ubuntu-latest, 20.x), ⏭️ Chromatic - Skip on Release PR (changesets), ✅ Prime node_modules cache for primary configuration (ubuntu-latest, 20.x), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ✅ gerald, ⏭️ dependabot Pull Request URL: #2354

mark-fitzgerald · 2024-12-17T19:12:42Z

packages/perseus/src/widgets/dropdown/dropdown.testdata.ts

@@ -1,6 +1,6 @@
 import type {PerseusRenderer} from "../../perseus-types";

-export const question1: PerseusRenderer = {
+export const basicDropdown: PerseusRenderer = {


Thank you!! Meaningful names are so hard to come by these days.

mark-fitzgerald · 2024-12-17T20:12:56Z

packages/perseus/src/widgets/dropdown/dropdown.tsx

+                        content={this.props.placeholder}
+                        strings={this.context.strings}
+                        inline
+                    />


Using <Renderer> feels heavy for rendering TeX. Perhaps using the <TeX> component would be a lighter-weight implementation? Access to this component is via getDependencies() instead of direct import. Can we give that a try?

Looks like that component always renders everything as TeX.

Bummer. OK. Let's stick with the <Renderer> widget for now. Thanks for checking into it.

Mark and I chatted in DMs, but I'll circle back here. I suggested the TeX component, but didn't realize there might be a mixture of standard content and TeX markup. In that case, Renderer is the correct tool. It handles parsing content and rendering TeX as needed. This is pretty common to use the Renderer in widgets to render content (even if widgets aren't supported).

catandthemachines · 2024-12-17T20:17:09Z

I think there is a typo in your code somewhere, it reads out the same option 5x for all the options.

catandthemachines · 2024-12-17T20:27:47Z

I think there is a typo in your code somewhere, it reads out the same option 5x for all the options.

This actually might be an issue with Chrome, as Safari doesn't do this. I would say this is non-blocking feedback, might go away if you use the component.

daniellewhyte · 2024-12-17T21:05:00Z

@catandthemachines I think you're right that it's a VO+Chrome issue. I am able to recreate the same behavior on the MathJax stories. It doesn't read the square root.

@daniellewhyte

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] ### Patch Changes - Updated dependencies \[[`e21ead80e`](e21ead8)]: - @khanacademy/[email protected] ## @khanacademy/[email protected] ### Patch Changes - Updated dependencies \[[`e21ead80e`](e21ead8)]: - @khanacademy/[email protected] ## @khanacademy/[email protected] ### Patch Changes - Updated dependencies \[[`e21ead80e`](e21ead8)]: - @khanacademy/[email protected] ## @khanacademy/[email protected] ### Patch Changes - [#1810](#1810) [`e21ead80e`](e21ead8) Thanks [@daniellewhyte](https://github.com/daniellewhyte)! - Update Dropdown widget to support displaying TeX - Updated dependencies \[[`e21ead80e`](e21ead8)]: - @khanacademy/[email protected] - @khanacademy/[email protected] ## @khanacademy/[email protected] ### Patch Changes - [#1810](#1810) [`e21ead80e`](e21ead8) Thanks [@daniellewhyte](https://github.com/daniellewhyte)! - Update Dropdown widget to support displaying TeX - [#2023](#2023) [`51386d6e0`](51386d6) Thanks [@nishasy](https://github.com/nishasy)! - [SR] Linear graph - add full graph aria label and description - Updated dependencies \[[`e21ead80e`](e21ead8)]: - @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 - [#1810](#1810) [`e21ead80e`](e21ead8) Thanks [@daniellewhyte](https://github.com/daniellewhyte)! - Update Dropdown widget to support displaying TeX ## @khanacademy/[email protected] ### Patch Changes - [#1810](#1810) [`e21ead80e`](e21ead8) Thanks [@daniellewhyte](https://github.com/daniellewhyte)! - Update Dropdown widget to support displaying TeX - Updated dependencies \[[`e21ead80e`](e21ead8), [`51386d6e0`](51386d6)]: - @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 \[[`e21ead80e`](e21ead8)]: - @khanacademy/[email protected] ## @khanacademy/[email protected] ### Patch Changes - Updated dependencies \[[`e21ead80e`](e21ead8)]: - @khanacademy/[email protected] - @khanacademy/[email protected] ## @khanacademy/[email protected] ### Patch Changes - Updated dependencies \[[`e21ead80e`](e21ead8)]: - @khanacademy/[email protected] ## @khanacademy/[email protected] ### Patch Changes - [#1810](#1810) [`e21ead80e`](e21ead8) Thanks [@daniellewhyte](https://github.com/daniellewhyte)! - Update Dropdown widget to support displaying TeX - Updated dependencies \[[`e21ead80e`](e21ead8)]: - @khanacademy/[email protected] - @khanacademy/[email protected] - @khanacademy/[email protected] - @khanacademy/[email protected] - @khanacademy/[email protected] - @khanacademy/[email protected] - @khanacademy/[email protected]

add TeX support to dropdown

b439537

daniellewhyte self-assigned this Oct 30, 2024

daniellewhyte mentioned this pull request Nov 7, 2024

Update label in SingleSelect and MultiSelect Khan/wonder-blocks#2354

Merged

Danielle Whyte added 2 commits November 8, 2024 13:34

update snapshots

116abe7

Merge branch 'main' into dropdown-tex-support

27cd060

Danielle Whyte added 9 commits December 3, 2024 14:48

Merge branch 'main' into dropdown-tex-support

3ccb1fe

Merge branch 'main' into dropdown-tex-support

d52f21f

Merge branch 'main' into dropdown-tex-support

f35bf2b

update dependencies

9aa69e4

update dropdown

d1a3513

update snapshots

436734b

add changeset

f27ad6e

Merge branch 'main' into dropdown-tex-support

245d5db

add labelAsText

44b5af0

daniellewhyte changed the title ~~[WIP] add TeX support to dropdown~~ Add TeX support to dropdown Dec 11, 2024

Danielle Whyte added 5 commits December 12, 2024 17:36

Merge branch 'main' into dropdown-tex-support

eb17e85

update deps again

89218a4

update snapshots

622474d

this is needed because SingleSelect was refactored to a fn component

873e5b5

rename stories

6f6c6bc

daniellewhyte marked this pull request as ready for review December 13, 2024 19:40

rename variable

880741f

daniellewhyte marked this pull request as draft December 13, 2024 21:12

Merge branch 'main' into dropdown-tex-support

3f8a825

daniellewhyte marked this pull request as ready for review December 16, 2024 21:25

daniellewhyte requested a review from a team December 16, 2024 21:26

mark-fitzgerald reviewed Dec 17, 2024

View reviewed changes

mark-fitzgerald approved these changes Dec 17, 2024

View reviewed changes

daniellewhyte merged commit e21ead8 into main Dec 18, 2024
13 of 18 checks passed

daniellewhyte deleted the dropdown-tex-support branch December 18, 2024 15:08

khan-actions-bot mentioned this pull request Dec 18, 2024

Version Packages #2024

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add TeX support to dropdown #1810

Add TeX support to dropdown #1810

daniellewhyte commented Oct 30, 2024 •

edited by jira bot

Loading

github-actions bot commented Oct 30, 2024 •

edited

Loading

github-actions bot commented Oct 30, 2024 •

edited

Loading

daniellewhyte commented Nov 8, 2024

mark-fitzgerald Dec 17, 2024

mark-fitzgerald Dec 17, 2024

daniellewhyte Dec 17, 2024

mark-fitzgerald Dec 17, 2024

jeremywiebe Dec 18, 2024

catandthemachines commented Dec 17, 2024

catandthemachines commented Dec 17, 2024

daniellewhyte commented Dec 17, 2024

Add TeX support to dropdown #1810

Add TeX support to dropdown #1810

Conversation

daniellewhyte commented Oct 30, 2024 • edited by jira bot Loading

Summary:

Test plan:

github-actions bot commented Oct 30, 2024 • edited Loading

npm Snapshot: Published

github-actions bot commented Oct 30, 2024 • edited Loading

daniellewhyte commented Nov 8, 2024

mark-fitzgerald Dec 17, 2024

Choose a reason for hiding this comment

mark-fitzgerald Dec 17, 2024

Choose a reason for hiding this comment

daniellewhyte Dec 17, 2024

Choose a reason for hiding this comment

mark-fitzgerald Dec 17, 2024

Choose a reason for hiding this comment

jeremywiebe Dec 18, 2024

Choose a reason for hiding this comment

catandthemachines commented Dec 17, 2024

catandthemachines commented Dec 17, 2024

daniellewhyte commented Dec 17, 2024

daniellewhyte commented Oct 30, 2024 •

edited by jira bot

Loading

github-actions bot commented Oct 30, 2024 •

edited

Loading

github-actions bot commented Oct 30, 2024 •

edited

Loading