@khanacademy/perseus 6.2.2 → 6.3.0

package/dist/strings.js

@@ -52,6 +52,8 @@ module.exports = [
     i18n._("Correct (but you crossed it out)", {}),
     i18n._("Correct (selected)", {}),
     i18n._("Correct!", {}),
+    i18n._("Cosine", {}),
+    i18n._("Cube root", {}),
     i18n._("Current", {}),
     // I18N: As in the command, "Dilate the polygon"
     i18n._("Dilate", {}),
@@ -59,13 +61,19 @@ module.exports = [
     i18n._("Dilation", {}),
     i18n.$_("Dilation about %(point)s by %(scale)s", {}),
     i18n.$_("Dilation of scale %(scale)s about %(point)s", {}),
+    i18n._("Divide", {}),
     i18n._("Drag handles to make graph", {}),
     i18n._("End of reading passage.", {}),
     i18n._("entered in an invalid answer.", {}),
+    i18n._("Equals sign", {}),
     i18n.$_("Error rendering: %(error)s", {}),
     i18n._("Explain", {}),
+    i18n._("Exponent", {}),
     i18n._("False", {}),
+    i18n._("Fraction, excluding the current expression", {}),
     i18n._("Get another hint", {}),
+    i18n._("Greater than or equal to sign", {}),
+    i18n._("Greater than sign", {}),
     i18n._("Hide explanation", {}),
     i18n._("Hint #%(pos)s", {}),
     i18n._("Hints", {}),
@@ -77,25 +85,36 @@ module.exports = [
     i18n._("It looks like you left something blank or ", {}),
     i18n._("Keep trying", {}),
     i18n._("Khan Academy video wrapper", {}),
+    i18n._("Less than or equal to sign", {}),
+    i18n._("Less than sign", {}),
     // I18N: a label next to a reading passage to denote the line number
     i18n._("Line ", {}),
     i18n.$_("line %(lineNumber)s", {}),
     i18n.$_("lines %(lineRange)s", {}),
     i18n._("Loading...", {}),
+    i18n._("Logarithm with base 10", {}),
+    i18n._("Logarithm with custom base", {}),
     i18n._("Make circle filled", {}),
     i18n._("Make circle open", {}),
     i18n._("Make sure you fill in all cells in the matrix.", {}),
     i18n._("Make sure you select something for every row.", {}),
+    i18n._("Minus", {}),
     i18n.ngettext("Moves: %(num)s","Moves: %(num)s", {}),
+    i18n._("Multiply", {}),
+    i18n._("Natural logarithm", {}),
     i18n._("Next question", {}),
     i18n._("No", {}),
     i18n._("None of the above", {}),
+    i18n._("Not-equals sign", {}),
     i18n._("Note: For this question, the shape will not move.", {}),
     i18n._("Number of divisions:", {}),
     i18n._("Number of trials:", {}),
     i18n._("Parameter", {}),
+    i18n._("Phi", {}),
+    i18n._("Pi", {}),
     i18n._("Please choose the correct number of answers.", {}),
     i18n.$_("Please make sure the number of divisions is in the range %(divRangeString)s.", {}),
+    i18n._("Plus", {}),
     i18n._("Reaction arrow pointing to the right.", {}),
     // I18N: As in the command, "Reflect the polygon"
     i18n._("Reflect", {}),
@@ -113,15 +132,19 @@ module.exports = [
     i18n._("Run simulation", {}),
     i18n._("Sample size:", {}),
     i18n._("See video transcript", {}),
+    i18n._("Sine", {}),
     i18n._("Skip to %(title)s", {}),
     i18n._("Something went wrong.", {}),
     i18n._("Sorry, I don't understand that!", {}),
+    i18n._("Square root", {}),
     i18n._("Switch direction", {}),
+    i18n._("Tangent", {}),
     i18n._("Tap each dot on the image to select all answers that apply.", {}),
     i18n._("Tap each dot on the image to select an answer.", {}),
     i18n._("Tap to add points", {}),
     i18n._("That answer is numerically incorrect.", {}),
     i18n._("The symbol %(questionSymbol)s indicates that question %(questionNumber)s references this portion of the passage.", {}),
+    i18n._("Theta", {}),
     i18n._("This controls the proportion or percentage that will be used in your simulation.", {}),
     i18n._("This controls the sample size that will be used in your simulation. For example, if you set this to 100, then for each trial, responses from 100 participants will be simulated.", {}),
     i18n._("This is the number of trials used in the simulation. For example, if set to 50, then the survey will be conducted 50 times.", {}),

package/package.json

@@ -3,7 +3,7 @@
     "description": "Core Perseus API (includes renderers and widgets)",
     "author": "Khan Academy",
     "license": "MIT",
-    "version": "6.2.2",
+    "version": "6.3.0",
     "publishConfig": {
         "access": "public"
     },
@@ -23,11 +23,10 @@
     "dependencies": {
         "@khanacademy/kas": "^0.3.1",
         "@khanacademy/kmath": "^0.1.1",
-        "@khanacademy/math-input": "^4.1.1",
+        "@khanacademy/math-input": "^4.2.0",
         "@khanacademy/perseus-linter": "^0.3.1",
         "@khanacademy/pure-markdown": "^0.2.3",
-        "@khanacademy/simple-markdown": "^0.9.3",
-        "mathquill": "git+https://git@github.com/Khan/mathquill.git#a9ae54e057c5c1acc8244a5627acbff29901d992"
+        "@khanacademy/simple-markdown": "^0.9.3"
     },
     "devDependencies": {
         "@khanacademy/wonder-blocks-button": "^4.0.8",
@@ -92,4 +91,4 @@
         "underscore": "^1.4.4"
     },
     "keywords": []
-}
+}

package/src/components/__tests__/math-input.test.tsx

@@ -0,0 +1,60 @@
+import {render, screen} from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import * as React from "react";
+
+import "@testing-library/jest-dom/extend-expect";
+import {testDependencies} from "../../../../../testing/test-dependencies";
+import * as Dependencies from "../../dependencies";
+import MathInput from "../math-input";
+
+describe("Perseus' MathInput", () => {
+    beforeEach(() => {
+        jest.spyOn(Dependencies, "getDependencies").mockReturnValue(
+            testDependencies,
+        );
+    });
+
+    it("renders", () => {
+        // Assemble
+        render(
+            <MathInput
+                onChange={() => {}}
+                buttonSets={["basic"]}
+                labelText="test"
+            />,
+        );
+
+        // Assert
+        expect(screen.getByLabelText("test")).toBeInTheDocument();
+    });
+
+    it("is possible to type in the input", () => {
+        // Assemble
+        const mockOnChange = jest.fn();
+        render(<MathInput onChange={mockOnChange} buttonSets={["basic"]} />);
+
+        // Act
+        userEvent.type(screen.getByRole("textbox"), "12345");
+
+        // Assert
+        expect(mockOnChange).toHaveBeenLastCalledWith("12345");
+    });
+
+    it("is possible to use buttons", () => {
+        // Assemble
+        const mockOnChange = jest.fn();
+        render(<MathInput onChange={mockOnChange} buttonSets={["basic"]} />);
+
+        // Act
+        // focusing the input triggers the popover
+        screen.getByRole("textbox").focus();
+        userEvent.type(screen.getByRole("textbox"), "1");
+        userEvent.click(screen.getByRole("button", {name: "Plus"}));
+        userEvent.type(screen.getByRole("textbox"), "2");
+        userEvent.click(screen.getByRole("button", {name: "Minus"}));
+        userEvent.type(screen.getByRole("textbox"), "3");
+
+        // Assert
+        expect(mockOnChange).toHaveBeenLastCalledWith("1+2-3");
+    });
+});

package/src/components/math-input.tsx

@@ -1,7 +1,11 @@
-import {keyTranslator} from "@khanacademy/math-input";
+import {
+    keyTranslator,
+    createMathField,
+    mathQuillInstance,
+    MathFieldInterface,
+} from "@khanacademy/math-input";
 import classNames from "classnames";
 import $ from "jquery";
-import MathQuill from "mathquill";
 import * as React from "react";
 import ReactDOM from "react-dom";
 import _ from "underscore";
@@ -52,6 +56,8 @@ const customKeyTranslator = {
 class MathInput extends React.Component<Props, State> {
     // @ts-expect-error [FEI-5003] - TS2564 - Property 'mouseDown' has no initializer and is not definitely assigned in the constructor.
     mouseDown: boolean;
+    __mathFieldWrapperRef: HTMLSpanElement | null = null;
+    __mathField: MathFieldInterface | null = null;
 
     static defaultProps: DefaultProps = {
         value: "",
@@ -65,100 +71,9 @@ class MathInput extends React.Component<Props, State> {
         window.addEventListener("mousedown", this.handleMouseDown);
         window.addEventListener("mouseup", this.handleMouseUp);
 
-        let initialized = false;
-
-        // Initialize MathQuill.MathField instance
-        this.mathField({
-            // LaTeX commands that, when typed, are immediately replaced by the
-            // appropriate symbol. This does not include ln, log, or any of the
-            // trig functions; those are always interpreted as commands.
-            autoCommands: "pi theta phi sqrt nthroot",
-
-            // Pop the cursor out of super/subscripts on arithmetic operators
-            // or (in)equalities.
-            charsThatBreakOutOfSupSub: "+-*/=<>≠≤≥",
-
-            // Prevent excessive super/subscripts or fractions from being
-            // created without operands, e.g. when somebody holds down a key
-            supSubsRequireOperand: true,
-
-            // The name of this option is somewhat misleading, as tabbing in
-            // MathQuill breaks you out of a nested context (fraction/script)
-            // if you're in one, but moves focus to the next input if you're
-            // not. Spaces (with this option enabled) are just ignored in the
-            // latter case.
-            //
-            // TODO(alex): In order to allow inputting mixed numbers, we will
-            // have to accept spaces in certain cases. The desired behavior is
-            // still to escape nested contexts if currently in one, but to
-            // insert a space if not (we don't expect mixed numbers in nested
-            // contexts). We should also limit to one consecutive space.
-            spaceBehavesLikeTab: true,
-
-            handlers: {
-                edited: (mathField) => {
-                    // This handler is guaranteed to be called on change, but
-                    // unlike React it sometimes generates false positives.
-                    // One of these is on initialization (with an empty string
-                    // value), so we have to guard against that below.
-                    let value = mathField.latex();
-
-                    // Provide a MathQuill-compatible way to generate the
-                    // not-equals sign without pasting unicode or typing TeX
-                    value = value.replace(/<>/g, "\\ne");
-
-                    // Use the specified symbol to represent multiplication
-                    // TODO(alex): Add an option to disallow variables, in
-                    // which case 'x' should get converted to '\\times'
-                    if (this.props.convertDotToTimes) {
-                        value = value.replace(/\\cdot/g, "\\times");
-
-                        // Preserve cursor position in the common case:
-                        // typing '*' to insert a multiplication sign.
-                        // We do this by modifying internal MathQuill state
-                        // directly, instead of waiting for `.latex()` to be
-                        // called in `componentDidUpdate()`.
-                        const left = mathField.__controller.cursor[MathQuill.L];
-                        if (left && left.ctrlSeq === "\\cdot ") {
-                            mathField.__controller.backspace();
-                            mathField.cmd("\\times");
-                        }
-                    } else {
-                        value = value.replace(/\\times/g, "\\cdot");
-                    }
-
-                    if (initialized && this.props.value !== value) {
-                        this.props.onChange(value);
-                    }
-                },
-                enter: () => {
-                    // NOTE(kevinb): This isn't how answers to exercises are
-                    // submitted.  The actual mechanism for this can be found
-                    // in exercise-problem-template.jsx, see `handleSubmit`.
-
-                    // This handler is called when the user presses the enter
-                    // key. Since this isn't an actual <input> element, we have
-                    // to manually trigger the usually automatic form submit.
-                    // eslint-disable-next-line react/no-string-refs
-                    // @ts-expect-error [FEI-5003] - TS2769 - No overload matches this call. | TS2339 - Property 'submit' does not exist on type 'JQueryStatic'.
-                    $(ReactDOM.findDOMNode(this.refs.mathinput)).submit();
-                },
-                upOutOf: (mathField) => {
-                    // This handler is called when the user presses the up
-                    // arrow key, but there is nowhere in the expression to go
-                    // up to (no numerator or exponent). For ease of use,
-                    // interpret this as an attempt to create an exponent.
-                    mathField.typedText("^");
-                },
-            },
-        });
-
         // Ideally, we would be able to pass an initial value directly into
-        // the constructor above
-        // @ts-expect-error [FEI-5003] - TS2554 - Expected 1 arguments, but got 0.
-        this.mathField().latex(this.props.value);
-
-        initialized = true;
+        // the constructor
+        this.mathField()?.latex(this.props.value);
     }
 
     componentWillUnmount() {
@@ -224,12 +139,11 @@ class MathInput extends React.Component<Props, State> {
     };
 
     insert: (value: any) => void = (value) => {
-        // @ts-expect-error [FEI-5003] - TS2554 - Expected 1 arguments, but got 0.
         const input = this.mathField();
         const inputModifier = customKeyTranslator[value];
         if (inputModifier) {
             inputModifier(input, value);
-            input.focus();
+            input?.focus();
             return;
         }
 
@@ -240,36 +154,93 @@ class MathInput extends React.Component<Props, State> {
         if (_(value).isFunction()) {
             value(input);
         } else if (value[0] === "\\") {
-            input.cmd(value).focus();
+            input?.cmd(value).focus();
         } else {
-            input.write(value).focus();
+            input?.write(value).focus();
         }
-        input.focus();
+        input?.focus();
     };
 
-    mathField: (arg1: any) => any = (options) => {
-        // The MathQuill API is now "versioned" through its own "InterVer"
-        // system.
-        // See: https://github.com/mathquill/mathquill/pull/459
-        const MQ = MathQuill.getInterface(2);
-
-        // MathQuill.MathField takes a DOM node, MathQuill-ifies it if it's
-        // seeing that node for the first time, then returns the associated
-        // MathQuill object for that node. It is stable - will always return
-        // the same object when called on the same DOM node.
-        // eslint-disable-next-line react/no-string-refs
-        return MQ.MathField(ReactDOM.findDOMNode(this.refs.mathinput), options);
+    mathField: () => MathFieldInterface | null = () => {
+        if (!this.__mathField && this.__mathFieldWrapperRef) {
+            // Initialize MathQuill.MathField instance
+            this.__mathField = createMathField(
+                this.__mathFieldWrapperRef,
+                (baseConfig) => ({
+                    ...baseConfig,
+                    handlers: {
+                        edit: (mathField) => {
+                            // This handler is guaranteed to be called on change, but
+                            // unlike React it sometimes generates false positives.
+                            // One of these is on initialization (with an empty string
+                            // value), so we have to guard against that below.
+                            let value = mathField.latex();
+
+                            // Provide a MathQuill-compatible way to generate the
+                            // not-equals sign without pasting unicode or typing TeX
+                            value = value.replace(/<>/g, "\\ne");
+
+                            // Use the specified symbol to represent multiplication
+                            // TODO(alex): Add an option to disallow variables, in
+                            // which case 'x' should get converted to '\\times'
+                            if (this.props.convertDotToTimes) {
+                                value = value.replace(/\\cdot/g, "\\times");
+
+                                // Preserve cursor position in the common case:
+                                // typing '*' to insert a multiplication sign.
+                                // We do this by modifying internal MathQuill state
+                                // directly, instead of waiting for `.latex()` to be
+                                // called in `componentDidUpdate()`.
+                                const left =
+                                    mathField.__controller.cursor[
+                                        mathQuillInstance.L
+                                    ];
+                                if (left && left.ctrlSeq === "\\cdot ") {
+                                    mathField.__controller.backspace();
+                                    mathField.cmd("\\times");
+                                }
+                            } else {
+                                value = value.replace(/\\times/g, "\\cdot");
+                            }
+
+                            if (this.props.value !== value) {
+                                this.props.onChange(value);
+                            }
+                        },
+                        enter: () => {
+                            // NOTE(kevinb): This isn't how answers to exercises are
+                            // submitted.  The actual mechanism for this can be found
+                            // in exercise-problem-template.jsx, see `handleSubmit`.
+
+                            // This handler is called when the user presses the enter
+                            // key. Since this isn't an actual <input> element, we have
+                            // to manually trigger the usually automatic form submit.
+                            if (this.__mathFieldWrapperRef) {
+                                $(this.__mathFieldWrapperRef).submit();
+                            }
+                        },
+                        upOutOf: (mathField) => {
+                            // This handler is called when the user presses the up
+                            // arrow key, but there is nowhere in the expression to go
+                            // up to (no numerator or exponent). For ease of use,
+                            // interpret this as an attempt to create an exponent.
+                            mathField.typedText("^");
+                        },
+                    },
+                }),
+            );
+        }
+
+        return this.__mathField;
     };
 
     focus: () => void = () => {
-        // @ts-expect-error [FEI-5003] - TS2554 - Expected 1 arguments, but got 0.
-        this.mathField().focus();
+        this.mathField()?.focus();
         this.setState({focused: true});
     };
 
     blur: () => void = () => {
-        // @ts-expect-error [FEI-5003] - TS2554 - Expected 1 arguments, but got 0.
-        this.mathField().blur();
+        this.mathField()?.blur();
         this.setState({focused: false});
     };
 
@@ -305,8 +276,7 @@ class MathInput extends React.Component<Props, State> {
                 <div style={{display: "inline-block"}}>
                     <span
                         className={className}
-                        // eslint-disable-next-line react/no-string-refs
-                        ref="mathinput"
+                        ref={(ref) => (this.__mathFieldWrapperRef = ref)}
                         aria-label={this.props.labelText}
                         onFocus={this.handleFocus}
                         onBlur={this.handleBlur}

package/src/components/tex-buttons.tsx

@@ -10,7 +10,14 @@ const prettyBig = {fontSize: "150%"} as const;
 const slightlyBig = {fontSize: "120%"} as const;
 const symbStyle = {fontSize: "130%"} as const;
 
-type ButtonSet = (props: any) => [React.ReactNode, Keys];
+type ButtonSet = (props: any) => [
+    // inside of button
+    React.ReactNode,
+    // the key message it sends on click
+    Keys,
+    // label
+    string,
+];
 
 type ButtonSets = {
     readonly [key: string]: ReadonlyArray<ButtonSet>;
@@ -27,12 +34,14 @@ const basic: ReadonlyArray<ButtonSet> = [
             +
         </span>,
         "PLUS",
+        i18n._("Plus"),
     ],
     () => [
         <span key="minus" style={prettyBig}>
             -
         </span>,
         "MINUS",
+        i18n._("Minus"),
     ],
 
     // TODO(joel) - display as \cdot when appropriate
@@ -44,6 +53,7 @@ const basic: ReadonlyArray<ButtonSet> = [
                     {i18n.doNotTranslate("\\times")}
                 </TeX>,
                 "TIMES",
+                i18n._("Multiply"),
             ];
         }
         return [
@@ -51,6 +61,7 @@ const basic: ReadonlyArray<ButtonSet> = [
                 {i18n.doNotTranslate("\\cdot")}
             </TeX>,
             "CDOT",
+            i18n._("Multiply"),
         ];
     },
     () => {
@@ -60,6 +71,7 @@ const basic: ReadonlyArray<ButtonSet> = [
                 {i18n.doNotTranslate("\\frac{x}{y}")}
             </TeX>,
             "FRAC",
+            i18n._("Fraction, excluding the current expression"),
         ];
     },
 ];
@@ -73,6 +85,7 @@ const buttonSets: ButtonSets = {
             return [
                 <TeX key="div">{i18n.doNotTranslate("\\div")}</TeX>,
                 "DIVIDE",
+                i18n._("Divide"),
             ];
         },
     ]),
@@ -80,15 +93,27 @@ const buttonSets: ButtonSets = {
     trig: [
         () => {
             const {TeX} = getDependencies();
-            return [<TeX key="sin">{i18n.doNotTranslate("\\sin")}</TeX>, "SIN"];
+            return [
+                <TeX key="sin">{i18n.doNotTranslate("\\sin")}</TeX>,
+                "SIN",
+                i18n._("Sine"),
+            ];
         },
         () => {
             const {TeX} = getDependencies();
-            return [<TeX key="cos">{i18n.doNotTranslate("\\cos")}</TeX>, "COS"];
+            return [
+                <TeX key="cos">{i18n.doNotTranslate("\\cos")}</TeX>,
+                "COS",
+                i18n._("Cosine"),
+            ];
         },
         () => {
             const {TeX} = getDependencies();
-            return [<TeX key="tan">{i18n.doNotTranslate("\\tan")}</TeX>, "TAN"];
+            return [
+                <TeX key="tan">{i18n.doNotTranslate("\\tan")}</TeX>,
+                "TAN",
+                i18n._("Tangent"),
+            ];
         },
         () => {
             const {TeX} = getDependencies();
@@ -97,6 +122,7 @@ const buttonSets: ButtonSets = {
                     {i18n.doNotTranslate("\\theta")}
                 </TeX>,
                 "THETA",
+                i18n._("Theta"),
             ];
         },
         () => {
@@ -112,6 +138,7 @@ const buttonSets: ButtonSets = {
                     </TeX>
                 </span>,
                 "PHI",
+                i18n._("Phi"),
             ];
         },
     ],
@@ -122,6 +149,7 @@ const buttonSets: ButtonSets = {
             return [
                 <TeX key="sqrt">{i18n.doNotTranslate("\\sqrt{x}")}</TeX>,
                 "SQRT",
+                i18n._("Square root"),
             ];
         },
         // TODO(joel) - how does desmos do this?
@@ -130,6 +158,7 @@ const buttonSets: ButtonSets = {
             return [
                 <TeX key="nthroot">{i18n.doNotTranslate("\\sqrt[3]{x}")}</TeX>,
                 "NTHROOT3",
+                i18n._("Cube root"),
             ];
         },
         () => {
@@ -139,6 +168,7 @@ const buttonSets: ButtonSets = {
                     {i18n.doNotTranslate("a^b")}
                 </TeX>,
                 "POW",
+                i18n._("Exponent"),
             ];
         },
         () => {
@@ -148,6 +178,7 @@ const buttonSets: ButtonSets = {
                     {i18n.doNotTranslate("\\pi")}
                 </TeX>,
                 "PI",
+                i18n._("Pi"),
             ];
         },
     ],
@@ -155,17 +186,26 @@ const buttonSets: ButtonSets = {
     logarithms: [
         () => {
             const {TeX} = getDependencies();
-            return [<TeX key="log">{i18n.doNotTranslate("\\log")}</TeX>, "LOG"];
+            return [
+                <TeX key="log">{i18n.doNotTranslate("\\log")}</TeX>,
+                "LOG",
+                i18n._("Logarithm with base 10"),
+            ];
         },
         () => {
             const {TeX} = getDependencies();
-            return [<TeX key="ln">{i18n.doNotTranslate("\\ln")}</TeX>, "LN"];
+            return [
+                <TeX key="ln">{i18n.doNotTranslate("\\ln")}</TeX>,
+                "LN",
+                i18n._("Natural logarithm"),
+            ];
         },
         () => {
             const {TeX} = getDependencies();
             return [
                 <TeX key="log_b">{i18n.doNotTranslate("\\log_b")}</TeX>,
                 "LOG_B",
+                i18n._("Logarithm with custom base"),
             ];
         },
     ],
@@ -173,30 +213,50 @@ const buttonSets: ButtonSets = {
     "basic relations": [
         () => {
             const {TeX} = getDependencies();
-            return [<TeX key="eq">{"="}</TeX>, "EQUAL"];
+            return [<TeX key="eq">{"="}</TeX>, "EQUAL", i18n._("Equals sign")];
         },
         () => {
             const {TeX} = getDependencies();
-            return [<TeX key="lt">{i18n.doNotTranslate("\\lt")}</TeX>, "LT"];
+            return [
+                <TeX key="lt">{i18n.doNotTranslate("\\lt")}</TeX>,
+                "LT",
+                i18n._("Less than sign"),
+            ];
         },
         () => {
             const {TeX} = getDependencies();
-            return [<TeX key="gt">{i18n.doNotTranslate("\\gt")}</TeX>, "GT"];
+            return [
+                <TeX key="gt">{i18n.doNotTranslate("\\gt")}</TeX>,
+                "GT",
+                i18n._("Greater than sign"),
+            ];
         },
     ],
 
     "advanced relations": [
         () => {
             const {TeX} = getDependencies();
-            return [<TeX key="neq">{i18n.doNotTranslate("\\neq")}</TeX>, "NEQ"];
+            return [
+                <TeX key="neq">{i18n.doNotTranslate("\\neq")}</TeX>,
+                "NEQ",
+                i18n._("Not-equals sign"),
+            ];
         },
         () => {
             const {TeX} = getDependencies();
-            return [<TeX key="leq">{i18n.doNotTranslate("\\leq")}</TeX>, "LEQ"];
+            return [
+                <TeX key="leq">{i18n.doNotTranslate("\\leq")}</TeX>,
+                "LEQ",
+                i18n._("Less than or equal to sign"),
+            ];
         },
         () => {
             const {TeX} = getDependencies();
-            return [<TeX key="geq">{i18n.doNotTranslate("\\geq")}</TeX>, "GEQ"];
+            return [
+                <TeX key="geq">{i18n.doNotTranslate("\\geq")}</TeX>,
+                "GEQ",
+                i18n._("Greater than or equal to sign"),
+            ];
         },
     ],
 };
@@ -242,6 +302,7 @@ class TexButtons extends React.Component<Props> {
                         // @ts-expect-error [FEI-5003] - TS2533 - Object is possibly 'null' or 'undefined'. | TS2339 - Property 'key' does not exist on type 'boolean | ReactChild | ReactFragment | ReactPortal'.
                         key={symbol[0].key}
                         type="button"
+                        aria-label={symbol[2]}
                     >
                         {symbol[0]}
                     </button>