fix(LEMS-2132): add dialog title and description to expression widget (…

…#1475) ## Summary: - Adds dialog title and description for expression widget - Bumps wonder blocks popover versions Note: - Screen reader will not read both the `aria-label` and the `aria-describedby` attributes. User has the option to navigate into the expression widget navigation instructions. Issue: LEMS-2132 ## Test plan: 1. Navigate to [Math Input stories](https://650db21c3f5d1b2f13c02952-njskcgaclq.chromatic.com/?path=/docs/perseus-components-math-input--docs) 2. Using Screen Reader - open the Math Input Expression Widget ### Expected behavior: Screen reader reads "mathematics keyboard" ## Screenshots: https://github.com/user-attachments/assets/7693b8d1-f34d-4b09-944a-c145c323ab5a ### With unique id ![Screenshot 2024-08-05 at 3 18 21 PM](https://github.com/user-attachments/assets/5af34a16-b616-4643-a37a-1298cbab9d37)
Khan · Aug 6, 2024 · 6f20129 · 6f20129
2 parents 0b625f5 + 207ca28
commit 6f20129
Show file tree

Hide file tree

Showing 7 changed files with 102 additions and 35 deletions.
diff --git a/.changeset/fresh-tips-guess.md 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
@@ -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
@@ -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
@@ -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
@@ -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<InnerProps, State> {
             "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<InnerProps, State> {
                         opened={this.state.keypadOpen}
                         onClose={() => this.closeKeypad()}
                         dismissEnabled
+                        aria-label={this.context.strings.mathInputTitle}
+                        aria-describedby={`popover-content-${popoverContentUniqueId}`}
                         content={() => (
-                            <PopoverContentCore
-                                closeButtonVisible
-                                style={styles.popoverContent}
-                            >
-                                <DesktopKeypad
-                                    onAnalyticsEvent={
-                                        this.props.analytics.onAnalyticsEvent
-                                    }
-                                    extraKeys={this.props.extraKeys}
-                                    onClickKey={this.handleKeypadPress}
-                                    cursorContext={this.state.cursorContext}
-                                    convertDotToTimes={
-                                        this.props.convertDotToTimes
-                                    }
-                                    {...(this.props.keypadButtonSets ??
-                                        mapButtonSets(this.props?.buttonSets))}
-                                />
-                            </PopoverContentCore>
+                            <>
+                                <HeadingMedium
+                                    id={`popover-content-${popoverContentUniqueId}`}
+                                    style={a11y.srOnly}
+                                >
+                                    {this.context.strings.mathInputDescription}
+                                </HeadingMedium>
+                                <PopoverContentCore
+                                    closeButtonVisible
+                                    style={styles.popoverContent}
+                                >
+                                    <DesktopKeypad
+                                        onAnalyticsEvent={
+                                            this.props.analytics
+                                                .onAnalyticsEvent
+                                        }
+                                        extraKeys={this.props.extraKeys}
+                                        onClickKey={this.handleKeypadPress}
+                                        cursorContext={this.state.cursorContext}
+                                        convertDotToTimes={
+                                            this.props.convertDotToTimes
+                                        }
+                                        {...(this.props.keypadButtonSets ??
+                                            mapButtonSets(
+                                                this.props?.buttonSets,
+                                            ))}
+                                    />
+                                </PopoverContentCore>
+                            </>
                         )}
                     >
                         {this.props.buttonsVisible === "never" ? (

diff --git 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
@@ -2765,17 +2765,17 @@
     "@khanacademy/wonder-blocks-tokens" "^1.3.0"
     "@khanacademy/wonder-blocks-typography" "^2.1.11"
 
-"@khanacademy/[email protected].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/[email protected].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/[email protected]", "@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 @@ [email protected]:
   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"