@khanacademy/perseus 1.1.2 → 1.3.0

package/package.json

@@ -3,7 +3,7 @@
     "description": "Core Perseus API (includes renderers and widgets)",
     "author": "Khan Academy",
     "license": "MIT",
-    "version": "1.1.2",
+    "version": "1.3.0",
     "publishConfig": {
         "access": "public"
     },
@@ -35,16 +35,16 @@
         "@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.6.7",
+        "@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.10",
+        "@khanacademy/wonder-blocks-popover": "^1.1.24",
         "@khanacademy/wonder-blocks-progress-spinner": "^1.1.31",
         "@khanacademy/wonder-blocks-spacing": "^3.0.5",
-        "@khanacademy/wonder-blocks-tooltip": "^1.3.10",
+        "@khanacademy/wonder-blocks-tooltip": "^1.4.0",
         "@khanacademy/wonder-blocks-typography": "^1.1.31",
         "@khanacademy/wonder-stuff-core": "^0.1.2",
         "aphrodite": "^1.2.5",
@@ -68,16 +68,16 @@
         "@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.6.7",
+        "@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.10",
+        "@khanacademy/wonder-blocks-popover": "^1.1.24",
         "@khanacademy/wonder-blocks-progress-spinner": "^1.1.31",
         "@khanacademy/wonder-blocks-spacing": "^3.0.5",
-        "@khanacademy/wonder-blocks-tooltip": "^1.3.10",
+        "@khanacademy/wonder-blocks-tooltip": "^1.4.0",
         "@khanacademy/wonder-blocks-typography": "^1.1.31",
         "@khanacademy/wonder-stuff-core": "^0.1.2",
         "aphrodite": "^1.2.5",

package/src/__tests__/__snapshots__/renderer_test.jsx.snap

@@ -385,11 +385,17 @@ exports[`renderer snapshots correct answer: correct answer 1`] = `
               <div
                 class="default_xu2jcg-o_O-menuWrapper_wvrnr4"
               >
+                <span
+                  aria-atomic="true"
+                  aria-live="polite"
+                  aria-relevant="additions text"
+                  class="srOnly_19bpjuy"
+                  data-test-id="dropdown-live-region"
+                />
                 <button
                   aria-expanded="false"
                   aria-haspopup="listbox"
                   class="button_vr44p2-o_O-shared_u51dsh-o_O-default_kjzwx1-o_O-focus_1qpi544"
-                  tabindex="0"
                   type="button"
                 >
                   <span
@@ -456,11 +462,17 @@ exports[`renderer snapshots incorrect answer: incorrect answer 1`] = `
               <div
                 class="default_xu2jcg-o_O-menuWrapper_wvrnr4"
               >
+                <span
+                  aria-atomic="true"
+                  aria-live="polite"
+                  aria-relevant="additions text"
+                  class="srOnly_19bpjuy"
+                  data-test-id="dropdown-live-region"
+                />
                 <button
                   aria-expanded="false"
                   aria-haspopup="listbox"
                   class="button_vr44p2-o_O-shared_u51dsh-o_O-default_kjzwx1-o_O-focus_1qpi544"
-                  tabindex="0"
                   type="button"
                 >
                   <span
@@ -527,11 +539,17 @@ exports[`renderer snapshots initial render: initial render 1`] = `
               <div
                 class="default_xu2jcg-o_O-menuWrapper_wvrnr4"
               >
+                <span
+                  aria-atomic="true"
+                  aria-live="polite"
+                  aria-relevant="additions text"
+                  class="srOnly_19bpjuy"
+                  data-test-id="dropdown-live-region"
+                />
                 <button
                   aria-expanded="false"
                   aria-haspopup="listbox"
                   class="button_vr44p2-o_O-shared_u51dsh-o_O-default_kjzwx1"
-                  tabindex="0"
                   type="button"
                 >
                   <span

package/src/components/highlighting/ui/highlight-tooltip.jsx

@@ -13,12 +13,12 @@
  * still have to notify the tooltip to remeasure itself when the highlight
  * focus _changes_.
  */
+import Spacing from "@khanacademy/wonder-blocks-spacing";
+import Tooltip from "@khanacademy/wonder-blocks-tooltip";
 import {StyleSheet, css} from "aphrodite";
 import * as React from "react";
 
 import {Log} from "../../../logging/log.js";
-import {colors} from "../../../styles/global-styles.js";
-import NewTooltip from "../../new-tooltip/new-tooltip.jsx";
 
 import {getRelativeRect} from "./util.js";
 
@@ -36,8 +36,6 @@ type HighlightTooltipProps = {|
 |};
 
 class HighlightTooltip extends React.PureComponent<HighlightTooltipProps> {
-    _tooltip: ?React.ElementRef<typeof NewTooltip>;
-
     _getFocusRect(): ?Rect {
         const {focusNode, focusOffset, offsetParent} = this.props;
 
@@ -94,31 +92,36 @@ class HighlightTooltip extends React.PureComponent<HighlightTooltipProps> {
             return null;
         }
 
-        const content = (
-            <div className={css(styles.tooltipLabel)}>{this.props.label}</div>
+        // using div instead of TooltipContent because
+        // TooltipContent wouldn't let me overwrite
+        // user-select and onClick
+        const content: $FlowFixMe = (
+            <div
+                className={css(styles.tooltipLabel)}
+                onClick={this.props.onClick}
+            >
+                {this.props.label}
+            </div>
         );
 
+        const style = {
+            position: "absolute",
+            left: focusRect.left,
+            // offset the spacing WB provides around tooltips
+            top: `calc(${Math.round(focusRect.top)}px + 0.95em)`,
+            height: 0,
+        };
+
         return (
-            <NewTooltip
-                content={content}
-                color={colors.kaBlue}
-                inverted={true}
-                onClick={this.props.onClick}
+            <div
+                style={style}
                 onMouseEnter={this.props.onMouseEnter}
                 onMouseLeave={this.props.onMouseLeave}
-                toggleOnHover={false}
-                showOnMount={true}
-                ref={(e) => (this._tooltip = e)}
             >
-                <div
-                    style={{
-                        position: "absolute",
-                        left: focusRect.left,
-                        top: focusRect.top,
-                        height: focusRect.height,
-                    }}
-                />
-            </NewTooltip>
+                <Tooltip content={content} opened={true}>
+                    <div />
+                </Tooltip>
+            </div>
         );
     }
 }
@@ -131,6 +134,9 @@ const styles = StyleSheet.create({
         // we lose our reference to the _actual_ text they want to highlight,
         // and the "Add highlight" action fails.
         userSelect: "none",
+        fontFamily: `"Lato", sans-serif`,
+        padding: `10px ${Spacing.medium_16}px`,
+        cursor: "pointer",
     },
 });
 

package/src/components/highlighting/ui/selection-tracker.jsx

@@ -24,7 +24,7 @@ export type TrackedSelection = {|
     proposedHighlight: DOMHighlight,
 |};
 
-type SelectionTrackerProps = {
+type SelectionTrackerProps = {|
     // A function that builds a DOMHighlight from the given DOMRange, if
     // possible. If it would not currently be valid to add a highlight over the
     // given DOMRange, returns null.
@@ -38,17 +38,15 @@ type SelectionTrackerProps = {
     ) => React.Element<any>,
     // If false, will not track selections.
     enabled: boolean,
-    ...
-};
+|};
 
-type SelectionTrackerState = {
+type SelectionTrackerState = {|
     // The current state of the mouse button. We distinguish between down,
     // down and the selection has changed since going down, and up.
     mouseState: "down" | "down-and-selecting" | "up",
     // The current TrackedSelection, if any.
     trackedSelection: ?TrackedSelection,
-    ...
-};
+|};
 
 class SelectionTracker extends React.PureComponent<
     SelectionTrackerProps,
@@ -63,15 +61,15 @@ class SelectionTracker extends React.PureComponent<
         this._updateListeners(false, this.props.enabled);
     }
 
-    UNSAFE_componentWillReceiveProps(nextProps: SelectionTrackerProps) {
-        if (this.props.buildHighlight !== nextProps.buildHighlight) {
+    componentDidUpdate(prevProps: SelectionTrackerProps) {
+        if (this.props.buildHighlight !== prevProps.buildHighlight) {
             // The highlight-building function changed, so the
             // proposedHighlight we built with it might be different, or no
             // longer be valid. Update accordingly.
-            this._updateTrackedSelection(nextProps.buildHighlight);
+            this._updateTrackedSelection();
         }
 
-        this._updateListeners(this.props.enabled, nextProps.enabled);
+        this._updateListeners(prevProps.enabled, this.props.enabled);
     }
 
     componentWillUnmount() {
@@ -133,37 +131,28 @@ class SelectionTracker extends React.PureComponent<
     }
 
     /**
-     * Compute the current TrackedSelection from the document state.
+     * Compute and update the TrackedSelection to reflect the document state.
      */
-    _computeTrackedSelection(
-        buildHighlight: (domRange: DOMRange) => ?DOMHighlight,
-    ): ?TrackedSelection {
+    _updateTrackedSelection(): void {
         const focusAndRange = this._computeFocusAndRange();
         if (!focusAndRange) {
-            return null;
+            this.setState({trackedSelection: null});
+            return;
         }
 
         const {focusNode, focusOffset, range} = focusAndRange;
-        const proposedHighlight = buildHighlight(range);
+        const proposedHighlight = this.props.buildHighlight(range);
         if (!proposedHighlight) {
-            return null;
+            this.setState({trackedSelection: null});
+            return;
         }
 
-        return {focusNode, focusOffset, proposedHighlight};
-    }
-
-    /**
-     * Update the TrackedSelection to reflect the document state.
-     */
-    _updateTrackedSelection(
-        buildHighlight: (domRange: DOMRange) => ?DOMHighlight,
-    ) {
-        const trackedSelection = this._computeTrackedSelection(buildHighlight);
+        const trackedSelection = {focusNode, focusOffset, proposedHighlight};
         this.setState({trackedSelection});
     }
 
     _handleSelectionChange: () => void = () => {
-        this._updateTrackedSelection(this.props.buildHighlight);
+        this._updateTrackedSelection();
 
         if (this.state.mouseState === "down") {
             this.setState({

package/src/styles/articles.less

@@ -178,8 +178,6 @@
         position: relative;
 
         &:before {
-            background: linear-gradient(to right,
-                rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
             bottom: 0;
             content: "";
             position: absolute;

package/src/styles/perseus-renderer.less

@@ -107,7 +107,7 @@
     }
 
     div.paragraph {
-        font-family: "Noto Serif", serif;
+        font-family: "Lato", sans-serif;
         font-weight: 400;
         font-size: 18px;
         line-height: 22px;

package/src/styles/widgets/passage.less

@@ -45,12 +45,16 @@
 
         margin: 0 0 10px;
     }
+
+    // note(matthewc): If you need to change any of this,
+    // check that line numbers line up correctly.
+    // The margin should probably be 0 or the line height
     .passage-text div.paragraph {
-        font-family: "Noto Serif", serif;
         font-weight: 400;
-        font-size: 20px;
-        line-height: 24px;
+        font-size: @font-size;
+        line-height: @line-height;
         text-indent: 20px;
+        margin: 0;
 
         span {
             text-indent: 0;

package/src/widgets/__stories__/passage-ref.stories.jsx

@@ -2,7 +2,7 @@
 import * as React from "react";
 
 import {RendererWithDebugUI} from "../../../../../testing/renderer-with-debug-ui.jsx";
-import {question1} from "../__testdata__/passage-ref_testdata.js";
+import {question1, question2} from "../__testdata__/passage-ref_testdata.js";
 
 type StoryArgs = {||};
 
@@ -14,6 +14,10 @@ export default ({
     title: "Perseus/Widgets/PassageRef",
 }: Story);
 
-export const Question1 = (args: StoryArgs): React.Node => {
+export const ShortPassage = (args: StoryArgs): React.Node => {
     return <RendererWithDebugUI question={question1} />;
 };
+
+export const LongPassage = (args: StoryArgs): React.Node => {
+    return <RendererWithDebugUI question={question2} />;
+};

package/src/widgets/__stories__/passage.stories.jsx

@@ -2,7 +2,11 @@
 import * as React from "react";
 
 import {RendererWithDebugUI} from "../../../../../testing/renderer-with-debug-ui.jsx";
-import {question1, question2} from "../__testdata__/passage_testdata.js";
+import {
+    question1,
+    question2,
+    question3,
+} from "../__testdata__/passage_testdata.js";
 
 export default {
     title: "Perseus/Widgets/Passage",
@@ -17,3 +21,7 @@ export const SimpleQuestion = (args: StoryArgs): React.Node => {
 export const MultiPassageQuestion = (args: StoryArgs): React.Node => {
     return <RendererWithDebugUI question={question2} />;
 };
+
+export const SingleNumberedPassage = (args: StoryArgs): React.Node => {
+    return <RendererWithDebugUI question={question3} />;
+};

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

@@ -6,6 +6,7 @@ import {RendererWithDebugUI} from "../../../../../testing/renderer-with-debug-ui
 import {
     questionWithPassage,
     multiChoiceQuestion,
+    multiChoiceQuestionSimple,
 } from "../__testdata__/radio_testdata.js";
 
 import type {PerseusRenderer} from "../../perseus-types.js";
@@ -71,6 +72,16 @@ export const SingleSelect = (args: StoryArgs): React.Node => {
     );
 };
 
+export const MultiSelectSimple = (args: StoryArgs): React.Node => {
+    return (
+        <RendererWithDebugUI
+            question={applyStoryArgs(multiChoiceQuestionSimple, args)}
+            apiOptions={buildApiOptions(args)}
+            reviewMode={args.reviewMode}
+        />
+    );
+};
+
 export const MultiSelect = (args: StoryArgs): React.Node => {
     return (
         <RendererWithDebugUI

package/src/widgets/__testdata__/passage-ref_testdata.js

@@ -39,3 +39,65 @@ export const question1: PerseusRenderer = {
         },
     },
 };
+
+export const question2: PerseusRenderer = {
+    content:
+        '[[☃ passage 1]]\n\n"It is!" is used in [[☃ passage-ref 1]]\n\n"unsettle" is used in [[☃ passage-ref 2]]\n\n"flagon" is used in [[☃ passage-ref 3]]\n\n',
+    images: {},
+    widgets: {
+        "passage 1": {
+            alignment: "default",
+            graded: true,
+            options: {
+                footnotes: "",
+                passageText:
+                    '\n\nOne afternoon, Mrs. Bretton, coaxing [Paulina] from her usual station in a corner, had lifted her into the window-seat, and, by way of occupying her attention, told her to watch the passengers and count how many ladies should go down the street in a given time. She had sat listlessly, hardly looking, and not counting, when—my eye being fixed on hers—I witnessed in its iris and pupil a startling transfiguration. These sudden, dangerous natures—*sensitive* as they are called—offer many a curious spectacle to those whom a cooler temperament has secured from participation in their angular vagaries. The fixed and heavy gaze swum, trembled, then glittered in fire; the small, overcast brow cleared; the trivial and dejected features lit up; the sad countenance vanished, and in its place appeared a sudden eagerness, an intense expectancy. {{"It *is!*"}} were her words.\n\nLike a bird or a shaft, or any other swift thing, she was gone from the room. How she got the house-door open I cannot tell; probably it might be ajar; perhaps Warren was in the way and obeyed her behest, which would be impetuous enough. I—watching calmly from the window—saw her, in her black frock and tiny braided apron (to pinafores she had an antipathy), dart half the length of the street; and, as I was on the point of turning, and quietly announcing to Mrs. Bretton that the child was run out mad, and ought instantly to be pursued, I saw her caught up, and rapt at once from my cool observation, and from the wondering stare of the passengers. A gentleman had done this good turn, and now, covering her with his     cloak, advanced to restore her to the house whence he had seen her issue.\n\nI concluded he would leave her in a servant\'s charge and withdraw; but he entered: having tarried a little while below, he came up-stairs.\n\nHis reception immediately explained that he was known to Mrs. Bretton. She recognised him; she greeted him, and yet she was fluttered, surprised, taken unawares. Her look and manner were even expostulatory; and in reply to these, rather than her words, he said,—"I could not help it, madam: I found it impossible to leave the country without seeing with my own eyes how she settled."\n\n"But you will {{unsettle}} her."\n\n"I hope not. And how is papa\'s little Polly?"\n\nThis question he addressed to Paulina, as he sat down and placed her gently on the ground before him.\n\n"How is Polly\'s papa?" was the reply, as she leaned on his knee, and gazed up into his face.\n\nIt was not a noisy, not a wordy scene: for that I was thankful; but it was a scene of feeling too brimful, and which, because the cup did not foam up high or furiously overflow, only oppressed one the more. On all occasions of vehement, unrestrained expansion, a sense of disdain or ridicule comes to the weary spectator\'s relief; whereas I have ever felt most burdensome that sort of sensibility which bends of its own will, a giant slave under the sway of good sense.\n\nMr. Home was a stern-featured—perhaps I should rather say, a hard-featured man: his forehead was knotty, and his cheekbones were marked and prominent. The character of his face was quite Scotch; but there was feeling in his eye, and emotion in his now agitated countenance. His northern accent in speaking harmonised with his physiognomy. He was at once proud-looking and homely-looking. He laid his hand on the child\'s uplifted head. She said—"Kiss Polly."\n\nHe kissed her. I wished she would utter some hysterical cry, so that I might get relief and be at ease. She made wonderfully little noise: she seemed to have got what she wanted—all she wanted, and to be in a trance of content. Neither in mien nor in features was this creature like her sire, and yet she was of his strain: her mind had been filled from his, as the cup from the {{flagon}}.\n',
+                passageTitle: "",
+                showLineNumbers: true,
+                static: false,
+            },
+            static: false,
+            type: "passage",
+            version: {
+                major: 0,
+                minor: 0,
+            },
+        },
+        "passage-ref 1": {
+            options: {
+                passageNumber: 1,
+                referenceNumber: 1,
+                summaryText: "",
+            },
+            type: "passage-ref",
+            version: {
+                major: 0,
+                minor: 1,
+            },
+        },
+        "passage-ref 2": {
+            options: {
+                passageNumber: 1,
+                referenceNumber: 2,
+                summaryText: "",
+            },
+            type: "passage-ref",
+            version: {
+                major: 0,
+                minor: 1,
+            },
+        },
+        "passage-ref 3": {
+            options: {
+                passageNumber: 1,
+                referenceNumber: 3,
+                summaryText: "",
+            },
+            type: "passage-ref",
+            version: {
+                major: 0,
+                minor: 1,
+            },
+        },
+    },
+};

package/src/widgets/__testdata__/passage_testdata.js

@@ -69,3 +69,28 @@ export const question2: PerseusRenderer = {
         },
     },
 };
+
+export const question3: PerseusRenderer = {
+    content: "[[☃ passage 1]]",
+    images: {},
+    widgets: {
+        "passage 1": {
+            alignment: "default",
+            graded: true,
+            options: {
+                footnotes: "An example footnote",
+                passageText:
+                    "{{For reasons that are not entirely clear, when animals make their way to isolated islands [[1]], they tend to evolve relatively quickly toward an outsized or pint-sized version of their mainland counterpart.}} \n\n{{Perhaps the most famous example of an island giant—and, sadly, of species extinction—is the dodo, once found on the Indian Ocean island of Mauritius.}} {{When the dodo's ancestor (thought to be a migratory pigeon) settled on this island with abundant food, no competition from terrestrial mammals, and no predators, it could survive without flying, and thus was freed from the energetic and size constraints of flight.}} {{New Zealand also had avian giants, now extinct, including the flightless moa, an ostrich-like bird, and Haast's eagle (_Harpagornis moorei_), which had a wingspan up to 3 meters.}} {{Though Haast's eagle could fly—and presumably used its wings to {{launch}} brutal attacks on the hapless moa—its body mass (10–14 kilograms) pushed the limits for self-propelled flight.}}\n\n{{As extreme evolutionary examples, these island birds can offer insights into the forces and events shaping evolutionary change.}} In a new study, Michael Bunce et al. compared ancient mitochondrial DNA extracted from Haast's eagle bones with DNA sequences of 16 living eagle species to better characterize the evolutionary history of the extinct giant raptor. {{Their results suggest the extinct raptor underwent a rapid evolutionary transformation that belies its kinship to some of the world's smallest eagle species.}}\n\nThe authors characterized the rates of sequence evolution within mitochondrial DNA to establish the evolutionary relationships between the different eagle species. Their analysis places Haast's eagle in the same evolutionary lineage as a group of small eagle species in the genus _Hieraaetus_. Surprisingly, the genetic distance separating the giant eagle and its more diminutive _Hieraaetus_ cousins from their last {{common}} ancestor is relatively small.\n",
+                passageTitle: "Passage 1",
+                showLineNumbers: true,
+                static: false,
+            },
+            static: false,
+            type: "passage",
+            version: {
+                major: 0,
+                minor: 0,
+            },
+        },
+    },
+};

package/src/widgets/__testdata__/radio_testdata.js

@@ -194,6 +194,58 @@ export const multiChoiceQuestion: PerseusRenderer = {
     },
 };
 
+export const multiChoiceQuestionSimple: PerseusRenderer = {
+    content: "What are some ways to say hello?\n\n[[\u2603 radio 1]]",
+    images: {},
+    widgets: {
+        "radio 1": ({
+            graded: true,
+            version: {
+                major: 1,
+                minor: 0,
+            },
+            static: false,
+            type: "radio",
+            options: {
+                onePerLine: true,
+                displayCount: null,
+                choices: [
+                    {
+                        content: "Hola",
+                        isNoneOfTheAbove: false,
+                        correct: true,
+                    },
+                    {
+                        content: "Hey",
+                        isNoneOfTheAbove: false,
+                        correct: true,
+                    },
+                    {
+                        content: "Hi",
+                        isNoneOfTheAbove: false,
+                        correct: true,
+                    },
+                    {
+                        content: "Goodbye",
+                        isNoneOfTheAbove: false,
+                        correct: false,
+                    },
+                    {
+                        content: "None of these",
+                        isNoneOfTheAbove: true,
+                        correct: false,
+                    },
+                ],
+                hasNoneOfTheAbove: true,
+                multipleSelect: true,
+                randomize: false,
+                deselectEnabled: false,
+            },
+            alignment: "default",
+        }: RadioWidget),
+    },
+};
+
 export const multiChoiceQuestionAndAnswer: [
     PerseusRenderer,
     $ReadOnlyArray<number>,

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

@@ -23,11 +23,19 @@ exports[`Dropdown widget should snapshot when opened: dropdown open 1`] = `
               <div
                 class="default_xu2jcg-o_O-menuWrapper_wvrnr4"
               >
+                <span
+                  aria-atomic="true"
+                  aria-live="polite"
+                  aria-relevant="additions text"
+                  class="srOnly_19bpjuy"
+                  data-test-id="dropdown-live-region"
+                >
+                  3 items
+                </span>
                 <button
                   aria-expanded="true"
                   aria-haspopup="listbox"
                   class="button_vr44p2-o_O-shared_u51dsh-o_O-default_kjzwx1-o_O-focus_1qpi544"
-                  tabindex="0"
                   type="button"
                 >
                   <span
@@ -94,11 +102,17 @@ exports[`Dropdown widget should snapshot: initial render 1`] = `
               <div
                 class="default_xu2jcg-o_O-menuWrapper_wvrnr4"
               >
+                <span
+                  aria-atomic="true"
+                  aria-live="polite"
+                  aria-relevant="additions text"
+                  class="srOnly_19bpjuy"
+                  data-test-id="dropdown-live-region"
+                />
                 <button
                   aria-expanded="false"
                   aria-haspopup="listbox"
                   class="button_vr44p2-o_O-shared_u51dsh-o_O-default_kjzwx1"
-                  tabindex="0"
                   type="button"
                 >
                   <span

package/src/widgets/__tests__/__snapshots__/passage-ref_test.jsx.snap

@@ -55,13 +55,13 @@ exports[`passage-ref widget should render with invalid reference 1`] = `
                         <div>
                           <div>
                             <div
-                              class="measurer_vtwrnx"
+                              aria-hidden="true"
+                              class="measurer_225hir"
                             >
-                              <div>
-                                <div
-                                  class="paragraph"
-                                />
-                                <div />
+                              <div
+                                class="paragraph"
+                              >
+                                Line Height Measurement
                               </div>
                             </div>
                             <div
@@ -200,13 +200,13 @@ exports[`passage-ref widget should render with multi-line reference 1`] = `
                         <div>
                           <div>
                             <div
-                              class="measurer_vtwrnx"
+                              aria-hidden="true"
+                              class="measurer_225hir"
                             >
-                              <div>
-                                <div
-                                  class="paragraph"
-                                />
-                                <div />
+                              <div
+                                class="paragraph"
+                              >
+                                Line Height Measurement
                               </div>
                             </div>
                             <div
@@ -350,13 +350,13 @@ exports[`passage-ref widget should render with single-line reference 1`] = `
                         <div>
                           <div>
                             <div
-                              class="measurer_vtwrnx"
+                              aria-hidden="true"
+                              class="measurer_225hir"
                             >
-                              <div>
-                                <div
-                                  class="paragraph"
-                                />
-                                <div />
+                              <div
+                                class="paragraph"
+                              >
+                                Line Height Measurement
                               </div>
                             </div>
                             <div