@khanacademy/perseus 1.3.6 → 1.4.0

package/src/widgets/__tests__/__snapshots__/video_test.jsx.snap

@@ -63,10 +63,9 @@ exports[`video widget should snapshot on mobile: first mobile render 1`] = `
                   class="default_xu2jcg-o_O-inlineStyles_sc01dy"
                 />
                 <a
-                  class="shared_1ff70zb-o_O-default_nelfll visited-no-recolor"
+                  class="shared_ken7mo-o_O-resting_nelfll visited-no-recolor"
                   href="/transcript/videoNotFound"
                   rel="noopener noreferrer"
-                  tabindex="0"
                   target="_blank"
                 >
                   See video transcript
@@ -144,10 +143,9 @@ exports[`video widget should snapshot: first render 1`] = `
                   class="default_xu2jcg-o_O-inlineStyles_sc01dy"
                 />
                 <a
-                  class="shared_1ff70zb-o_O-default_nelfll visited-no-recolor"
+                  class="shared_ken7mo-o_O-resting_nelfll visited-no-recolor"
                   href="/transcript/videoNotFound"
                   rel="noopener noreferrer"
-                  tabindex="0"
                   target="_blank"
                 >
                   See video transcript

package/src/widgets/__tests__/graded-group-set_test.jsx

@@ -118,17 +118,37 @@ describe("graded group widget", () => {
         ).not.toBeInTheDocument();
     });
 
-    it("should be able to jump to an arbitrary question using Indicators", () => {
-        // Arrange
-        renderQuestion(article1);
+    describe("should be able to jump to an arbitrary question using Indicators", () => {
+        it("by click", () => {
+            // Arrange
+            renderQuestion(article1);
+
+            // Act
+            userEvent.click(
+                screen.getByRole("button", {name: "Skip to Problem 1c"}),
+            );
+
+            // Assert
+            expect(screen.getByText("Problem 1c")).toBeVisible();
+        });
 
-        // Act
-        userEvent.click(
-            screen.getByRole("button", {name: "Skip to Problem 1c"}),
-        );
+        it("by key", () => {
+            // Arrange
+            renderQuestion(article1);
 
-        // Assert
-        expect(screen.getByText("Problem 1c")).toBeVisible();
+            // Act
+            userEvent.tab(); // 1a
+            userEvent.tab(); // 1b
+            userEvent.keyboard(" ");
+
+            // Assert
+            expect(screen.getByText("Problem 1b")).toBeVisible();
+
+            userEvent.tab(); // 1c
+            userEvent.keyboard("[Enter]");
+
+            expect(screen.getByText("Problem 1c")).toBeVisible();
+        });
     });
 
     it("should return input paths", () => {

package/src/widgets/categorizer.jsx

@@ -77,7 +77,7 @@ export class Categorizer extends React.Component<Props, State> {
             <table className={"categorizer-table " + css(styles.mobileTable)}>
                 <thead>
                     <tr>
-                        <th>&nbsp;</th>
+                        <td className={css(styles.emptyHeaderCell)} />
                         {this.props.categories.map((category, i) => {
                             // Array index is the correct key here, as that's
                             // how category grading actually works -- no way
@@ -285,6 +285,11 @@ const styles = StyleSheet.create({
         verticalAlign: "middle",
     },
 
+    emptyHeaderCell: {
+        backgroundColor: "inherit",
+        borderBottom: "2px solid #ccc",
+    },
+
     radioSpan: {
         fontSize: 30,
         paddingRight: 3,

package/src/widgets/cs-program.jsx

@@ -184,7 +184,7 @@ class CSProgram extends React.Component<$FlowFixMe> {
             "allow-top-navigation",
         ].join(" ");
 
-        // We sandbox the iframe so that we whitelist only the functionality
+        // We sandbox the iframe so that we allowlist only the functionality
         //  that we need. This makes it a bit safer in case some content
         //  creator "went wild".
         // http://www.html5rocks.com/en/tutorials/security/sandboxed-iframes/

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

@@ -1,5 +1,6 @@
 // @flow
 import {linterContextDefault} from "@khanacademy/perseus-linter";
+import Color from "@khanacademy/wonder-blocks-color";
 import * as i18n from "@khanacademy/wonder-blocks-i18n";
 import {StyleSheet, css} from "aphrodite";
 import * as React from "react";
@@ -7,10 +8,8 @@ import * as React from "react";
 import {getDependencies} from "../dependencies.js";
 import * as Changeable from "../mixins/changeable.jsx";
 import {
-    grayLight,
     gray76,
     tableBackgroundAccent,
-    kaGreen,
     phoneMargin,
     negativePhoneMargin,
 } from "../styles/constants.js";
@@ -28,40 +27,45 @@ const GradedGroup = GradedGroupWidget.widget;
 
 type IndicatorsProps = {|
     currentGroup: number,
-    numGroups: number,
-    groupTitles: $ReadOnlyArray<string>,
+    gradedGroups: $ReadOnlyArray<PerseusGradedGroupWidgetOptions>,
     onChangeCurrentGroup: (groupNumber: number) => void,
 |};
 
-// TODO(jeremy): This indicator panel is not accessible for keyboard
-// navigation. Add in keyboard handling and tab indexes to make accessible.
 class Indicators extends React.Component<IndicatorsProps> {
-    render(): React.Node {
-        const items = [];
-        for (let i = 0; i < this.props.numGroups; i++) {
-            items.push(
-                <div
-                    role="button"
-                    aria-label={i18n._("Skip to %(title)s", {
-                        title: this.props.groupTitles[i],
-                    })}
-                    key={i}
-                    className={css(
-                        styles.indicator,
-                        i === this.props.currentGroup &&
-                            styles.selectedIndicator,
-                    )}
-                    onClick={() => this.props.onChangeCurrentGroup(i)}
-                >
-                    {i === this.props.currentGroup && (
-                        <span className={css(a11y.srOnly)}>
-                            {i18n._("Current")}
-                        </span>
-                    )}
-                </div>,
-            );
+    handleKeyDown = (e: SyntheticKeyboardEvent<>, i: number) => {
+        if (e.key === "Enter" || e.key === " ") {
+            this.props.onChangeCurrentGroup(i);
         }
-        return <div className={css(styles.indicatorContainer)}>{items}</div>;
+    };
+
+    render(): React.Node {
+        return (
+            <ul className={css(styles.indicatorContainer)}>
+                {this.props.gradedGroups.map(({title}, i) => (
+                    <li
+                        role="button"
+                        aria-label={i18n._("Skip to %(title)s", {
+                            title,
+                        })}
+                        key={title}
+                        className={css(
+                            styles.indicator,
+                            i === this.props.currentGroup &&
+                                styles.selectedIndicator,
+                        )}
+                        tabIndex={0}
+                        onClick={() => this.props.onChangeCurrentGroup(i)}
+                        onKeyDown={(e) => this.handleKeyDown(e, i)}
+                    >
+                        {i === this.props.currentGroup && (
+                            <span className={css(a11y.srOnly)}>
+                                {i18n._("Current")}
+                            </span>
+                        )}
+                    </li>
+                ))}
+            </ul>
+        );
     }
 }
 
@@ -189,11 +193,8 @@ class GradedGroupSet extends React.Component<Props, State> {
                     </div>
                     <div className={css(styles.spacer)} />
                     <Indicators
-                        numGroups={numGroups}
                         currentGroup={this.state.currentGroup}
-                        groupTitles={this.props.gradedGroups.map(
-                            (g) => g.title,
-                        )}
+                        gradedGroups={this.props.gradedGroups}
                         onChangeCurrentGroup={(currentGroup) =>
                             this.setState({currentGroup})
                         }
@@ -253,7 +254,7 @@ const styles = StyleSheet.create({
 
     title: {
         fontSize: 12,
-        color: gray76,
+        color: Color.offBlack64,
         textTransform: "uppercase",
         marginBottom: 11,
         letterSpacing: 0.8,
@@ -262,19 +263,22 @@ const styles = StyleSheet.create({
     indicatorContainer: {
         display: "flex",
         flexDirection: "row",
+        listStyle: "none",
+        margin: "unset",
     },
 
     indicator: {
         width: 10,
         height: 10,
-        borderRadius: 5,
-        backgroundColor: grayLight,
+        borderRadius: "100%",
+        border: "3px solid",
+        borderColor: Color.blue,
         marginLeft: 5,
         cursor: "pointer",
     },
 
     selectedIndicator: {
-        backgroundColor: kaGreen,
+        backgroundColor: Color.blue,
     },
 
     container: {

package/src/widgets/graded-group.jsx

@@ -1,6 +1,7 @@
 // @flow
 import {linterContextDefault} from "@khanacademy/perseus-linter";
 import Button from "@khanacademy/wonder-blocks-button";
+import Color from "@khanacademy/wonder-blocks-color";
 import * as i18n from "@khanacademy/wonder-blocks-i18n";
 import {StyleSheet, css} from "aphrodite";
 import classNames from "classnames";
@@ -18,7 +19,6 @@ import {
     phoneMargin,
     negativePhoneMargin,
     tableBackgroundAccent,
-    kaGreen,
 } from "../styles/constants.js";
 import a11y from "../util/a11y.js";
 
@@ -413,7 +413,7 @@ const styles = StyleSheet.create({
         padding: 0,
         border: "none",
         marginTop: 20,
-        color: kaGreen,
+        color: Color.blue,
         cursor: "pointer",
         display: "block",
         clear: "both",
@@ -422,7 +422,7 @@ const styles = StyleSheet.create({
     explanationTitle: {
         backgroundColor: "unset",
         marginTop: 20,
-        color: kaGreen,
+        color: Color.blue,
         marginBottom: 10,
         cursor: "pointer",
         fontSize: 14,

package/src/widgets/iframe.jsx

@@ -134,7 +134,7 @@ class Iframe extends React.Component<$FlowFixMe> {
         //     sandboxProperties += " allow-top-navigation";
         // }
 
-        // We sandbox the iframe so that we whitelist only the functionality
+        // We sandbox the iframe so that we allowlist only the functionality
         //  that we need. This makes it a bit safer in case some content
         //  creator "went wild".
         // http://www.html5rocks.com/en/tutorials/security/sandboxed-iframes/

package/src/widgets/passage-ref.jsx

@@ -5,7 +5,7 @@ import * as React from "react";
 import _ from "underscore";
 
 import * as Changeable from "../mixins/changeable.jsx";
-import {removeDenylistProps} from "../mixins/widget-prop-blacklist.js";
+import {removeDenylistProps} from "../mixins/widget-prop-denylist.js";
 import PerseusMarkdown from "../perseus-markdown.jsx";
 
 import PassageWidgetExport from "./passage.jsx";
@@ -75,7 +75,7 @@ class PassageRef extends React.Component<Props, State> {
         );
     }
 
-    // TODO(TB): getUserInput needs to be updated to only return
+    // TODO(tamarab): getUserInput needs to be updated to only return
     // props input by the user. Currently returns all the widget's props.
     getUserInput: () => UserInput = () => {
         return removeDenylistProps(this.props);

package/src/widgets/radio/widget.jsx

@@ -13,12 +13,7 @@ import type {
     PerseusRadioChoice,
     PerseusRadioWidgetOptions,
 } from "../../perseus-types.js";
-import type {
-    PerseusScore,
-    WidgetProps,
-    ChoiceState,
-    RadioChoiceWithMetadata,
-} from "../../types.js";
+import type {PerseusScore, WidgetProps, ChoiceState} from "../../types.js";
 import type {FocusFunction, ChoiceType} from "./base-radio.jsx";
 
 // RenderProps is the return type for radio.jsx#transform
@@ -54,6 +49,12 @@ type DefaultProps = {|
     linterContext: Props["linterContext"],
 |};
 
+export type RadioChoiceWithMetadata = {|
+    ...PerseusRadioChoice,
+    originalIndex: number,
+    correct: boolean,
+|};
+
 class Radio extends React.Component<Props> {
     focusFunction: FocusFunction;
 

package/src/widgets/radio.jsx

@@ -7,8 +7,8 @@ import Util from "../util.js";
 import Radio from "./radio/widget.jsx";
 
 import type {PerseusRadioWidgetOptions} from "../perseus-types.js";
-import type {WidgetExports, RadioChoiceWithMetadata} from "../types.js";
-import type {RenderProps} from "./radio/widget.jsx";
+import type {WidgetExports} from "../types.js";
+import type {RenderProps, RadioChoiceWithMetadata} from "./radio/widget.jsx";
 
 const {shuffle, random} = Util;