@khanacademy/perseus 1.3.6 → 1.4.1

package/package.json

@@ -3,7 +3,7 @@
     "description": "Core Perseus API (includes renderers and widgets)",
     "author": "Khan Academy",
     "license": "MIT",
-    "version": "1.3.6",
+    "version": "1.4.1",
     "publishConfig": {
         "access": "public"
     },
@@ -23,30 +23,30 @@
     "dependencies": {
         "@khanacademy/kas": "^0.2.7",
         "@khanacademy/kmath": "^0.0.8",
-        "@khanacademy/math-input": "^0.6.4",
-        "@khanacademy/perseus-linter": "^0.2.3",
-        "@khanacademy/pure-markdown": "^0.1.3",
+        "@khanacademy/math-input": "^0.6.7",
+        "@khanacademy/perseus-linter": "^0.2.5",
+        "@khanacademy/pure-markdown": "^0.1.5",
         "@khanacademy/simple-markdown": "^0.8.6",
         "mathquill": "git+https://git@github.com/Khan/mathquill.git#a9ae54e057c5c1acc8244a5627acbff29901d992"
     },
     "devDependencies": {
-        "@khanacademy/wonder-blocks-button": "^2.11.5",
-        "@khanacademy/wonder-blocks-clickable": "^2.2.6",
-        "@khanacademy/wonder-blocks-color": "^1.1.20",
-        "@khanacademy/wonder-blocks-core": "^4.3.0",
-        "@khanacademy/wonder-blocks-data": "^7.0.0",
-        "@khanacademy/wonder-blocks-dropdown": "^2.10.1",
-        "@khanacademy/wonder-blocks-form": "^2.4.5",
-        "@khanacademy/wonder-blocks-i18n": "^1.2.3",
-        "@khanacademy/wonder-blocks-layout": "^1.4.9",
-        "@khanacademy/wonder-blocks-link": "^3.8.5",
-        "@khanacademy/wonder-blocks-modal": "^2.3.1",
-        "@khanacademy/wonder-blocks-popover": "^1.1.24",
-        "@khanacademy/wonder-blocks-progress-spinner": "^1.1.31",
+        "@khanacademy/wonder-blocks-button": "^3.0.14",
+        "@khanacademy/wonder-blocks-clickable": "^2.4.5",
+        "@khanacademy/wonder-blocks-color": "^1.2.1",
+        "@khanacademy/wonder-blocks-core": "^4.7.0",
+        "@khanacademy/wonder-blocks-data": "^10.1.0",
+        "@khanacademy/wonder-blocks-dropdown": "^2.10.7",
+        "@khanacademy/wonder-blocks-form": "^3.1.11",
+        "@khanacademy/wonder-blocks-i18n": "^1.2.4",
+        "@khanacademy/wonder-blocks-layout": "^1.4.16",
+        "@khanacademy/wonder-blocks-link": "^3.9.1",
+        "@khanacademy/wonder-blocks-modal": "^3.0.7",
+        "@khanacademy/wonder-blocks-popover": "^1.1.30",
+        "@khanacademy/wonder-blocks-progress-spinner": "^1.1.40",
         "@khanacademy/wonder-blocks-spacing": "^3.0.5",
-        "@khanacademy/wonder-blocks-tooltip": "^1.4.0",
-        "@khanacademy/wonder-blocks-typography": "^1.1.31",
-        "@khanacademy/wonder-stuff-core": "^0.1.2",
+        "@khanacademy/wonder-blocks-tooltip": "^1.4.6",
+        "@khanacademy/wonder-blocks-typography": "^1.1.38",
+        "@khanacademy/wonder-stuff-core": "^1.2.1",
         "aphrodite": "^1.2.5",
         "classnames": "^1.1.4",
         "create-react-class": "^15.6.3",
@@ -63,23 +63,23 @@
         "underscore": "^1.4.4"
     },
     "peerDependencies": {
-        "@khanacademy/wonder-blocks-button": "^2.11.5",
-        "@khanacademy/wonder-blocks-clickable": "^2.2.6",
-        "@khanacademy/wonder-blocks-color": "^1.1.20",
-        "@khanacademy/wonder-blocks-core": "^4.3.0",
-        "@khanacademy/wonder-blocks-data": "^7.0.0",
-        "@khanacademy/wonder-blocks-dropdown": "^2.10.1",
-        "@khanacademy/wonder-blocks-form": "^2.4.5",
-        "@khanacademy/wonder-blocks-i18n": "^1.2.3",
-        "@khanacademy/wonder-blocks-layout": "^1.4.9",
-        "@khanacademy/wonder-blocks-link": "^3.8.5",
-        "@khanacademy/wonder-blocks-modal": "^2.3.1",
-        "@khanacademy/wonder-blocks-popover": "^1.1.24",
-        "@khanacademy/wonder-blocks-progress-spinner": "^1.1.31",
+        "@khanacademy/wonder-blocks-button": "^3.0.14",
+        "@khanacademy/wonder-blocks-clickable": "^2.4.5",
+        "@khanacademy/wonder-blocks-color": "^1.2.1",
+        "@khanacademy/wonder-blocks-core": "^4.7.0",
+        "@khanacademy/wonder-blocks-data": "^10.1.0",
+        "@khanacademy/wonder-blocks-dropdown": "^2.10.7",
+        "@khanacademy/wonder-blocks-form": "^3.1.11",
+        "@khanacademy/wonder-blocks-i18n": "^1.2.4",
+        "@khanacademy/wonder-blocks-layout": "^1.4.16",
+        "@khanacademy/wonder-blocks-link": "^3.9.1",
+        "@khanacademy/wonder-blocks-modal": "^3.0.7",
+        "@khanacademy/wonder-blocks-popover": "^1.1.30",
+        "@khanacademy/wonder-blocks-progress-spinner": "^1.1.40",
         "@khanacademy/wonder-blocks-spacing": "^3.0.5",
-        "@khanacademy/wonder-blocks-tooltip": "^1.4.0",
-        "@khanacademy/wonder-blocks-typography": "^1.1.31",
-        "@khanacademy/wonder-stuff-core": "^0.1.2",
+        "@khanacademy/wonder-blocks-tooltip": "^1.4.6",
+        "@khanacademy/wonder-blocks-typography": "^1.1.38",
+        "@khanacademy/wonder-stuff-core": "^1.2.1",
         "aphrodite": "^1.2.5",
         "classnames": "^1.1.4",
         "create-react-class": "^15.6.3",
@@ -92,4 +92,4 @@
         "underscore": "^1.4.4"
     },
     "keywords": []
-}
+}

package/src/components/__stories__/tex.stories.jsx

@@ -3,16 +3,22 @@ import * as React from "react";
 
 import TeX from "../tex.jsx";
 
-type StoryArgs = {||};
+type StoryArgs = {|
+    equation: string,
+|};
 
 type Story = {|
     title: string,
+    args: StoryArgs,
 |};
 
 export default ({
     title: "Perseus/Components/Tex",
+    args: {
+        equation: "f(x) = x + 1",
+    },
 }: Story);
 
 export const BasicOperation = (args: StoryArgs): React.Node => {
-    return <TeX setAssetStatus={() => {}} children="f(x) = x + 1" />;
+    return <TeX setAssetStatus={() => {}} children={args.equation} />;
 };

package/src/index.js

@@ -87,7 +87,7 @@ export * as SizingUtils from "./util/sizing-utils.js";
 export * as Changeable from "./mixins/changeable.jsx";
 export {default as EditorJsonify} from "./mixins/editor-jsonify.jsx";
 export {default as WidgetJsonifyDeprecated} from "./mixins/widget-jsonify-deprecated.jsx";
-export {default as WIDGET_PROP_BLACKLIST} from "./mixins/widget-prop-blacklist.js";
+export {default as WIDGET_PROP_DENYLIST} from "./mixins/widget-prop-denylist.js";
 
 /**
  * Types

package/src/interactive2/movable-point.jsx

@@ -52,12 +52,12 @@
  */
 import {point as kpoint, vector as kvector} from "@khanacademy/kmath";
 import * as React from "react";
-import * as ReactDOM from "react-dom";
 import _ from "underscore";
 
 import InlineIcon from "../components/inline-icon.jsx";
 import {iconTrash} from "../icon-paths.js";
 import KhanColors from "../util/colors.js";
+import reactRender from "../util/react-render.js";
 import Tex from "../util/tex.js";
 
 import InteractiveUtil from "./interactive-util.js";
@@ -275,9 +275,7 @@ _.extend(MovablePoint.prototype, {
 
         const showTrashTooltip = () => {
             this._showTooltip((container) => {
-                // TODO(LP-11406): Replace with React Portal
-                // eslint-disable-next-line no-restricted-syntax
-                ReactDOM.render(
+                reactRender(
                     <span style={{fontSize: "2em"}}>
                         <InlineIcon
                             {...iconTrash}

package/src/item-renderer.jsx

@@ -12,6 +12,7 @@ import ProvideKeypad from "./mixins/provide-keypad.jsx";
 import {ApiOptions} from "./perseus-api.jsx";
 import Renderer from "./renderer.jsx";
 import Util from "./util.js";
+import reactRender from "./util/react-render.js";
 
 import type {KeypadProps} from "./mixins/provide-keypad.jsx";
 import type {PerseusItem} from "./perseus-types.js";
@@ -177,9 +178,7 @@ class ItemRenderer extends React.Component<Props, State> {
         // that have completely different places in the DOM, we have to do this
         // strangeness instead of relying on React's normal render() method.
         // TODO(alpert): Figure out how to clean this up somehow
-        // TODO(LP-11406): Replace with React Portal
-        // eslint-disable-next-line no-restricted-syntax
-        ReactDOM.render(
+        reactRender(
             // metadata (from item.question, aka PerseusRenderer)
             // replace (also item.question, aka PerseusRenderer)
             // savedState (I _think_ this is serializedState on Renderer)
@@ -218,9 +217,7 @@ class ItemRenderer extends React.Component<Props, State> {
             workArea,
         );
 
-        // TODO(LP-11406): Replace with React Portal
-        // eslint-disable-next-line no-restricted-syntax
-        ReactDOM.render(
+        reactRender(
             <HintsRenderer
                 ref={(node) => (this.hintsRenderer = node)}
                 hints={this.props.item.hints}

package/src/mixins/__tests__/{widget-prop-blacklist_test.js → widget-prop-denylist_test.js}

@@ -1,6 +1,6 @@
 // @flow
 
-import {removeDenylistProps} from "../widget-prop-blacklist.js";
+import {removeDenylistProps} from "../widget-prop-denylist.js";
 
 describe("removeDenylistProps", () => {
     it("removes props that are in denylist from input", () => {

package/src/mixins/changeable.jsx

@@ -15,7 +15,7 @@ import _ from "underscore";
 import {Errors} from "../logging/log.js";
 import {PerseusError} from "../perseus-error.js";
 
-import WIDGET_PROP_BLACKLIST from "./widget-prop-blacklist.js";
+import WIDGET_PROP_DENYLIST from "./widget-prop-denylist.js";
 
 import type {ChangeFn} from "../types.js";
 
@@ -37,7 +37,7 @@ const _changeMultiple = function (component, newProps, callback) {
     //   the conceptual state of our component
     // onChange comes from our parent to allow this modification,
     //   and doesn't conceptually represent the state of our component
-    const currProps = _.omit(component.props, WIDGET_PROP_BLACKLIST);
+    const currProps = _.omit(component.props, WIDGET_PROP_DENYLIST);
     const nextProps = _.extend(currProps, newProps);
     component.props.onChange(nextProps, callback);
 };

package/src/mixins/editor-jsonify.jsx

@@ -1,12 +1,12 @@
 // @flow
 import _ from "underscore";
 
-import WIDGET_PROP_BLACKLIST from "./widget-prop-blacklist.js";
+import WIDGET_PROP_DENYLIST from "./widget-prop-denylist.js";
 
 const EditorJsonify = {
     serialize: function (): $FlowFixMe {
         // Omit props that get passed to all widgets
-        return _.omit(this.props, WIDGET_PROP_BLACKLIST);
+        return _.omit(this.props, WIDGET_PROP_DENYLIST);
     },
 };
 

package/src/mixins/provide-keypad.jsx

@@ -16,6 +16,8 @@ import PropTypes from "prop-types";
 import * as React from "react";
 import ReactDOM from "react-dom";
 
+import reactRender from "../util/react-render.js";
+
 import type {CSSProperties} from "aphrodite";
 
 export type KeypadProps = {|
@@ -83,9 +85,7 @@ const ProvideKeypad = {
             _this._keypadContainer = document.createElement("div");
             document.body?.appendChild(_this._keypadContainer);
 
-            // TODO(LP-11406): Replace with React Portal
-            // eslint-disable-next-line no-restricted-syntax
-            ReactDOM.render(
+            reactRender(
                 <Keypad
                     onElementMounted={(element) => {
                         // NOTE(kevinb): The reason why this setState works is

package/src/mixins/widget-jsonify-deprecated.jsx

@@ -5,18 +5,18 @@
  */
 import _ from "underscore";
 
-import WIDGET_PROP_BLACKLIST from "./widget-prop-blacklist.js";
+import WIDGET_PROP_DENYLIST from "./widget-prop-denylist.js";
 
 const WidgetJsonifyDeprecated = {
     getUserInput: function (): $FlowFixMe {
         // Omit props that get passed to all widgets
-        return _.omit(this.props, WIDGET_PROP_BLACKLIST);
+        return _.omit(this.props, WIDGET_PROP_DENYLIST);
     },
 
     // Static version of `WidgetJsonifyDeprecated.getUserInput`
     getUserInputFromProps: function (props: $FlowFixMe): $FlowFixMe {
         // Omit props that get passed to all widgets
-        return _.omit(props, WIDGET_PROP_BLACKLIST);
+        return _.omit(props, WIDGET_PROP_DENYLIST);
     },
 };
 

package/src/mixins/{widget-prop-blacklist.js → widget-prop-denylist.js}

@@ -8,10 +8,9 @@
  * automatically serializing schemaless list of attributes causes issues (e.g.
  * circular JSON structures sometimes).
  *
- * This blacklists things that we know don't need to be serialized.
- *
- * TODO(TB): Go through and update usage of BLACKLIST to DENYLIST: https://khanacademy.atlassian.net/browse/LP-13149?atlOrigin=eyJpIjoiNTI0Y2UwNzQ0MzA4NDYzOGI1YWRmNjEwY2E5YzZlZWUiLCJwIjoiaiJ9
+ * This blocks things that we know don't need to be serialized.
  */
+
 const denylist = [
     // standard props "added" by react
     // (technically the renderer still adds them)

package/src/multi-items/__tests__/__snapshots__/multi-renderer_test.js.snap

@@ -214,9 +214,7 @@ exports[`multi-item renderer should snapshot: initial render 1`] = `
                             <button
                               aria-disabled="false"
                               aria-hidden="true"
-                              aria-label=""
                               class="button_vr44p2-o_O-reset_152ygtm-o_O-link_13xlah4-o_O-inlineStyles_1jvwfht"
-                              tabindex="0"
                               type="button"
                             >
                               <div
@@ -391,9 +389,7 @@ exports[`multi-item renderer should snapshot: initial render 1`] = `
                             <button
                               aria-disabled="false"
                               aria-hidden="true"
-                              aria-label=""
                               class="button_vr44p2-o_O-reset_152ygtm-o_O-link_13xlah4-o_O-inlineStyles_1jvwfht"
-                              tabindex="0"
                               type="button"
                             >
                               <div
@@ -568,9 +564,7 @@ exports[`multi-item renderer should snapshot: initial render 1`] = `
                             <button
                               aria-disabled="false"
                               aria-hidden="true"
-                              aria-label=""
                               class="button_vr44p2-o_O-reset_152ygtm-o_O-link_13xlah4-o_O-inlineStyles_1jvwfht"
-                              tabindex="0"
                               type="button"
                             >
                               <div
@@ -745,9 +739,7 @@ exports[`multi-item renderer should snapshot: initial render 1`] = `
                             <button
                               aria-disabled="false"
                               aria-hidden="true"
-                              aria-label=""
                               class="button_vr44p2-o_O-reset_152ygtm-o_O-link_13xlah4-o_O-inlineStyles_1jvwfht"
-                              tabindex="0"
                               type="button"
                             >
                               <div
@@ -922,9 +914,7 @@ exports[`multi-item renderer should snapshot: initial render 1`] = `
                             <button
                               aria-disabled="false"
                               aria-hidden="true"
-                              aria-label=""
                               class="button_vr44p2-o_O-reset_152ygtm-o_O-link_13xlah4-o_O-inlineStyles_1jvwfht"
-                              tabindex="0"
                               type="button"
                             >
                               <div

package/src/styles/perseus-renderer.less

@@ -149,9 +149,6 @@
     .paragraph ul:not(.perseus-widget-radio) {
         .legacy-typography;
         padding-left: 35px;
-    }
-
-    .paragraph ul:not(.perseus-widget-radio) li {
         list-style-type: disc;
     }
 

package/src/styles/widgets/radio.less

@@ -50,3 +50,7 @@
         }
     }
 }
+
+.perseus-widget-radio-fieldset .instructions {
+    font-family: "Lato", sans-serif;
+}

package/src/types.js

@@ -9,7 +9,7 @@ import * as React from "react";
 import type {SerializedHighlightSet} from "./components/highlighting/types.js";
 import type {ILogger} from "./logging/log.js";
 import type {Item} from "./multi-items/item-types.js";
-import type {PerseusWidget, PerseusRadioChoice} from "./perseus-types.js";
+import type {PerseusWidget} from "./perseus-types.js";
 import type {SizeClass} from "./util/sizing-utils.js";
 import type {Result} from "@khanacademy/wonder-blocks-data";
 
@@ -85,12 +85,6 @@ export type ChoiceState = {|
     readOnly: boolean,
 |};
 
-export type RadioChoiceWithMetadata = {|
-    ...PerseusRadioChoice,
-    originalIndex: number,
-    correct: boolean,
-|};
-
 export type ChangeHandler = (
     {|
         hints?: $ReadOnlyArray<Hint>,

package/src/util/react-render.js

@@ -0,0 +1,27 @@
+// @flow
+import {RenderStateRoot} from "@khanacademy/wonder-blocks-core";
+import * as React from "react";
+import ReactDOM from "react-dom";
+
+export default function render<ElementType: React$ElementType>(
+    element: React.Node,
+    container: HTMLElement,
+    callback?: () => void,
+): React$ElementRef<ElementType> {
+    // TODO(LP-11406): Replace this, or callers, with React Portal
+    // eslint-disable-next-line no-restricted-syntax
+    return ReactDOM.render(
+        /**
+         * `RenderStateRoot` is responsible for tracking whether it's
+         * the initial render or subsequent renders.  It's used by
+         * `useUniqueId` and will be used by `UniqueIDProvider` and
+         * `WithSSRPlaceholder` in the future.  We're placing it as
+         * high up in the render tree as possible to ensure that any
+         * components using that hook or those components will function
+         * correctly.
+         */
+        <RenderStateRoot throwIfNested={false}>{element}</RenderStateRoot>,
+        container,
+        callback,
+    );
+}

package/src/util.js

@@ -692,7 +692,7 @@ function widgetShouldHighlight(widget: Widget): boolean {
     }
     switch (widget.type) {
         /**
-         * Highlight bar blacklist
+         * Highlight bar denylist
          */
         case "measurer":
         case "protractor":

package/src/widget-container.jsx

@@ -119,7 +119,7 @@ class WidgetContainer extends React.Component<Props, State> {
 
         // Note: if you add more props here, please consider whether or not
         // it should be auto-serialized (e.g. used in scoreInput()). See
-        // widget-jsonify-deprecated.jsx and widget-prop-blacklist.jsx
+        // widget-jsonify-deprecated.jsx and widget-prop-denylist.jsx
 
         // We default to an empty object for style instead of null
         // because of a strange bug where the static styles aren't applied

package/src/widgets/__stories__/on-screen-keypad.stories.jsx

@@ -0,0 +1,118 @@
+// @flow
+import {Keypad} from "@khanacademy/math-input";
+import {View} from "@khanacademy/wonder-blocks-core";
+import {StyleSheet} from "aphrodite";
+import * as React from "react";
+
+import {ItemRenderer} from "../../index.js";
+import KeypadContext from "../../keypad-context.js";
+import {expressionItem3} from "../__testdata__/expression_testdata.js";
+
+type StoryArgs = {||};
+
+type Story = {|
+    title: string,
+|};
+
+export default ({
+    title: "Perseus/Demos/On Screen Keypad",
+}: Story);
+
+const Content = (): React.Node => {
+    return (
+        <KeypadContext.Consumer>
+            {({keypadElement, setRenderer, scrollableElement}) => (
+                <>
+                    <ItemRenderer
+                        ref={setRenderer}
+                        problemNum={0}
+                        apiOptions={{
+                            customKeypad: true,
+                            onFocusChange: (
+                                newFocusPath,
+                                oldFocusPath,
+                                keypadElement,
+                                focusedElement,
+                            ) => {},
+                        }}
+                        item={expressionItem3}
+                        savedState={null}
+                    />
+                    <div id="workarea" />
+                    <div id="hintsarea" />
+                </>
+            )}
+        </KeypadContext.Consumer>
+    );
+};
+
+const Footer = (): React.Node => {
+    return (
+        <View
+            style={[
+                styles.keypadContainer,
+                {
+                    // NOTE: in webapp we normally get this from problemProgress
+                    // from the exercise state store.
+                    height: 240,
+                },
+            ]}
+        >
+            <KeypadContext.Consumer>
+                {({keypadElement, setKeypadElement, renderer}) => (
+                    <Keypad
+                        onElementMounted={setKeypadElement}
+                        onDismiss={() => renderer && renderer.blur()}
+                        style={styles.keypad}
+                    />
+                )}
+            </KeypadContext.Consumer>
+        </View>
+    );
+};
+
+const Demo = () => {
+    const [keypadElement, setKeypadElement] = React.useState(null);
+    const [renderer, setRenderer] = React.useState(null);
+    const [scrollableElement, setScrollableElement] = React.useState(
+        document.body,
+    );
+
+    return (
+        <KeypadContext.Provider
+            value={{
+                setKeypadElement,
+                keypadElement,
+                setRenderer,
+                renderer,
+                setScrollableElement,
+                scrollableElement,
+            }}
+        >
+            <Content />
+            <Footer />
+        </KeypadContext.Provider>
+    );
+};
+
+export const CustomKeypad = (args: StoryArgs): React.Node => <Demo />;
+
+const styles = StyleSheet.create({
+    keypad: {
+        position: "absolute",
+        // The keypad itself needs to respond to events even though
+        // we've set its container to pointer-events: none;
+        pointerEvents: "all",
+    },
+    keypadContainer: {
+        position: "absolute",
+        width: "100%",
+        bottom: 0,
+        // Hide the overflow of this container so when the keypad is
+        // dismissed, it doesn't overlap the toolbar.
+        overflow: "hidden",
+        // Prevent container from swallowing events that the exercise
+        // below it needs to respond to.
+        pointerEvents: "none",
+    },
+});

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

@@ -62,9 +62,9 @@ exports[`categorizer widget should snapshot on mobile: first mobile render 1`] =
               >
                 <thead>
                   <tr>
-                    <th>
-                       
-                    </th>
+                    <td
+                      class="emptyHeaderCell_1mttrgd"
+                    />
                     <th
                       class="header_whrfk4"
                     >
@@ -509,9 +509,9 @@ exports[`categorizer widget should snapshot: first render 1`] = `
               >
                 <thead>
                   <tr>
-                    <th>
-                       
-                    </th>
+                    <td
+                      class="emptyHeaderCell_1mttrgd"
+                    />
                     <th
                       class="header_whrfk4"
                     >

package/src/widgets/__tests__/__snapshots__/definition_test.js.snap

@@ -39,7 +39,6 @@ exports[`Definition widget should have a default snapshot: first render 1`] = `
                 aria-disabled="false"
                 class="button_vr44p2-o_O-shared_lwskrm-o_O-default_1hl5pu8"
                 role="button"
-                tabindex="0"
                 type="button"
               >
                 <span
@@ -97,7 +96,6 @@ exports[`Definition widget should have an open state snapshot: open state 1`] =
                 aria-disabled="false"
                 class="button_vr44p2-o_O-shared_lwskrm-o_O-default_1hl5pu8"
                 role="button"
-                tabindex="0"
                 type="button"
               >
                 <span

package/src/widgets/__tests__/__snapshots__/graded-group-set-jipt_test.jsx.snap

@@ -250,7 +250,6 @@ exports[`graded-group-set should render all graded groups 1`] = `
                   aria-disabled="false"
                   class="button_vr44p2-o_O-shared_lwskrm-o_O-default_1w5v67"
                   role="button"
-                  tabindex="0"
                   type="button"
                 >
                   <span
@@ -260,7 +259,7 @@ exports[`graded-group-set should render all graded groups 1`] = `
                   </span>
                 </button>
                 <button
-                  class="showHintLink_112g8fo"
+                  class="showHintLink_oak3yy"
                   tabindex="0"
                 >
                   Explain
@@ -487,7 +486,6 @@ exports[`graded-group-set should render all graded groups 1`] = `
                   aria-disabled="false"
                   class="button_vr44p2-o_O-shared_lwskrm-o_O-default_1w5v67"
                   role="button"
-                  tabindex="0"
                   type="button"
                 >
                   <span
@@ -497,7 +495,7 @@ exports[`graded-group-set should render all graded groups 1`] = `
                   </span>
                 </button>
                 <button
-                  class="showHintLink_112g8fo"
+                  class="showHintLink_oak3yy"
                   tabindex="0"
                 >
                   Explain
@@ -724,7 +722,6 @@ exports[`graded-group-set should render all graded groups 1`] = `
                   aria-disabled="false"
                   class="button_vr44p2-o_O-shared_lwskrm-o_O-default_1w5v67"
                   role="button"
-                  tabindex="0"
                   type="button"
                 >
                   <span
@@ -734,7 +731,7 @@ exports[`graded-group-set should render all graded groups 1`] = `
                   </span>
                 </button>
                 <button
-                  class="showHintLink_112g8fo"
+                  class="showHintLink_oak3yy"
                   tabindex="0"
                 >
                   Explain