Add generated labels to MathJax in Storybook (Khan#926)

Adds generated labels to MathJax in Storybook so that we can effectively test accessibility without involving webapp.

Issue: LC-1635

Author: nedredmond

Reviewers: benchristel, nedredmond, Myranae, jeremywiebe

Required Reviewers:

Approved By: benchristel

Checks: ✅ codecov/project, ✅ codecov/patch, ✅ Upload Coverage, ✅ Publish npm snapshot (ubuntu-latest, 20.x), ✅ Extract i18n strings (ubuntu-latest, 20.x), ✅ Publish Storybook to Chromatic (ubuntu-latest, 20.x), ✅ Check builds for changes in size (ubuntu-latest, 20.x), ✅ Cypress (ubuntu-latest, 20.x), ✅ Jest Coverage (ubuntu-latest, 20.x), ✅ Lint, Typecheck, Format, and Test (ubuntu-latest, 20.x), ✅ gerald, ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x)

Pull Request URL: Khan#926

.changeset/red-beans-dress.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/perseus": patch
+---
+
+Upgrade MathJax

packages/perseus/package.json

@@ -25,14 +25,14 @@
         "@khanacademy/kas": "^0.3.7",
         "@khanacademy/kmath": "^0.1.8",
         "@khanacademy/math-input": "^16.5.0",
-        "@khanacademy/mathjax-renderer": "git+ssh://[email protected]:Khan/mathjax-renderer.git#v1.5.0",
         "@khanacademy/perseus-core": "1.4.1",
         "@khanacademy/perseus-linter": "^0.3.10",
         "@khanacademy/pure-markdown": "^0.2.13",
         "@khanacademy/simple-markdown": "^0.11.2",
         "@khanacademy/wonder-blocks-banner": "^3.0.33"
     },
     "devDependencies": {
+        "@khanacademy/mathjax-renderer": "git+ssh://[email protected]:Khan/mathjax-renderer.git#v1.5.1",
         "@khanacademy/wonder-blocks-button": "^6.2.5",
         "@khanacademy/wonder-blocks-clickable": "^4.0.12",
         "@khanacademy/wonder-blocks-color": "^3.0.0",

testing/test-mathjax.tsx

@@ -23,11 +23,24 @@ type Props = {
 };
 
 export function TestMathjax({children: tex, onRender}: Props) {
-    const {domElement} = renderer.render(tex);
+    const ref = React.useRef<HTMLSpanElement>(null);
+    const {domElement, addLabelWhenPresentational} = React.useMemo(
+        () => renderer.render(tex),
+        [tex],
+    );
+
+    React.useLayoutEffect(() => {
+        if (ref.current) {
+            addLabelWhenPresentational(ref.current);
+            ref.current.innerHTML = "";
+            ref.current.appendChild(domElement);
+        }
+    });
 
     React.useEffect(() => {
         renderer.updateStyles();
         onRender?.();
     }, [tex, onRender]);
-    return <span dangerouslySetInnerHTML={{__html: domElement.outerHTML}} />;
+
+    return <span ref={ref} />;
 }

yarn.lock

@@ -2399,9 +2399,9 @@
     "@typescript-eslint/utils" "^5.60.1"
     checksync "^5.0.0"
 
-"@khanacademy/mathjax-renderer@git+ssh://[email protected]:Khan/mathjax-renderer.git#v1.5.0":
-  version "1.5.0"
-  resolved "git+ssh://[email protected]:Khan/mathjax-renderer.git#3277aaa03f743942a2f585ea8be76384d723dbba"
+"@khanacademy/mathjax-renderer@git+ssh://[email protected]:Khan/mathjax-renderer.git#v1.5.1":
+  version "1.5.1"
+  resolved "git+ssh://[email protected]:Khan/mathjax-renderer.git#17e5f540f20a717779824a42912ad8284ce04db2"
   dependencies:
     mathjax-full "3.2.2"
     mu-lambda "^0.0.3"