diff --git a/.changeset/fresh-tips-guess.md b/.changeset/fresh-tips-guess.md new file mode 100644 index 0000000000..54b32c8e4b --- /dev/null +++ b/.changeset/fresh-tips-guess.md @@ -0,0 +1,5 @@ +--- +"@khanacademy/math-input": patch +--- + +update wonder blocks popover versions diff --git a/.changeset/tender-tools-perform.md b/.changeset/tender-tools-perform.md new file mode 100644 index 0000000000..752551bf71 --- /dev/null +++ b/.changeset/tender-tools-perform.md @@ -0,0 +1,5 @@ +--- +"@khanacademy/perseus": patch +--- + +add non-visual text as a description for expression widget diff --git a/packages/math-input/package.json b/packages/math-input/package.json index a288c34394..a960d9b3aa 100644 --- a/packages/math-input/package.json +++ b/packages/math-input/package.json @@ -44,7 +44,7 @@ "@khanacademy/mathjax-renderer": "^2.0.1", "@khanacademy/wonder-blocks-clickable": "4.2.1", "@khanacademy/wonder-blocks-core": "6.4.0", - "@khanacademy/wonder-blocks-popover": "3.2.9", + "@khanacademy/wonder-blocks-popover": "3.2.11", "@khanacademy/wonder-blocks-timing": "5.0.0", "@khanacademy/wonder-blocks-tokens": "1.3.0", "@khanacademy/wonder-stuff-core": "1.5.2", @@ -64,7 +64,7 @@ "@khanacademy/mathjax-renderer": "^2.0.1", "@khanacademy/wonder-blocks-clickable": "4.2.1", "@khanacademy/wonder-blocks-core": "6.4.0", - "@khanacademy/wonder-blocks-popover": "3.2.9", + "@khanacademy/wonder-blocks-popover": "3.2.11", "@khanacademy/wonder-blocks-timing": "5.0.0", "@khanacademy/wonder-blocks-tokens": "1.3.0", "@khanacademy/wonder-stuff-core": "1.5.2", diff --git a/packages/perseus/package.json b/packages/perseus/package.json index d71e3435b3..98bd0801cd 100644 --- a/packages/perseus/package.json +++ b/packages/perseus/package.json @@ -47,7 +47,8 @@ "@khanacademy/pure-markdown": "^0.3.7", "@khanacademy/simple-markdown": "^0.13.0", "@use-gesture/react": "^10.2.27", - "mafs": "0.19.0" + "mafs": "0.19.0", + "uuid": "^10.0.0" }, "devDependencies": { "@khanacademy/wonder-blocks-banner": "3.0.42", @@ -61,7 +62,7 @@ "@khanacademy/wonder-blocks-layout": "2.0.32", "@khanacademy/wonder-blocks-link": "6.1.1", "@khanacademy/wonder-blocks-pill": "2.2.1", - "@khanacademy/wonder-blocks-popover": "3.2.9", + "@khanacademy/wonder-blocks-popover": "3.2.11", "@khanacademy/wonder-blocks-progress-spinner": "2.1.1", "@khanacademy/wonder-blocks-switch": "1.1.16", "@khanacademy/wonder-blocks-tokens": "1.3.0", @@ -95,7 +96,7 @@ "@khanacademy/wonder-blocks-layout": "2.0.32", "@khanacademy/wonder-blocks-link": "6.1.1", "@khanacademy/wonder-blocks-pill": "2.2.1", - "@khanacademy/wonder-blocks-popover": "3.2.9", + "@khanacademy/wonder-blocks-popover": "3.2.11", "@khanacademy/wonder-blocks-progress-spinner": "2.1.1", "@khanacademy/wonder-blocks-switch": "1.1.16", "@khanacademy/wonder-blocks-tokens": "1.3.0", diff --git a/packages/perseus/src/components/math-input.tsx b/packages/perseus/src/components/math-input.tsx index f606ef092f..88623e296c 100644 --- a/packages/perseus/src/components/math-input.tsx +++ b/packages/perseus/src/components/math-input.tsx @@ -13,12 +13,15 @@ import Clickable from "@khanacademy/wonder-blocks-clickable"; import {View} from "@khanacademy/wonder-blocks-core"; import {Popover, PopoverContentCore} from "@khanacademy/wonder-blocks-popover"; import {color, spacing} from "@khanacademy/wonder-blocks-tokens"; +import {HeadingMedium} from "@khanacademy/wonder-blocks-typography"; import {StyleSheet} from "aphrodite"; import classNames from "classnames"; import $ from "jquery"; import * as React from "react"; import _ from "underscore"; +import {v4 as uuid} from "uuid"; +import a11y from "../util/a11y"; import {debounce} from "../util/debounce"; import {PerseusI18nContext} from "./i18n-context"; @@ -288,6 +291,8 @@ class InnerMathInput extends React.Component { "mq-math-mode": true, }); + const popoverContentUniqueId = uuid().slice(0, 8); + if (this.props.className) { className = className + " " + this.props.className; } @@ -330,25 +335,38 @@ class InnerMathInput extends React.Component { opened={this.state.keypadOpen} onClose={() => this.closeKeypad()} dismissEnabled + aria-label={this.context.strings.mathInputTitle} + aria-describedby={`popover-content-${popoverContentUniqueId}`} content={() => ( - - - + <> + + {this.context.strings.mathInputDescription} + + + + + )} > {this.props.buttonsVisible === "never" ? ( diff --git a/packages/perseus/src/strings.ts b/packages/perseus/src/strings.ts index e2027b91cf..41c35574ea 100644 --- a/packages/perseus/src/strings.ts +++ b/packages/perseus/src/strings.ts @@ -123,6 +123,8 @@ export type PerseusStrings = { videoTranscript: string; somethingWrong: string; videoWrapper: string; + mathInputTitle: string; + mathInputDescription: string; }; /** @@ -286,6 +288,9 @@ export const strings: { videoTranscript: "See video transcript", somethingWrong: "Something went wrong.", videoWrapper: "Khan Academy video wrapper", + mathInputTitle: "mathematics keyboard", + mathInputDescription: + "Use keyboard/mouse to interact with math-based input fields", }; /** @@ -433,4 +438,7 @@ export const mockStrings: PerseusStrings = { videoTranscript: "See video transcript", somethingWrong: "Something went wrong.", videoWrapper: "Khan Academy video wrapper", + mathInputTitle: "mathematics keyboard", + mathInputDescription: + "Use keyboard/mouse to interact with math-based input fields", }; diff --git a/yarn.lock b/yarn.lock index 5399a4ab6b..ec9ff67904 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2765,17 +2765,17 @@ "@khanacademy/wonder-blocks-tokens" "^1.3.0" "@khanacademy/wonder-blocks-typography" "^2.1.11" -"@khanacademy/wonder-blocks-popover@3.2.9": - version "3.2.9" - resolved "https://registry.yarnpkg.com/@khanacademy/wonder-blocks-popover/-/wonder-blocks-popover-3.2.9.tgz#f82212edd117832b7eab6066d8b6381fc982126e" - integrity sha512-WjstA4acn/gOfo1CedA90oq5hWZnkUl4Lj2hpMCHYSTflfEhz0mjcFWzWXPAta+rtk6pAEnAKzqWT1oJ5q+Hvg== +"@khanacademy/wonder-blocks-popover@3.2.11": + version "3.2.11" + resolved "https://registry.yarnpkg.com/@khanacademy/wonder-blocks-popover/-/wonder-blocks-popover-3.2.11.tgz#75d6353fa8faa8e8b1d2bb202878565655d75ec2" + integrity sha512-JxH0UTg1rYhUG2rr/QV8PlJaIzSV8HvlhTiu7NxUhhciU4dWPtdZKURGthdybWb4lCuWxxQEumeoFrPspN6JjQ== dependencies: "@babel/runtime" "^7.18.6" "@khanacademy/wonder-blocks-core" "^6.4.3" "@khanacademy/wonder-blocks-icon-button" "^5.3.3" "@khanacademy/wonder-blocks-modal" "^5.1.8" "@khanacademy/wonder-blocks-tokens" "^1.3.1" - "@khanacademy/wonder-blocks-tooltip" "^2.3.7" + "@khanacademy/wonder-blocks-tooltip" "^2.3.8" "@khanacademy/wonder-blocks-typography" "^2.1.14" "@khanacademy/wonder-blocks-progress-spinner@2.1.1", "@khanacademy/wonder-blocks-progress-spinner@^2.1.1": @@ -2868,10 +2868,10 @@ "@khanacademy/wonder-blocks-tokens" "^1.3.0" "@khanacademy/wonder-blocks-typography" "^2.1.11" -"@khanacademy/wonder-blocks-tooltip@^2.3.7": - version "2.3.7" - resolved "https://registry.yarnpkg.com/@khanacademy/wonder-blocks-tooltip/-/wonder-blocks-tooltip-2.3.7.tgz#b09d16311b75609eaf8c0df68a43cf1a410fe7cb" - integrity sha512-bVLM0+cmGoFro0c6hQkJ3naLWnfrqfOXpNJSJl9HLiZZwWuWEg68cRZRP4KFM9b/2E2LM8GLpK95W7tFrhv6iw== +"@khanacademy/wonder-blocks-tooltip@^2.3.8": + version "2.3.8" + resolved "https://registry.yarnpkg.com/@khanacademy/wonder-blocks-tooltip/-/wonder-blocks-tooltip-2.3.8.tgz#8ecb9238a515ac33212e525dc548f80389c50375" + integrity sha512-3jsgqjIX2V2zwMlTiTabvAwhRL70TU+xmaIdJWy7M0JiQXeOFXX5mb9/vhcw0Pv/JFWEOBDAvShaKmQptSQpQg== dependencies: "@babel/runtime" "^7.18.6" "@khanacademy/wonder-blocks-core" "^6.4.3" @@ -15135,7 +15135,7 @@ string-length@^4.0.1: char-regex "^1.0.2" strip-ansi "^6.0.0" -"string-width-cjs@npm:string-width@^4.2.0", "string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.0.0, string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.2, string-width@^4.2.3: +"string-width-cjs@npm:string-width@^4.2.0": version "4.2.3" resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010" integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g== @@ -15153,6 +15153,15 @@ string-width@^1.0.1: is-fullwidth-code-point "^1.0.0" strip-ansi "^3.0.0" +"string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.0.0, string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.2, string-width@^4.2.3: + version "4.2.3" + resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010" + integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g== + dependencies: + emoji-regex "^8.0.0" + is-fullwidth-code-point "^3.0.0" + strip-ansi "^6.0.1" + string-width@^5.0.1, string-width@^5.1.2: version "5.1.2" resolved "https://registry.yarnpkg.com/string-width/-/string-width-5.1.2.tgz#14f8daec6d81e7221d2a357e668cab73bdbca794" @@ -15237,7 +15246,7 @@ string_decoder@~1.1.1: dependencies: safe-buffer "~5.1.0" -"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1: +"strip-ansi-cjs@npm:strip-ansi@^6.0.1": version "6.0.1" resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9" integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A== @@ -15251,6 +15260,13 @@ strip-ansi@^3.0.0, strip-ansi@^3.0.1: dependencies: ansi-regex "^2.0.0" +strip-ansi@^6.0.0, strip-ansi@^6.0.1: + version "6.0.1" + resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9" + integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A== + dependencies: + ansi-regex "^5.0.1" + strip-ansi@^7.0.1: version "7.1.0" resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-7.1.0.tgz#d5b6568ca689d8561370b0707685d22434faff45" @@ -16141,6 +16157,11 @@ utils-merge@1.0.1: resolved "https://registry.yarnpkg.com/utils-merge/-/utils-merge-1.0.1.tgz#9f95710f50a267947b2ccc124741c1028427e713" integrity sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA== +uuid@^10.0.0: + version "10.0.0" + resolved "https://registry.yarnpkg.com/uuid/-/uuid-10.0.0.tgz#5a95aa454e6e002725c79055fd42aaba30ca6294" + integrity sha512-8XkAphELsDnEGrDxUOHB3RGvXz6TeuYSGEZBOjtTtPm2lwhGBjLgOzLHB63IUWfBpNucQjND6d3AOudO+H3RWQ== + uuid@^3.3.2, uuid@^3.3.3: version "3.4.0" resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.4.0.tgz#b23e4358afa8a202fe7a100af1f5f883f02007ee" @@ -16464,7 +16485,7 @@ wordwrap@^1.0.0: resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-1.0.0.tgz#27584810891456a4171c8d0226441ade90cbcaeb" integrity sha512-gvVzJFlPycKc5dZN4yPkP8w7Dc37BtP1yczEneOb4uq34pXZcvrtRTmWV8W+Ume+XCxKgbjM+nevkyFPMybd4Q== -"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0: +"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0": version "7.0.0" resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43" integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q== @@ -16482,6 +16503,15 @@ wrap-ansi@^6.2.0: string-width "^4.1.0" strip-ansi "^6.0.0" +wrap-ansi@^7.0.0: + version "7.0.0" + resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43" + integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q== + dependencies: + ansi-styles "^4.0.0" + string-width "^4.1.0" + strip-ansi "^6.0.0" + wrap-ansi@^8.1.0: version "8.1.0" resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214"