@khanacademy/perseus 1.0.0 → 1.1.1

package/src/widgets/__tests__/radio_test.jsx

@@ -25,7 +25,7 @@ import type {
 import type {APIOptions} from "../../types.js";
 
 const selectOption = (index: number) => {
-    const options = screen.getAllByRole("checkbox");
+    const options = screen.getAllByRole("radio");
 
     // element that is null/undefined (ie. if the index is invalid) so we
     // manually check and throw here to protect future me, and others :)
@@ -101,8 +101,7 @@ describe("single-choice question", () => {
                 it("should accept the right answer (touch)", () => {
                     // Arrange
                     const {renderer} = renderQuestion(question, apiOptions);
-                    const correctRadio =
-                        screen.getAllByRole("checkbox")[correct];
+                    const correctRadio = screen.getAllByRole("radio")[correct];
 
                     // Act
                     fireEvent.touchStart(correctRadio);
@@ -157,7 +156,7 @@ describe("single-choice question", () => {
                     renderer.deselectIncorrectSelectedChoices();
 
                     // Assert
-                    screen.getAllByRole("checkbox").forEach((r) => {
+                    screen.getAllByRole("radio").forEach((r) => {
                         expect(r).not.toBeChecked();
                     });
                 });
@@ -181,9 +180,14 @@ describe("single-choice question", () => {
 
                     // Assert
                     // Everything's read-only so no selections made
-                    screen.getAllByRole("checkbox").forEach((r) => {
-                        expect(r).toHaveAttribute("aria-disabled", "true");
-                    });
+                    // Note(TB): The visual buttons are hidden from screen readers
+                    // so they need to be identified as hidden
+                    // The visual button has the aria attributes
+                    screen
+                        .getAllByRole("button", {hidden: true})
+                        .forEach((r) => {
+                            expect(r).toHaveAttribute("aria-disabled", "true");
+                        });
                 });
             },
         );
@@ -194,11 +198,18 @@ describe("single-choice question", () => {
 
             // Act
             userEvent.tab();
-            expect(screen.getAllByRole("checkbox")[0]).toHaveFocus();
+            // Note(TB): The visual buttons are hidden from screen readers
+            // so they need to be identified as hidden;
+            // cannot access screen reader buttons via tabbing
+            expect(
+                screen.getAllByRole("button", {hidden: true})[0],
+            ).toHaveFocus();
             userEvent.tab();
 
             // Assert
-            expect(screen.getAllByRole("checkbox")[1]).toHaveFocus();
+            expect(
+                screen.getAllByRole("button", {hidden: true})[1],
+            ).toHaveFocus();
         });
 
         it("should be able to navigate up by keyboard", () => {
@@ -207,13 +218,23 @@ describe("single-choice question", () => {
 
             // Act
             userEvent.tab();
-            expect(screen.getAllByRole("checkbox")[0]).toHaveFocus();
+            // Note(TB): The visual buttons are hidden from screen readers
+            // so they need to be identified as hidden
+            expect(
+                screen.getAllByRole("button", {hidden: true})[0],
+            ).toHaveFocus();
+
             userEvent.tab();
-            expect(screen.getAllByRole("checkbox")[1]).toHaveFocus();
+            expect(
+                screen.getAllByRole("button", {hidden: true})[1],
+            ).toHaveFocus();
+
             userEvent.tab({shift: true});
 
             // Assert
-            expect(screen.getAllByRole("checkbox")[0]).toHaveFocus();
+            expect(
+                screen.getAllByRole("button", {hidden: true})[0],
+            ).toHaveFocus();
         });
 
         it("should be able to navigate through 'None of the above' choice by keyboard", () => {
@@ -229,7 +250,11 @@ describe("single-choice question", () => {
             userEvent.tab();
 
             // Assert
-            expect(screen.getAllByRole("checkbox")[2]).toHaveFocus();
+            // Note(TB): The visual buttons are hidden from screen readers
+            // so they need to be identified as hidden
+            expect(
+                screen.getAllByRole("button", {hidden: true})[2],
+            ).toHaveFocus();
         });
 
         it.each([
@@ -251,7 +276,7 @@ describe("single-choice question", () => {
             // We click on the first item, which was the second (index == 1)
             // item in the original choices. But because of enforced ordering,
             // it is now at the top of the list (and thus our correct answer).
-            userEvent.click(screen.getAllByRole("checkbox")[0]);
+            userEvent.click(screen.getAllByRole("radio")[0]);
 
             // Assert
             const items = screen.getAllByRole("listitem");
@@ -393,7 +418,6 @@ describe("single-choice question", () => {
 
             it("should cross-out selection and dismiss button when clicked", async () => {
                 // Arrange
-
                 renderQuestion(question, crossOutApiOptions);
                 userEvent.click(
                     screen.getByRole("button", {

package/src/widgets/definition.jsx

@@ -72,7 +72,7 @@ class Definition extends React.Component<DefinitionProps> {
                     >
                         <span className="perseus-widget-definition">
                             <Button
-                                size="small"
+                                size="medium"
                                 kind="tertiary"
                                 onClick={() => {
                                     this.props.trackInteraction();

package/src/widgets/graded-group.jsx

@@ -294,7 +294,11 @@ class GradedGroup extends React.Component<Props, State> {
                         {gradeStatus}
                     </div>
                 )}
-                {!apiOptions.isMobile && <p>{this.state.message}</p>}
+                {!apiOptions.isMobile && (
+                    <p role="status" aria-live="polite">
+                        {this.state.message}
+                    </p>
+                )}
                 {!apiOptions.isMobile && (
                     <Button
                         kind="secondary"

package/src/widgets/group.jsx

@@ -1,16 +1,17 @@
-/* eslint-disable react/sort-comp */
 // @flow
 import {linterContextDefault} from "@khanacademy/perseus-linter";
 import classNames from "classnames";
 import * as React from "react";
-import _ from "underscore";
 
 import * as Changeable from "../mixins/changeable.jsx";
 import {ApiOptions} from "../perseus-api.jsx";
 import Renderer from "../renderer.jsx";
 
 import type {PerseusGroupWidgetOptions} from "../perseus-types.js";
+import type {Widget} from "../renderer.jsx";
 import type {
+    APIOptions,
+    ChangeFn,
     FocusPath,
     PerseusScore,
     WidgetExports,
@@ -28,6 +29,8 @@ type DefaultProps = {|
 |};
 
 class Group extends React.Component<Props> {
+    rendererRef: ?Renderer;
+
     static defaultProps: DefaultProps = {
         content: "",
         widgets: {},
@@ -42,24 +45,76 @@ class Group extends React.Component<Props> {
         this.forceUpdate();
     }
 
+    change: ChangeFn = (...args) => {
+        return Changeable.change.apply(this, args);
+    };
+
+    getUserInput: () => $FlowFixMe = () => {
+        return this.rendererRef?.getUserInput();
+    };
+
+    getSerializedState: () => $FlowFixMe = () => {
+        return this.rendererRef?.getSerializedState();
+    };
+
+    restoreSerializedState: ($FlowFixMe, $FlowFixMe) => null = (
+        state,
+        callback,
+    ) => {
+        this.rendererRef?.restoreSerializedState(state, callback);
+        // Tell our renderer that we have no props to change
+        // (all our changes were in state):
+        return null;
+    };
+
+    simpleValidate: (Rubric) => ?PerseusScore = (rubric) => {
+        return this.rendererRef?.score();
+    };
+
+    // Mobile API:
+    getInputPaths: () => ?$ReadOnlyArray<FocusPath> = () => {
+        return this.rendererRef?.getInputPaths();
+    };
+
+    setInputValue: (FocusPath, string, () => mixed) => void = (
+        path,
+        newValue,
+        callback,
+    ) => {
+        return this.rendererRef?.setInputValue(path, newValue, callback);
+    };
+
+    focus: () => ?boolean = () => {
+        return this.rendererRef?.focus();
+    };
+
+    focusInputPath: (FocusPath) => void = (path) => {
+        this.rendererRef?.focusPath(path);
+    };
+
+    blurInputPath: (FocusPath) => void = (path) => {
+        this.rendererRef?.blurPath(path);
+    };
+
+    showRationalesForCurrentlySelectedChoices: () => void = () => {
+        this.rendererRef?.showRationalesForCurrentlySelectedChoices();
+    };
+
     render(): React.Node {
-        const apiOptions = _.extend(
-            {},
-            ApiOptions.defaults,
-            this.props.apiOptions,
-            {
-                // Api Rewriting to support correct onFocus/onBlur
-                // events for the mobile API
-                onFocusChange: (newFocus, oldFocus) => {
-                    if (oldFocus) {
-                        this.props.onBlur(oldFocus);
-                    }
-                    if (newFocus) {
-                        this.props.onFocus(newFocus);
-                    }
-                },
+        const apiOptions: APIOptions = {
+            ...ApiOptions.defaults,
+            ...this.props.apiOptions,
+            // Api Rewriting to support correct onFocus/onBlur
+            // events for the mobile API
+            onFocusChange: (newFocus, oldFocus) => {
+                if (oldFocus) {
+                    this.props.onBlur(oldFocus);
+                }
+                if (newFocus) {
+                    this.props.onFocus(newFocus);
+                }
             },
-        );
+        };
 
         // Allow a problem number annotation to be added.
         // This is cyclical and should probably be reconsidered. In order to
@@ -69,7 +124,9 @@ class Group extends React.Component<Props> {
         // give ourselves number -1. To combat this, we forceUpdate in
         // componentDidMount so that we can number ourselves properly. But,
         // really we should have a more unidirectional flow. TODO(marcia): fix.
-        const number = _.indexOf(this.props.findWidgets("group"), this);
+        const groupWidgets: $ReadOnlyArray<Widget> =
+            this.props.findWidgets("group");
+        const number: number = groupWidgets.indexOf(this);
         const problemNumComponent = this.props.apiOptions.groupAnnotator(
             number,
             this.props.widgetId,
@@ -81,15 +138,12 @@ class Group extends React.Component<Props> {
         // alert our renderer (our parent) of the fact that some interaction
         // has occurred.
         const onInteractWithWidget = (id) => {
-            // eslint-disable-next-line react/no-string-refs
-            if (this.refs.renderer) {
-                // eslint-disable-next-line react/no-string-refs
-                this.change("widgets", this.refs.renderer.props.widgets);
+            if (this.rendererRef) {
+                this.change("widgets", this.rendererRef.props.widgets);
             }
         };
 
-        // eslint-disable-next-line react/no-string-refs
-        const score = this.refs.renderer && this.refs.renderer.score();
+        const score = this.rendererRef?.score();
         const isValid = score && score.type !== "invalid";
         const isInvalid = score && score.type === "invalid";
 
@@ -104,18 +158,11 @@ class Group extends React.Component<Props> {
                 })}
             >
                 {problemNumComponent}
-                {/**
-                 * We're passing a bunch of extra props to Renderer here that it
-                 * doesn't need.  We should replace {...this.props} with the individual
-                 * props that are needed.
-                 * TODO(FEI-4034): Only pass what the Renderer expects.
-                 */}
-                {/* $FlowFixMe[prop-missing] */}
-                {/* $FlowFixMe[incompatible-type] */}
                 <Renderer
-                    {...this.props}
-                    // eslint-disable-next-line react/no-string-refs
-                    ref="renderer"
+                    content={this.props.content}
+                    widgets={this.props.widgets}
+                    images={this.props.images}
+                    ref={(ref) => (this.rendererRef = ref)}
                     apiOptions={apiOptions}
                     findExternalWidgets={this.props.findWidgets}
                     reviewMode={!!this.props.reviewModeRubric}
@@ -129,78 +176,13 @@ class Group extends React.Component<Props> {
             </div>
         );
     }
-
-    change: ($FlowFixMe, $FlowFixMe, $FlowFixMe) => $FlowFixMe = (...args) => {
-        return Changeable.change.apply(this, args);
-    };
-
-    getUserInput: () => $FlowFixMe = () => {
-        // eslint-disable-next-line react/no-string-refs
-        return this.refs.renderer.getUserInput();
-    };
-
-    getSerializedState: () => $FlowFixMe = () => {
-        // eslint-disable-next-line react/no-string-refs
-        return this.refs.renderer.getSerializedState();
-    };
-
-    restoreSerializedState: ($FlowFixMe, $FlowFixMe) => $FlowFixMe = (
-        state,
-        callback,
-    ) => {
-        // eslint-disable-next-line react/no-string-refs
-        this.refs.renderer.restoreSerializedState(state, callback);
-        // Tell our renderer that we have no props to change
-        // (all our changes were in state):
-        return null;
-    };
-
-    simpleValidate: (Rubric) => PerseusScore = (rubric) => {
-        // eslint-disable-next-line react/no-string-refs
-        return this.refs.renderer.score();
-    };
-
-    // Mobile API:
-    getInputPaths: () => $ReadOnlyArray<FocusPath> = () => {
-        // eslint-disable-next-line react/no-string-refs
-        return this.refs.renderer.getInputPaths();
-    };
-
-    setInputValue: (FocusPath, string, $FlowFixMe) => void = (
-        path,
-        newValue,
-        cb,
-    ) => {
-        // eslint-disable-next-line react/no-string-refs
-        return this.refs.renderer.setInputValue(path, newValue, cb);
-    };
-
-    focus: () => ?boolean = () => {
-        // eslint-disable-next-line react/no-string-refs
-        return this.refs.renderer.focus();
-    };
-
-    focusInputPath: (FocusPath) => void = (path) => {
-        // eslint-disable-next-line react/no-string-refs
-        this.refs.renderer.focusPath(path);
-    };
-
-    blurInputPath: (FocusPath) => void = (path) => {
-        // eslint-disable-next-line react/no-string-refs
-        this.refs.renderer.blurPath(path);
-    };
-
-    showRationalesForCurrentlySelectedChoices: () => void = () => {
-        // eslint-disable-next-line react/no-string-refs
-        this.refs.renderer.showRationalesForCurrentlySelectedChoices();
-    };
 }
 
 const traverseChildWidgets = function (
     props: $FlowFixMe,
     traverseRenderer: $FlowFixMe,
 ): $FlowFixMe {
-    return _.extend({}, props, traverseRenderer(props));
+    return {...props, ...traverseRenderer(props)};
 };
 
 export default ({

package/src/widgets/input-number.jsx

@@ -332,8 +332,13 @@ class InputNumber extends React.Component<Props> {
         if (rubric.answerType == null) {
             rubric.answerType = "number";
         }
+
+        // note(matthewc): this will get immediately parsed again by
+        // `KhanAnswerTypes.number.convertToPredicate`, but a string is
+        // expected here
+        const stringValue = `${rubric.value}`;
         const val = KhanAnswerTypes.number.createValidatorFunctional(
-            rubric.value,
+            stringValue,
             {
                 simplify: rubric.simplify,
                 inexact: rubric.inexact || undefined,

package/src/widgets/matrix.jsx

@@ -3,6 +3,7 @@
 // @flow
 import {linterContextDefault} from "@khanacademy/perseus-linter";
 import * as i18n from "@khanacademy/wonder-blocks-i18n";
+import {StyleSheet} from "aphrodite";
 import classNames from "classnames";
 import * as React from "react";
 import ReactDOM from "react-dom";
@@ -324,8 +325,23 @@ class Matrix extends React.Component<Props, State> {
                                             <NumberInput {...inputProps} />
                                         );
                                     } else {
+                                        const updatedProps = {
+                                            ...inputProps,
+                                            style: StyleSheet.create({
+                                                // eslint-disable-next-line react-native/no-unused-styles
+                                                input: {
+                                                    ...inputProps.style,
+                                                    display: "inline-block",
+                                                    padding: 0,
+                                                    backgroundColor: outside
+                                                        ? "#f3f3f3"
+                                                        : "#fff",
+                                                },
+                                            }).input,
+                                        };
+
                                         MatrixInput = (
-                                            <TextInput {...inputProps} />
+                                            <TextInput {...updatedProps} />
                                         );
                                     }
                                     return (