@khanacademy/perseus-editor 2.15.3 → 2.15.5

package/src/widgets/interaction-editor/rectangle-editor.tsx

@@ -0,0 +1,105 @@
+import {
+    components,
+    Changeable,
+    Dependencies,
+    EditorJsonify,
+    KhanColors,
+    ColorPicker,
+} from "@khanacademy/perseus";
+import PropTypes from "prop-types";
+import * as React from "react";
+import _ from "underscore";
+
+const {MathInput} = components;
+const {getDependencies} = Dependencies;
+
+type RectangleEditorProps = any;
+
+//
+// Editor for rectangles
+//
+// TODO(eater): Factor this out maybe?
+//
+class RectangleEditor extends React.Component<RectangleEditorProps> {
+    static propTypes = {
+        ...Changeable.propTypes,
+        color: PropTypes.string,
+        coordX: PropTypes.string,
+        coordY: PropTypes.string,
+        height: PropTypes.string,
+        width: PropTypes.string,
+    };
+
+    static defaultProps = {
+        coordX: "-5",
+        coordY: "5",
+        width: "2",
+        height: "3",
+        color: KhanColors.LIGHT_BLUE,
+    };
+
+    change: (arg1: any, arg2?: any, arg3?: any) => any = (...args) => {
+        return Changeable.change.apply(this, args);
+    };
+
+    serialize = () => {
+        return EditorJsonify.serialize.call(this);
+    };
+
+    render(): React.ReactNode {
+        const {TeX} = getDependencies();
+        const analyticsStub = {onAnalyticsEvent: () => Promise.resolve()};
+
+        return (
+            <div className="graph-settings">
+                <div className="perseus-widget-row">
+                    Bottom left: <TeX>\Large(</TeX>
+                    <MathInput
+                        buttonsVisible="never"
+                        value={this.props.coordX}
+                        onChange={this.change("coordX")}
+                        analytics={analyticsStub}
+                    />
+                    <TeX>,</TeX>{" "}
+                    <MathInput
+                        buttonsVisible="never"
+                        value={this.props.coordY}
+                        onChange={this.change("coordY")}
+                        analytics={analyticsStub}
+                    />
+                    <TeX>\Large)</TeX>
+                </div>
+                <div className="perseus-widget-row">
+                    Width:{" "}
+                    <MathInput
+                        buttonsVisible="never"
+                        value={this.props.width}
+                        onChange={this.change("width")}
+                        analytics={analyticsStub}
+                    />
+                </div>
+                <div className="perseus-widget-row">
+                    Height:{" "}
+                    <MathInput
+                        buttonsVisible="never"
+                        value={this.props.height}
+                        onChange={this.change("height")}
+                        analytics={analyticsStub}
+                    />
+                </div>
+                <div className="perseus-widget-row">
+                    <ColorPicker
+                        value={this.props.color}
+                        lightColors={true}
+                        onChange={this.change("color")}
+                    />
+                </div>
+                <div className="perseus-widget-row">
+                    You want a border? Sorry, draw your own.
+                </div>
+            </div>
+        );
+    }
+}
+
+export default RectangleEditor;

package/src/widgets/number-line-editor.tsx

@@ -214,12 +214,23 @@ class NumberLineEditor extends React.Component<Props> {
                         value={this.props.correctRel}
                         // @ts-expect-error - TS2322 - Type '(arg1: ChangeEvent<HTMLInputElement>) => void' is not assignable to type 'ChangeEventHandler<HTMLSelectElement>'.
                         onChange={this.onChangeRelation}
+                        aria-label="Select relationship"
                     >
-                        <option value="eq"> = </option>
-                        <option value="lt"> &lt; </option>
-                        <option value="gt"> &gt; </option>
-                        <option value="le"> &le; </option>
-                        <option value="ge"> &ge; </option>
+                        <option value="eq" aria-label="Equal">
+                            =
+                        </option>
+                        <option value="lt" aria-label="Less than">
+                            &lt;
+                        </option>
+                        <option value="gt" aria-label="Greater than">
+                            &gt;
+                        </option>
+                        <option value="le" aria-label="Less than or equal">
+                            &le;
+                        </option>
+                        <option value="ge" aria-label="Greater than or equal">
+                            &ge;
+                        </option>
                     </select>{" "}
                     <NumberInput
                         value={this.props.correctX}

package/src/widgets/numeric-input-editor.tsx

@@ -381,6 +381,7 @@ const NumericInputEditor: any = createReactClass({
                             <a
                                 href="javascript:void(0)"
                                 className="answer-trash"
+                                aria-label="Delete answer"
                                 onClick={() => this.onTrashAnswer(i)}
                                 onKeyDown={(e) =>
                                     this.onSpace(e, this.onTrashAnswer, i)
@@ -391,6 +392,7 @@ const NumericInputEditor: any = createReactClass({
                             <a
                                 href="javascript:void(0)"
                                 className="options-toggle"
+                                aria-label="Toggle options"
                                 onClick={() => this.onToggleOptions(i)}
                                 onKeyDown={(e) =>
                                     this.onSpace(e, this.onToggleOptions, i)