@khanacademy/perseus 1.1.0 → 1.1.2

package/src/widgets/__tests__/radio_test.jsx

@@ -180,14 +180,19 @@ describe("single-choice question", () => {
 
                     // Assert
                     // Everything's read-only so no selections made
-                    // 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
+                    // 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");
                         });
+                    // Note(TB): Confirms the screen reader only
+                    // radio options are also disabled
+                    screen.getAllByRole("radio").forEach((r) => {
+                        expect(r).toHaveAttribute("disabled");
+                    });
                 });
             },
         );
@@ -198,15 +203,12 @@ describe("single-choice question", () => {
 
             // Act
             userEvent.tab();
-            // 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
+            // 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})[1],
             ).toHaveFocus();
@@ -237,7 +239,19 @@ describe("single-choice question", () => {
             ).toHaveFocus();
         });
 
-        it("should be able to navigate through 'None of the above' choice by keyboard", () => {
+        it("should be able to select an option by keyboard", () => {
+            // Arrange
+            renderQuestion(question, apiOptions);
+
+            // Act
+            userEvent.tab();
+            userEvent.keyboard("{space}");
+
+            // Assert
+            expect(screen.getAllByRole("radio")[0]).toBeChecked();
+        });
+
+        it("should be able to navigate to 'None of the above' choice by keyboard", () => {
             // Arrange
             const q = clone(question);
             ((q.widgets["radio 1"]
@@ -336,7 +350,7 @@ describe("single-choice question", () => {
             expect(passageRefRadio).toHaveTextContent("lines NaN–NaN");
         });
 
-        it("Should render option statuses (rationales) for selected choices", () => {
+        it("should render rationales for selected choices", () => {
             // Arrange
             const {renderer} = renderQuestion(question, apiOptions);
 
@@ -359,9 +373,7 @@ describe("single-choice question", () => {
             };
 
             it("should render cross-out menu button", () => {
-                // Arrange
-
-                // Act
+                // Arrange & Act
                 renderQuestion(question, crossOutApiOptions);
 
                 // Assert
@@ -374,7 +386,6 @@ describe("single-choice question", () => {
 
             it("should open the cross-out menu when button clicked", async () => {
                 // Arrange
-
                 renderQuestion(question, crossOutApiOptions);
 
                 // Act
@@ -397,7 +408,6 @@ describe("single-choice question", () => {
 
             it("should open the cross-out menu when focused and spacebar pressed", async () => {
                 // Arrange
-
                 renderQuestion(question, crossOutApiOptions);
                 userEvent.tab(); // Choice icon
                 userEvent.tab(); // Cross-out menu ellipsis
@@ -416,7 +426,7 @@ describe("single-choice question", () => {
                 ).toBeVisible();
             });
 
-            it("should cross-out selection and dismiss button when clicked", async () => {
+            it("should cross-out selection and dismiss button when clicked", () => {
                 // Arrange
                 renderQuestion(question, crossOutApiOptions);
                 userEvent.click(
@@ -424,9 +434,6 @@ describe("single-choice question", () => {
                         name: /Open menu for Choice B/,
                     }),
                 );
-                await act(async () => {
-                    await jest.runAllTimers();
-                });
 
                 // Act
                 userEvent.click(
@@ -434,7 +441,6 @@ describe("single-choice question", () => {
                         name: /Cross out Choice B/,
                     }),
                 );
-                jest.runAllTimers();
 
                 // Assert
                 expect(
@@ -442,11 +448,43 @@ describe("single-choice question", () => {
                         name: /Cross out Choice B/,
                     }),
                 ).toHaveLength(0);
+
+                expect(
+                    screen.getByTestId("choice-icon__cross-out-line"),
+                ).toBeVisible();
             });
 
-            it("should dismiss cross-out button with {tab} key", async () => {
+            it("should remove cross-out line on selection", async () => {
                 // Arrange
+                renderQuestion(question, crossOutApiOptions);
+                userEvent.click(
+                    screen.getByRole("button", {
+                        name: /Open menu for Choice B/,
+                    }),
+                );
+
+                // Act
+                userEvent.click(
+                    screen.getByRole("button", {
+                        name: /Cross out Choice B/,
+                    }),
+                );
+                jest.runAllTimers();
+
+                userEvent.click(
+                    screen.getByRole("radio", {
+                        name: "(Choice B, Crossed out) -8",
+                    }),
+                );
+
+                // Assert
+                expect(
+                    screen.queryByTestId("choice-icon__cross-out-line"),
+                ).not.toBeInTheDocument();
+            });
 
+            it("should dismiss cross-out button with {tab} key", async () => {
+                // Arrange
                 renderQuestion(question, crossOutApiOptions);
                 userEvent.tab(); // Choice icon
                 userEvent.tab(); // Cross-out menu ellipsis
@@ -476,6 +514,19 @@ describe("single-choice question", () => {
         });
     });
 
+    it("should not display instructions when satStyling true", () => {
+        // Arrange
+        const apiOptions: APIOptions = {
+            satStyling: true,
+        };
+
+        // Act
+        renderQuestion(question, apiOptions);
+
+        // Assert
+        expect(screen.queryByText("Choose 1 answer:")).not.toBeInTheDocument();
+    });
+
     it("should be invalid when first rendered", () => {
         // Arrange
         const apiOptions: APIOptions = {
@@ -516,6 +567,60 @@ describe("single-choice question", () => {
         // Assert
         expect(screen.getAllByText("Incorrect (selected)")).toHaveLength(1);
     });
+
+    it("should display all rationales when static is true", () => {
+        // Arrange
+        const staticQuestion = {
+            ...question,
+            widgets: {
+                ...question.widgets,
+                "radio 1": {
+                    ...question.widgets["radio 1"],
+                    static: true,
+                },
+            },
+        };
+
+        // Act
+        renderQuestion(staticQuestion);
+
+        // Assert
+        // Part of Choice A rationale
+        expect(
+            screen.getByText(
+                /the positive square root when performed on a number, so/,
+            ),
+        ).toBeVisible();
+        // Part of Choice B rationale
+        expect(screen.getByText(/, the square root operation/)).toBeVisible();
+        // Part of Choice C rationale
+        expect(
+            screen.getByText(/is the positive square root of/),
+        ).toBeVisible();
+        // Part of Choice D rationale
+        expect(screen.getAllByText(/satisfies the equation./)[3]).toBeVisible();
+    });
+
+    it("should register as correct when none of the above option selected", () => {
+        // Arrange
+        const q = clone(question);
+        const choices = ((q.widgets["radio 1"]
+            .options: any): PerseusRadioWidgetOptions).choices;
+        choices[2].correct = false;
+        choices[3].isNoneOfTheAbove = true;
+        choices[3].correct = true;
+
+        const {renderer} = renderQuestion(q);
+
+        // Act
+        const noneOption = screen.getByRole("radio", {
+            name: "(Choice D) None of the above",
+        });
+        userEvent.click(noneOption);
+
+        // Assert
+        expect(renderer).toHaveBeenAnsweredCorrectly();
+    });
 });
 
 describe("multi-choice question", () => {
@@ -544,6 +649,94 @@ describe("multi-choice question", () => {
         expect(renderer).toHaveBeenAnsweredCorrectly();
     });
 
+    it("should select multiple options when clicked", () => {
+        // Arrange
+        const apiOptions: APIOptions = {
+            crossOutEnabled: false,
+        };
+        const radio1Widget = ((question.widgets["radio 1"]: any): RadioWidget);
+        const radioOptions = radio1Widget.options;
+
+        const multipleCorrectChoicesQuestion: PerseusRenderer = {
+            ...question,
+            widgets: {
+                ...question.widgets,
+                "radio 1": ({
+                    ...radio1Widget,
+                    options: {
+                        ...radioOptions,
+                        choices: [
+                            {content: "$x=-6$", correct: true},
+                            {content: "$x=4$", correct: true},
+                            {content: "$x=7$", correct: false},
+                            {
+                                content: "There is no such input value.",
+                                isNoneOfTheAbove: true,
+                                correct: false,
+                            },
+                        ],
+                    },
+                }: RadioWidget),
+            },
+        };
+
+        renderQuestion(multipleCorrectChoicesQuestion, apiOptions);
+
+        // Act
+        const options = screen.getAllByRole("checkbox");
+        userEvent.click(options[2]);
+        userEvent.click(options[3]);
+
+        // Assert
+        expect(options[2]).toBeChecked();
+        expect(options[3]).toBeChecked();
+    });
+
+    it("should deselect selected options when clicked", () => {
+        // Arrange
+        const apiOptions: APIOptions = {
+            crossOutEnabled: false,
+        };
+        const radio1Widget = ((question.widgets["radio 1"]: any): RadioWidget);
+        const radioOptions = radio1Widget.options;
+
+        const multipleCorrectChoicesQuestion: PerseusRenderer = {
+            ...question,
+            widgets: {
+                ...question.widgets,
+                "radio 1": ({
+                    ...radio1Widget,
+                    options: {
+                        ...radioOptions,
+                        choices: [
+                            {content: "$x=-6$", correct: true},
+                            {content: "$x=4$", correct: true},
+                            {content: "$x=7$", correct: false},
+                            {
+                                content: "There is no such input value.",
+                                isNoneOfTheAbove: true,
+                                correct: false,
+                            },
+                        ],
+                    },
+                }: RadioWidget),
+            },
+        };
+
+        renderQuestion(multipleCorrectChoicesQuestion, apiOptions);
+
+        // Act
+        const options = screen.getAllByRole("checkbox");
+        userEvent.click(options[2]);
+        userEvent.click(options[3]);
+        userEvent.click(options[2]);
+        userEvent.click(options[3]);
+
+        // Assert
+        expect(options[2]).not.toBeChecked();
+        expect(options[3]).not.toBeChecked();
+    });
+
     it("should snapshot the same when invalid", () => {
         // Arrange
         const {container} = renderQuestion(question, apiOptions);
@@ -556,6 +749,19 @@ describe("multi-choice question", () => {
         expect(container).toMatchSnapshot("invalid state");
     });
 
+    it("should be invalid when first rendered", () => {
+        // Arrange
+        const apiOptions: APIOptions = {
+            crossOutEnabled: false,
+        };
+
+        // Act
+        const {renderer} = renderQuestion(question, apiOptions);
+
+        // Assert
+        expect(renderer).toHaveInvalidInput();
+    });
+
     it("should be invalid when incorrect number of choices selected", () => {
         // Arrange
         const apiOptions: APIOptions = {

package/src/widgets/graded-group-set.jsx

@@ -14,6 +14,7 @@ import {
     phoneMargin,
     negativePhoneMargin,
 } from "../styles/constants.js";
+import a11y from "../util/a11y.js";
 
 import GradedGroupWidget from "./graded-group.jsx";
 
@@ -51,7 +52,13 @@ class Indicators extends React.Component<IndicatorsProps> {
                             styles.selectedIndicator,
                     )}
                     onClick={() => this.props.onChangeCurrentGroup(i)}
-                />,
+                >
+                    {i === this.props.currentGroup && (
+                        <span className={css(a11y.srOnly)}>
+                            {i18n._("Current")}
+                        </span>
+                    )}
+                </div>,
             );
         }
         return <div className={css(styles.indicatorContainer)}>{items}</div>;

package/src/widgets/graded-group.jsx

@@ -13,6 +13,7 @@ import * as Changeable from "../mixins/changeable.jsx";
 import {ApiOptions} from "../perseus-api.jsx";
 import Renderer from "../renderer.jsx";
 import {
+    gray68,
     gray76,
     phoneMargin,
     negativePhoneMargin,
@@ -294,7 +295,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"
@@ -429,7 +434,7 @@ const styles = StyleSheet.create({
 
     title: {
         fontSize: 12,
-        color: gray76,
+        color: gray68,
         textTransform: "uppercase",
         marginBottom: 11,
         letterSpacing: 0.8,

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 (

package/src/widgets/numeric-input.jsx

@@ -3,7 +3,7 @@
 
 import {linterContextDefault} from "@khanacademy/perseus-linter";
 import * as i18n from "@khanacademy/wonder-blocks-i18n";
-import classNames from "classnames";
+import {StyleSheet} from "aphrodite";
 import * as React from "react";
 import _ from "underscore";
 
@@ -419,7 +419,6 @@ export class NumericInput extends React.Component<Props, State> {
         const rubric = this.props.reviewModeRubric;
         const answers = this.getAnswerBlurb(rubric);
         const answerBlurb = answers[0];
-        const classes = [];
 
         let labelText = this.props.labelText;
         if (labelText == null || labelText === "") {
@@ -449,12 +448,20 @@ export class NumericInput extends React.Component<Props, State> {
             );
         }
 
+        const styles = StyleSheet.create({
+            input: {
+                textAlign: this.props.rightAlign ? "right" : "left",
+                width: this.props.size === "small" ? 40 : 80,
+                padding: 0,
+                height: "auto",
+            },
+        });
+
         const input = (
             <InputWithExamples
                 ref={(ref) => (this.inputRef = ref)}
                 value={this.props.currentValue}
                 onChange={this.handleChange}
-                className={classNames(classes)}
                 labelText={labelText}
                 type={this._getInputType()}
                 examples={this.examples()}
@@ -463,8 +470,7 @@ export class NumericInput extends React.Component<Props, State> {
                 onBlur={this._handleBlur}
                 id={this.props.widgetId}
                 disabled={this.props.apiOptions.readOnly}
-                // $FlowFixMe[prop-missing]
-                highlightLint={this.props.highlightLint}
+                style={styles.input}
             />
         );
 
@@ -542,7 +548,7 @@ type RenderProps = {|
         name: "integer" | "decimal" | "proper" | "improper" | "mixed" | "pi",
     |}>,
     labelText: string,
-    size: string,
+    size: "normal" | "small",
     coefficient: boolean,
     rightAlign?: boolean,
     static: boolean,

package/src/widgets/passage-ref.jsx

@@ -5,20 +5,31 @@ import * as React from "react";
 import _ from "underscore";
 
 import * as Changeable from "../mixins/changeable.jsx";
-import WidgetJsonifyDeprecated from "../mixins/widget-jsonify-deprecated.jsx";
+import {removeDenylistProps} from "../mixins/widget-prop-blacklist.js";
 import PerseusMarkdown from "../perseus-markdown.jsx";
 
+import PassageWidgetExport from "./passage.jsx";
+
 import type {PerseusPassageRefWidgetOptions} from "../perseus-types.js";
 import type {
     ChangeFn,
     PerseusScore,
     WidgetExports,
     WidgetProps,
+    LinterContextProps,
 } from "../types.js";
+import type {Reference} from "./passage.jsx";
 
 const EN_DASH = "\u2013";
 
-type UserInput = $FlowFixMe;
+type UserInput = {|
+    ...RenderProps,
+    static: ?boolean,
+    reviewModeRubric: Rubric,
+    linterContext: LinterContextProps,
+    isLastUsedWidget: boolean,
+    alignment: ?string,
+|};
 
 type RenderProps = {|
     passageNumber: PerseusPassageRefWidgetOptions["passageNumber"],
@@ -64,8 +75,10 @@ class PassageRef extends React.Component<Props, State> {
         );
     }
 
+    // TODO(TB): getUserInput needs to be updated to only return
+    // props input by the user. Currently returns all the widget's props.
     getUserInput: () => UserInput = () => {
-        return WidgetJsonifyDeprecated.getUserInput.call(this);
+        return removeDenylistProps(this.props);
     };
 
     render(): React.Node {
@@ -144,11 +157,14 @@ class PassageRef extends React.Component<Props, State> {
     };
 
     _updateRange: () => void = () => {
-        const passage = this.props.findWidgets(
+        // Note(TB): findWidgets runs findInternal and findExternal;
+        // findExternal runs findInternal for the renderers involved;
+        // findInternal returns type $ReadOnlyArray<?Widget>
+        const passage: ?PassageWidgetExport.widget = this.props.findWidgets(
             "passage " + this.props.passageNumber,
         )[0];
 
-        let refInfo = null;
+        let refInfo: ?Reference = null;
         if (passage) {
             refInfo = passage.getReference(this.props.referenceNumber);
         }

package/src/widgets/passage.jsx

@@ -84,6 +84,8 @@ const styles = StyleSheet.create({
         width: "100%",
         top: 0,
         left: 0,
+        // keep from blocking text selection
+        zIndex: -1,
     },
 });
 
@@ -124,7 +126,7 @@ type PassageState = {|
 |};
 
 // Information about a passage reference, used in inter-widgets.
-type Reference = {
+export type Reference = {
     startLine: number,
     endLine: number,
     content: ?string,

package/src/widgets/radio/__stories__/base-radio.stories.jsx

@@ -68,17 +68,21 @@ export const Interactive = (args: StoryArgs): React.Node => {
     return <BaseRadio {...overwrittenProps} />;
 };
 
-export const DefaultSingleSelect = (args: StoryArgs): React.Node => {
+export const SingleSelectWithNothingSelected = (
+    args: StoryArgs,
+): React.Node => {
     const overwrittenProps = {...defaultProps, multipleSelect: false};
     return <BaseRadio {...overwrittenProps} />;
 };
 
-export const DefaultMultipleSelect = (args: StoryArgs): React.Node => {
+export const MultipleSelectWithNothingSelected = (
+    args: StoryArgs,
+): React.Node => {
     const overwrittenProps = {...defaultProps, multipleSelect: true};
     return <BaseRadio {...overwrittenProps} />;
 };
 
-export const DefaultMultipleSelectCountChoices = (
+export const MultipleSelectWithCountChoicesLabel = (
     args: StoryArgs,
 ): React.Node => {
     const overwrittenProps = {

package/src/widgets/radio/base-radio.jsx

@@ -247,7 +247,9 @@ function BaseRadio(props: Props): React.Node {
         <fieldset
             className={`perseus-widget-radio-fieldset ${responsiveClassName}`}
         >
-            <legend className="perseus-sr-only">{instructions}</legend>
+            {shouldShowInstructions && (
+                <legend className="perseus-sr-only">{instructions}</legend>
+            )}
             {shouldShowInstructions && (
                 <div className={instructionsClassName} aria-hidden="true">
                     {instructions}

package/src/widgets/radio/choice-icon/cross-out-line.jsx

@@ -26,6 +26,7 @@ function CrossOutLine(props: {color: string, sat?: boolean, ...}): React.Node {
             height={crossOutLineSize}
             viewBox={`0 0 ${crossOutLineSize} ${crossOutLineSize}`}
             className={css(styles.crossOutLine)}
+            data-test-id="choice-icon__cross-out-line"
         >
             <line
                 // The line stretches from the bottom-left to top-right.
@@ -47,8 +48,8 @@ const styles = StyleSheet.create({
     crossOutLine: {
         // Center the icon within the container.
         position: "absolute",
-        top: `calc(50% - ${CROSS_OUT_LINE_SIZE / 2}px)`,
-        left: `calc(50% - ${CROSS_OUT_LINE_SIZE / 2}px)`,
+        top: `0px`,
+        left: `0px`,
     },
 });