@khanacademy/perseus 0.2.8 → 0.3.2

package/package.json

@@ -3,7 +3,7 @@
     "description": "Core Perseus API (includes renderers and widgets)",
     "author": "Khan Academy",
     "license": "MIT",
-    "version": "0.2.8",
+    "version": "0.3.2",
     "publishConfig": {
         "access": "public"
     },
@@ -23,8 +23,8 @@
     "dependencies": {
         "@khanacademy/kmath": "^0.0.5",
         "@khanacademy/kas": "^0.2.4",
-        "@khanacademy/math-input": "^0.5.2",
-        "@khanacademy/perseus-linter": "^0.1.0",
+        "@khanacademy/math-input": "^0.5.3",
+        "@khanacademy/perseus-linter": "^0.2.0",
         "@khanacademy/pure-markdown": "^0.1.0",
         "@khanacademy/simple-markdown": "^0.8.3",
         "mathquill": "git+https://git@github.com/Khan/mathquill.git#a9ae54e057c5c1acc8244a5627acbff29901d992"

package/src/__tests__/perseus-markdown_test.jsx

@@ -1,5 +1,5 @@
 // @flow
-import * as Gorgon from "@khanacademy/perseus-linter";
+import * as PerseusLinter from "@khanacademy/perseus-linter";
 
 import PerseusMarkdown from "../perseus-markdown.jsx";
 
@@ -565,14 +565,14 @@ describe("perseus markdown", () => {
                 "data 4 | $data 5 | data 6\n" +
                 "data 7 | data 8 | data 9";
             const context = {
-                ...Gorgon.linterContextDefault,
+                ...PerseusLinter.linterContextDefault,
                 content,
                 widgets: {},
             };
 
             // Act
             const parsedWithLint = parse(content);
-            Gorgon.runLinter(parsedWithLint, context, true);
+            PerseusLinter.runLinter(parsedWithLint, context, true);
 
             // Assert
             expect(parsedWithLint).toMatchSnapshot();
@@ -650,14 +650,14 @@ describe("perseus markdown", () => {
                 "data 4 | $data 5 | data 6\n" +
                 "data 7 | data 8 | data 9";
             const context = {
-                ...Gorgon.linterContextDefault,
+                ...PerseusLinter.linterContextDefault,
                 content,
                 widgets: {},
             };
 
             // Act
             const parsedWithLint = parse(content);
-            Gorgon.runLinter(parsedWithLint, context, true);
+            PerseusLinter.runLinter(parsedWithLint, context, true);
 
             const output = PerseusMarkdown.basicOutput(parsedWithLint);
 

package/src/__tests__/renderer_test.jsx

@@ -31,15 +31,15 @@ import type {
     PerseusInputNumberWidgetOptions,
 } from "../perseus-types.js";
 
-// NOTE(jeremy): We can't use an automatic mock for not-gorgon, because one of
-// it's "instance" methods is created using `debounce` and Jest doesn't provide
-// a mocked instance method for it (I suspect that Jest doesn't see that
-// symbol as an instance method).
+// NOTE(jeremy): We can't use an automatic mock for the translation linter,
+// because one of it's "instance" methods is created using `debounce` and Jest
+// doesn't provide a mocked instance method for it (I suspect that Jest doesn't
+// see that symbol as an instance method).
 const mockRunLinter = jest.fn();
 const mockApplyLintErrors = jest.fn();
-jest.mock("../not-gorgon.js", () => {
-    // We mock the NotGorgon constructor here setting things up so we can
-    // spy/verify calls to instances of NotGorgon
+jest.mock("../translation-linter.js", () => {
+    // We mock the TranslationLinter constructor here setting things up so we
+    // can spy/verify calls to instances of TranslationLinter
     return function () {
         return {
             runLinter: mockRunLinter,
@@ -106,7 +106,7 @@ describe("renderer", () => {
         });
     });
 
-    describe("linting (NotGorgon)", () => {
+    describe("linting (TranslationLinter)", () => {
         const extraProps = {
             linterContext: {
                 contentType: "exercise",
@@ -165,7 +165,7 @@ describe("renderer", () => {
 
             // Assert
             expect(renderer.state.jiptContent).toBeNull();
-            expect(renderer.state.notGorgonLintErrors).toHaveLength(0);
+            expect(renderer.state.translationLintErrors).toHaveLength(0);
             expect(renderer.state.lastUsedWidgetId).toBeNull();
 
             expect(renderer.state.widgetInfo).toStrictEqual(question1.widgets);

package/src/article-renderer.jsx

@@ -5,7 +5,7 @@
  * composed of multiple (Renderer) sections concatenated together.
  */
 
-import * as Gorgon from "@khanacademy/perseus-linter";
+import * as PerseusLinter from "@khanacademy/perseus-linter";
 import classNames from "classnames";
 import PropTypes from "prop-types";
 import * as React from "react";
@@ -37,14 +37,14 @@ class ArticleRenderer extends React.Component<$FlowFixMe, $FlowFixMe> {
 
         // Whether to use the new Bibliotron styles for articles
         useNewStyles: PropTypes.bool,
-        linterContext: Gorgon.linterContextProps,
+        linterContext: PerseusLinter.linterContextProps,
         legacyPerseusLint: PropTypes.arrayOf(PropTypes.string),
     };
 
     static defaultProps: $FlowFixMe = {
         apiOptions: {},
         useNewStyles: false,
-        linterContext: Gorgon.linterContextDefault,
+        linterContext: PerseusLinter.linterContextDefault,
     };
 
     constructor(props: $FlowFixMe) {
@@ -197,7 +197,7 @@ class ArticleRenderer extends React.Component<$FlowFixMe, $FlowFixMe> {
                                 );
                             },
                         }}
-                        linterContext={Gorgon.pushContextStack(
+                        linterContext={PerseusLinter.pushContextStack(
                             this.props.linterContext,
                             "article",
                         )}

package/src/components/input-with-examples.jsx

@@ -1,6 +1,6 @@
 /* eslint-disable react/sort-comp */
 // @flow
-import * as Gorgon from "@khanacademy/perseus-linter";
+import * as PerseusLinter from "@khanacademy/perseus-linter";
 import PropTypes from "prop-types";
 import * as React from "react";
 import _ from "underscore";
@@ -37,7 +37,7 @@ class InputWithExamples extends React.Component<$FlowFixMe, $FlowFixMe> {
 
         // A unique string identifying this InputWithExamples
         id: PropTypes.string.isRequired,
-        linterContext: Gorgon.linterContextProps,
+        linterContext: PerseusLinter.linterContextProps,
     };
 
     static defaultProps: $FlowFixMe = {
@@ -46,7 +46,7 @@ class InputWithExamples extends React.Component<$FlowFixMe, $FlowFixMe> {
         onFocus: function () {},
         onBlur: function () {},
         disabled: false,
-        linterContext: Gorgon.linterContextDefault,
+        linterContext: PerseusLinter.linterContextDefault,
     };
 
     state: $FlowFixMe = {
@@ -178,7 +178,7 @@ class InputWithExamples extends React.Component<$FlowFixMe, $FlowFixMe> {
                 <div id={this._getUniqueId()}>
                     <Renderer
                         content={examplesContent}
-                        linterContext={Gorgon.pushContextStack(
+                        linterContext={PerseusLinter.pushContextStack(
                             this.props.linterContext,
                             "input-with-examples",
                         )}

package/src/components/lint.jsx

@@ -1,7 +1,8 @@
 // @flow
 /**
  * This component renders "lint" nodes in a markdown parse tree. Lint nodes
- * are inserted into the tree by the Gorgon linter (see src/gorgon/gorgon.js).
+ * are inserted into the tree by the Perseus linter (see
+ * perseus-linter/src/index).
  *
  * This component serves multiple purposes
  *

package/src/components/sortable.jsx

@@ -1,6 +1,6 @@
 /* eslint-disable @babel/no-invalid-this, react/forbid-prop-types, react/no-unsafe, react/sort-comp */
 // @flow
-import * as Gorgon from "@khanacademy/perseus-linter";
+import * as PerseusLinter from "@khanacademy/perseus-linter";
 import {CircularSpinner} from "@khanacademy/wonder-blocks-progress-spinner";
 import {StyleSheet, css} from "aphrodite";
 import $ from "jquery";
@@ -95,13 +95,13 @@ class Draggable extends React.Component<DraggableProps, DraggableState> {
         onMouseUp: PropTypes.func.isRequired,
         onRender: PropTypes.func.isRequired,
         type: PropTypes.oneOf([STATIC, DRAGGING, ANIMATING, DISABLED]),
-        linterContext: Gorgon.linterContextProps,
+        linterContext: PerseusLinter.linterContextProps,
     };
 
     static defaultProps = {
         includePadding: true,
         type: STATIC,
-        linterContext: Gorgon.linterContextDefault,
+        linterContext: PerseusLinter.linterContextDefault,
     };
 
     state: DraggableState = {
@@ -214,7 +214,7 @@ class Draggable extends React.Component<DraggableProps, DraggableState> {
             >
                 <Renderer
                     content={this.props.content}
-                    linterContext={Gorgon.pushContextStack(
+                    linterContext={PerseusLinter.pushContextStack(
                         this.props.linterContext,
                         "draggable",
                     )}
@@ -422,7 +422,7 @@ class Sortable extends React.Component<SortableProps, SortableState> {
         onMeasure: function () {},
         margin: 5,
         onChange: function () {},
-        linterContext: Gorgon.linterContextDefault,
+        linterContext: PerseusLinter.linterContextDefault,
         waitForKatexLoad: true,
     };
 
@@ -618,7 +618,7 @@ class Sortable extends React.Component<SortableProps, SortableState> {
                         includePadding={this.props.padding}
                         margin={isLast && isStatic ? 0 : margin}
                         endPosition={item.endPosition}
-                        linterContext={Gorgon.pushContextStack(
+                        linterContext={PerseusLinter.pushContextStack(
                             this.props.linterContext,
                             "sortable",
                         )}

package/src/hint-renderer.jsx

@@ -1,5 +1,5 @@
 // @flow
-import * as Gorgon from "@khanacademy/perseus-linter";
+import * as PerseusLinter from "@khanacademy/perseus-linter";
 import * as i18n from "@khanacademy/wonder-blocks-i18n";
 import {StyleSheet, css} from "aphrodite";
 import classnames from "classnames";
@@ -35,7 +35,7 @@ type DefaultProps = {|
 /* Renders just a hint preview */
 class HintRenderer extends React.Component<Props> {
     static defaultProps: DefaultProps = {
-        linterContext: Gorgon.linterContextDefault,
+        linterContext: PerseusLinter.linterContextDefault,
     };
 
     getSerializedState: () => void = () => {
@@ -115,7 +115,7 @@ class HintRenderer extends React.Component<Props> {
                     images={hint.images}
                     apiOptions={rendererApiOptions}
                     findExternalWidgets={this.props.findExternalWidgets}
-                    linterContext={Gorgon.pushContextStack(
+                    linterContext={PerseusLinter.pushContextStack(
                         this.props.linterContext,
                         "hint",
                     )}

package/src/hints-renderer.jsx

@@ -1,5 +1,5 @@
 // @flow
-import * as Gorgon from "@khanacademy/perseus-linter";
+import * as PerseusLinter from "@khanacademy/perseus-linter";
 import * as i18n from "@khanacademy/wonder-blocks-i18n";
 import {StyleSheet, css} from "aphrodite";
 import classnames from "classnames";
@@ -42,7 +42,7 @@ type State = {|
 // eslint-disable-next-line react/no-unsafe
 class HintsRenderer extends React.Component<Props, State> {
     static defaultProps: DefaultProps = {
-        linterContext: Gorgon.linterContextDefault,
+        linterContext: PerseusLinter.linterContextDefault,
     };
 
     // The isFinalHelpPage property determines if the user has requested help
@@ -180,7 +180,7 @@ class HintsRenderer extends React.Component<Props, State> {
                     key={"hintRenderer" + i}
                     apiOptions={apiOptions}
                     findExternalWidgets={this.props.findExternalWidgets}
-                    linterContext={Gorgon.pushContextStack(
+                    linterContext={PerseusLinter.pushContextStack(
                         this.props.linterContext,
                         "hints[" + i + "]",
                     )}

package/src/index.js

@@ -115,6 +115,7 @@ export type {
     RendererInterface,
     Version,
     VideoData,
+    VideoKind,
     WidgetDict,
     WidgetExports,
     WidgetInfo,

package/src/item-renderer.jsx

@@ -1,6 +1,6 @@
 /* eslint-disable react/no-unsafe */
 // @flow
-import * as Gorgon from "@khanacademy/perseus-linter";
+import * as PerseusLinter from "@khanacademy/perseus-linter";
 import $ from "jquery";
 import * as React from "react";
 import * as ReactDOM from "react-dom";
@@ -87,7 +87,7 @@ class ItemRenderer extends React.Component<Props, State> {
         initialHintsVisible: 0,
         workAreaSelector: "#workarea",
         reviewMode: false,
-        linterContext: Gorgon.linterContextDefault,
+        linterContext: PerseusLinter.linterContextDefault,
     };
 
     constructor(props: Props) {
@@ -208,7 +208,7 @@ class ItemRenderer extends React.Component<Props, State> {
                 questionCompleted={this.state.questionCompleted}
                 reviewMode={this.props.reviewMode}
                 savedState={this.props.savedState}
-                linterContext={Gorgon.pushContextStack(
+                linterContext={PerseusLinter.pushContextStack(
                     this.props.linterContext,
                     "question",
                 )}
@@ -226,7 +226,7 @@ class ItemRenderer extends React.Component<Props, State> {
                 hints={this.props.item.hints}
                 hintsVisible={this.state.hintsVisible}
                 apiOptions={apiOptions}
-                linterContext={Gorgon.pushContextStack(
+                linterContext={PerseusLinter.pushContextStack(
                     this.props.linterContext,
                     "hints",
                 )}

package/src/jquery.mobile.vmouse.js

@@ -21,6 +21,7 @@
 //
 // The current version exposes the following virtual events to jQuery bind methods:
 // "vmouseover vmousedown vmousemove vmouseup vclick vmouseout vmousecancel"
+import $ from "jquery";
 
 (function ($, window, document, undefined) {
     if (typeof $ === "undefined") {
@@ -542,4 +543,4 @@
             true,
         );
     }
-})(window.jQuery, window, document);
+})($, window, document);

package/src/perseus-markdown.jsx

@@ -110,7 +110,8 @@ const rules = {
             } else if (node.table.type === "lint") {
                 // The `table` in this node is actually a `lint` node,
                 // not the expected `table` node. This is due to the linter
-                // implementation "reparenting" the `table` node, see gorgon.js
+                // implementation "reparenting" the `table` node, see
+                // perseus-linter/src/index.js
                 if (node.table.content?.type === "table") {
                     // And the `content` of this lint node is the `table` node
                     // which we actually want to render. Thus, we perform

package/src/renderer.jsx

@@ -1,6 +1,6 @@
 /* eslint-disable react/no-unsafe */
 // @flow
-import * as Gorgon from "@khanacademy/perseus-linter";
+import * as PerseusLinter from "@khanacademy/perseus-linter";
 import classNames from "classnames";
 import $ from "jquery";
 import * as React from "react";
@@ -18,11 +18,11 @@ import InteractionTracker from "./interaction-tracker.js";
 import Objective from "./interactive2/objective_.js";
 import JiptParagraphs from "./jipt-paragraphs.js";
 import {Errors, Log} from "./logging/log.js";
-import NotGorgon from "./not-gorgon.js"; // The i18n linter
 import {ClassNames as ApiClassNames, ApiOptions} from "./perseus-api.jsx";
 import {PerseusError} from "./perseus-error.js";
 import PerseusMarkdown from "./perseus-markdown.jsx";
 import QuestionParagraph from "./question-paragraph.jsx";
+import TranslationLinter from "./translation-linter.js";
 import Util from "./util.js";
 import preprocessTex from "./util/katex-preprocess.js";
 import WidgetContainer from "./widget-container.jsx";
@@ -170,7 +170,7 @@ type Props = {|
 |};
 
 type State = {|
-    notGorgonLintErrors: $ReadOnlyArray<string>,
+    translationLintErrors: $ReadOnlyArray<string>,
     widgetInfo: $ReadOnly<{|[id: string]: ?WidgetInfo|}>,
     widgetProps: $ReadOnly<{|[id: string]: ?$FlowFixMe|}>,
     jiptContent: any,
@@ -209,7 +209,7 @@ class Renderer extends React.Component<Props, State> {
     _isTwoColumn: boolean;
 
     // The i18n linter.
-    _notGorgon: NotGorgon;
+    _translationLinter: TranslationLinter;
 
     lastRenderedMarkdown: React.Element<PerseusDependencies["KatexProvider"]>;
     reuseMarkdown: boolean;
@@ -233,20 +233,20 @@ class Renderer extends React.Component<Props, State> {
         reviewMode: false,
         serializedState: null,
         onSerializedStateUpdated: () => {},
-        linterContext: Gorgon.linterContextDefault,
+        linterContext: PerseusLinter.linterContextDefault,
     };
 
     constructor(props: Props, context: Context) {
         super(props, context);
-        this._notGorgon = new NotGorgon();
+        this._translationLinter = new TranslationLinter();
 
         this.state = {
             jiptContent: null,
 
-            // NotGorgon is async and currently does not contain a location.
-            // This is a list of error strings NotGorgon detected on its last
-            // run.
-            notGorgonLintErrors: [],
+            // TranslationLinter is async and currently does not contain a
+            // location. This is a list of error strings TranslationLinter
+            // detected on its last run.
+            translationLintErrors: [],
 
             // The ID of the last widget the user interacted with. We'll
             // use this to set the `isLastUsedWidget` flag on the
@@ -275,9 +275,9 @@ class Renderer extends React.Component<Props, State> {
         if (this.props.linterContext.highlightLint) {
             // Get i18n lint errors asynchronously. If there are lint errors,
             // this component will be rerendered.
-            this._notGorgon.runLinter(
+            this._translationLinter.runLinter(
                 this.props.content,
-                this.handleNotGorgonLintErrors,
+                this.handletranslationLintErrors,
             );
         }
     }
@@ -343,8 +343,8 @@ class Renderer extends React.Component<Props, State> {
             !newJipt &&
             oldContent === newContent &&
             _.isEqual(
-                this.state.notGorgonLintErrors,
-                nextState.notGorgonLintErrors,
+                this.state.translationLintErrors,
+                nextState.translationLintErrors,
             ) &&
             // If we are running the linter then we need to know when
             // widgets have changed because we need for force the linter to
@@ -391,9 +391,9 @@ class Renderer extends React.Component<Props, State> {
         if (this.props.linterContext.highlightLint) {
             // Get i18n lint errors asynchronously. If lint errors have changed
             // since the last run, this component will be rerendered.
-            this._notGorgon.runLinter(
+            this._translationLinter.runLinter(
                 this.props.content,
-                this.handleNotGorgonLintErrors,
+                this.handletranslationLintErrors,
             );
         }
     }
@@ -537,7 +537,7 @@ class Renderer extends React.Component<Props, State> {
                         type={type}
                         initialProps={this.getWidgetProps(id)}
                         shouldHighlight={shouldHighlight}
-                        linterContext={Gorgon.pushContextStack(
+                        linterContext={PerseusLinter.pushContextStack(
                             this.props.linterContext,
                             "widget",
                         )}
@@ -1780,18 +1780,17 @@ class Renderer extends React.Component<Props, State> {
         return examples[0];
     };
 
-    // NotGorgon callback
-    handleNotGorgonLintErrors: (lintErrors: $ReadOnlyArray<string>) => void = (
-        lintErrors: $ReadOnlyArray<string>,
-    ) => {
-        if (!this._isMounted) {
-            return;
-        }
+    // TranslationLinter callback
+    handletranslationLintErrors: (lintErrors: $ReadOnlyArray<string>) => void =
+        (lintErrors: $ReadOnlyArray<string>) => {
+            if (!this._isMounted) {
+                return;
+            }
 
-        this.setState({
-            notGorgonLintErrors: lintErrors,
-        });
-    };
+            this.setState({
+                translationLintErrors: lintErrors,
+            });
+        };
 
     render(): React.Node {
         const apiOptions = this.getApiOptions();
@@ -1885,12 +1884,12 @@ class Renderer extends React.Component<Props, State> {
                 ...this.props.linterContext,
             };
 
-            Gorgon.runLinter(parsedMarkdown, context, true);
+            PerseusLinter.runLinter(parsedMarkdown, context, true);
 
-            // Apply the lint errors from the last NotGorgon run.
+            // Apply the lint errors from the last TranslationLinter run.
             // TODO(joshuan): Support overlapping dots.
-            this._notGorgon.applyLintErrors(parsedMarkdown, [
-                ...this.state.notGorgonLintErrors,
+            this._translationLinter.applyLintErrors(parsedMarkdown, [
+                ...this.state.translationLintErrors,
                 ...(this.props.legacyPerseusLint || []),
             ]);
         }

package/src/styles/perseus-renderer.less

@@ -1004,4 +1004,4 @@
     }
 }
 
-@import (inline) "../../../math-input/dist/index.css";
+@import "../../../math-input/less/main.less";

package/src/{not-gorgon.js → translation-linter.js}

@@ -3,14 +3,11 @@ import {Rule} from "@khanacademy/perseus-linter";
 import {debounce} from "underscore";
 
 /**
- * NotGorgon asynchronously calls Khan Academy's poentry linter.
+ * TranslationLinter asynchronously calls Khan Academy's poentry linter.
  *
  * The poentry linter checks for issues that prevent content from being
- * translated. This linter is KA-specific and so NotGorgon does not do anything
- * in non-KA environments.
- *
- * NotGorgon is named as such because it is not Gorgon, Perseus' built-in
- * linter.
+ * translated. This linter is KA-specific and so TranslationLinter does not do
+ * anything in non-KA environments.
  */
 
 // A LintCB is called once the linter has been run.
@@ -20,7 +17,7 @@ type LintCB = (errors: $ReadOnlyArray<string>) => void;
 // last call. The timer is reset if the lint is called during the wait.
 const DEBOUNCE_TIMEOUT = 1000;
 
-export default class NotGorgon {
+export default class TranslationLinter {
     // To avoid linting when nothing has changed.
     previousContent: ?string = null;
 
@@ -101,17 +98,17 @@ export default class NotGorgon {
 
     /**
      * Applies an array of errors generated by linters without position
-     * information (NotGorgon and the legacy getSaveWarnings()) to the top
-     * of a Perseus tree.
+     * information (TranslationLinter and the legacy getSaveWarnings()) to the
+     * top of a Perseus tree.
      */
     applyLintErrors(
         parsedMarkdown: any,
-        notGorgonLintErrors: $ReadOnlyArray<string>,
+        translationLintErrors: $ReadOnlyArray<string>,
     ) {
         // These lint errors do not have position data associated with
         // them, so we just plop them at the top.
-        if (notGorgonLintErrors.length) {
-            const errorText = notGorgonLintErrors.join("\n\n");
+        if (translationLintErrors.length) {
+            const errorText = translationLintErrors.join("\n\n");
             parsedMarkdown.unshift({
                 content: {
                     type: "text",

package/src/types.js

@@ -359,6 +359,8 @@ type InitialRequestUrlInterface = {|
     protocol: string,
 |};
 
+export type VideoKind = "YOUTUBE_ID" | "READABLE_ID";
+
 // An object for dependency injection, to allow different clients
 // to provide different methods for logging, translation, network
 // requests, etc.
@@ -392,7 +394,7 @@ export type PerseusDependencies = {|
     // framework.
     useVideo(
         id: string,
-        kind: "YOUTUBE_ID" | "READABLE_ID",
+        kind: VideoKind,
     ): Result<{|
         video: ?VideoData,
     |}>,

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

@@ -30,15 +30,24 @@ exports[`Definition widget should have a default snapshot: first render 1`] = `
             class="perseus-widget-container widget-nohighlight widget-inline"
           >
             <span
-              aria-describedby="uid-tooltip-0-aria-content"
+              aria-controls="uid-popover-0-wb-id"
+              aria-expanded="false"
               class="perseus-widget-definition"
-              tabindex="0"
+              id="uid-popover-0-wb-id-anchor"
             >
-              <div
-                class="default_xu2jcg-o_O-inlineStyles_txdle"
+              <button
+                aria-disabled="false"
+                class="button_vr44p2-o_O-shared_lwskrm-o_O-default_1hl5pu8-o_O-small_xwkmkn"
+                role="button"
+                tabindex="0"
+                type="button"
               >
-                the Pequots
-              </div>
+                <span
+                  class="text_f1191h-o_O-LabelSmall_hl4zs1-o_O-text_m8a8ki-o_O-textWithFocus_e296pg"
+                >
+                  the Pequots
+                </span>
+              </button>
             </span>
           </div>
           , upon these conditions.
@@ -79,15 +88,24 @@ exports[`Definition widget should have an open state snapshot: open state 1`] =
             class="perseus-widget-container widget-nohighlight widget-inline"
           >
             <span
-              aria-describedby="uid-tooltip-1-aria-content"
+              aria-controls="uid-popover-1-wb-id"
+              aria-expanded="true"
               class="perseus-widget-definition"
-              tabindex="0"
+              id="uid-popover-1-wb-id-anchor"
             >
-              <div
-                class="default_xu2jcg-o_O-inlineStyles_txdle"
+              <button
+                aria-disabled="false"
+                class="button_vr44p2-o_O-shared_lwskrm-o_O-default_1hl5pu8-o_O-small_xwkmkn"
+                role="button"
+                tabindex="0"
+                type="button"
               >
-                the Pequots
-              </div>
+                <span
+                  class="text_f1191h-o_O-LabelSmall_hl4zs1-o_O-text_m8a8ki-o_O-textWithFocus_e296pg-o_O-focus_15mc0l2"
+                >
+                  the Pequots
+                </span>
+              </button>
             </span>
           </div>
           , upon these conditions.