From f17d78a99af59b30b140982ae2fc84fa00349c9a Mon Sep 17 00:00:00 2001
From: Mark Fitzgerald <markfitzgerald@markfitgeraldm3.home>
Date: Tue, 19 Nov 2024 15:54:23 -0800
Subject: [PATCH 1/3] Add 'aria-describedby' content for input field to
 reference.

---
 .../src/components/input-with-examples.tsx      | 17 +++++++++++++++--
 packages/perseus/src/components/text-input.tsx  |  2 ++
 packages/perseus/src/components/tooltip.tsx     |  1 +
 3 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/packages/perseus/src/components/input-with-examples.tsx b/packages/perseus/src/components/input-with-examples.tsx
index da253dfec3..461dfd4aa5 100644
--- a/packages/perseus/src/components/input-with-examples.tsx
+++ b/packages/perseus/src/components/input-with-examples.tsx
@@ -83,8 +83,14 @@ class InputWithExamples extends React.Component<Props, State> {
 
     _renderInput: () => any = () => {
         const id = this._getUniqueId();
+        const examplesAria = `${this.props.examples[0]}
+            ${this.props.examples.slice(1).join(", or\n")}`
+            // @ts-expect-error TS2550: Property replaceAll does not exist on type string.
+            .replaceAll("*", "")
+            .replaceAll("$", "")
+            .replaceAll("\\ ", " ")
+            .replaceAll("\\text{pi}", "pi");
         const inputProps = {
-            id: id,
             "aria-describedby": id,
             ref: "input",
             className: this._getInputClassName(),
@@ -101,7 +107,14 @@ class InputWithExamples extends React.Component<Props, State> {
             autoCorrect: "off",
             spellCheck: "false",
         };
-        return <TextInput {...inputProps} />;
+        return (
+            <>
+                <TextInput {...inputProps} />
+                <span id={id} style={{display: "none"}}>
+                    {examplesAria}
+                </span>
+            </>
+        );
     };
 
     _handleFocus: () => void = () => {
diff --git a/packages/perseus/src/components/text-input.tsx b/packages/perseus/src/components/text-input.tsx
index abcb259260..4119f260a2 100644
--- a/packages/perseus/src/components/text-input.tsx
+++ b/packages/perseus/src/components/text-input.tsx
@@ -17,6 +17,7 @@ type Props = {
     placeholder?: string;
     onKeyDown?: () => void;
     style?: StyleType;
+    "aria-describedby"?: string;
 };
 
 type DefaultProps = {
@@ -110,6 +111,7 @@ class TextInput extends React.Component<Props> {
                 value={formattedValue}
                 type="text"
                 aria-label={labelText}
+                aria-describedby={this.props["aria-describedby"]}
                 onChange={(value) => this.props.onChange(value)}
                 placeholder={placeholder}
                 onFocus={onFocus}
diff --git a/packages/perseus/src/components/tooltip.tsx b/packages/perseus/src/components/tooltip.tsx
index d5a13e13ea..4f3479cc5d 100644
--- a/packages/perseus/src/components/tooltip.tsx
+++ b/packages/perseus/src/components/tooltip.tsx
@@ -340,6 +340,7 @@ class Tooltip extends React.Component<Props, State> {
                     // eslint-disable-next-line react/no-string-refs
                     ref="tooltipContainer"
                     className="tooltipContainer"
+                    role="tooltip"
                     style={{
                         position: "absolute",
                         // height must start out undefined, not null, so that

From d08b48dd1f22c2856b662668de73f06fc8613351 Mon Sep 17 00:00:00 2001
From: Mark Fitzgerald <markfitzgerald@markfitgeraldm3.home>
Date: Tue, 19 Nov 2024 17:29:51 -0800
Subject: [PATCH 2/3] Add unit tests for ensuring that aria text is included in
 the DOM. Update snapshots

---
 .changeset/odd-moons-remember.md              |  5 +++
 .../server-item-renderer.test.tsx.snap        |  6 +++
 .../src/components/input-with-examples.tsx    | 24 ++++++----
 .../multi-renderer.test.tsx.snap              |  6 +++
 .../graded-group-set-jipt.test.ts.snap        | 18 ++++++++
 .../graded-group-set.test.ts.snap             |  6 +++
 .../group/__snapshots__/group.test.tsx.snap   | 12 +++++
 .../__snapshots__/numeric-input.test.ts.snap  | 12 +++++
 .../numeric-input/numeric-input.test.ts       | 45 +++++++++++++++++++
 9 files changed, 125 insertions(+), 9 deletions(-)
 create mode 100644 .changeset/odd-moons-remember.md

diff --git a/.changeset/odd-moons-remember.md b/.changeset/odd-moons-remember.md
new file mode 100644
index 0000000000..3ff9692b33
--- /dev/null
+++ b/.changeset/odd-moons-remember.md
@@ -0,0 +1,5 @@
+---
+"@khanacademy/perseus": patch
+---
+
+[Numeric Input] - Associate format options tooltip content with input field for assistive technologies
diff --git a/packages/perseus/src/__tests__/__snapshots__/server-item-renderer.test.tsx.snap b/packages/perseus/src/__tests__/__snapshots__/server-item-renderer.test.tsx.snap
index da69cf654c..f04b8a590f 100644
--- a/packages/perseus/src/__tests__/__snapshots__/server-item-renderer.test.tsx.snap
+++ b/packages/perseus/src/__tests__/__snapshots__/server-item-renderer.test.tsx.snap
@@ -41,6 +41,7 @@ exports[`server item renderer should snapshot: initial render 1`] = `
               <span>
                 <div>
                   <input
+                    aria-describedby="aria-for-input-with-examples-bnVtZXJpYy1pbnB1dCAx"
                     aria-invalid="false"
                     aria-label="Your answer:"
                     autocapitalize="off"
@@ -51,12 +52,17 @@ exports[`server item renderer should snapshot: initial render 1`] = `
                     type="text"
                     value=""
                   />
+                  <span
+                    id="aria-for-input-with-examples-bnVtZXJpYy1pbnB1dCAx"
+                    style="display: none;"
+                  />
                 </div>
                 <div
                   style="position: relative; height: 0px; display: none;"
                 >
                   <div
                     class="tooltipContainer"
+                    role="tooltip"
                     style="position: absolute; left: 0px;"
                   >
                     <div
diff --git a/packages/perseus/src/components/input-with-examples.tsx b/packages/perseus/src/components/input-with-examples.tsx
index 461dfd4aa5..828a28ccf9 100644
--- a/packages/perseus/src/components/input-with-examples.tsx
+++ b/packages/perseus/src/components/input-with-examples.tsx
@@ -83,15 +83,21 @@ class InputWithExamples extends React.Component<Props, State> {
 
     _renderInput: () => any = () => {
         const id = this._getUniqueId();
-        const examplesAria = `${this.props.examples[0]}
-            ${this.props.examples.slice(1).join(", or\n")}`
-            // @ts-expect-error TS2550: Property replaceAll does not exist on type string.
-            .replaceAll("*", "")
-            .replaceAll("$", "")
-            .replaceAll("\\ ", " ")
-            .replaceAll("\\text{pi}", "pi");
+        const ariaId = `aria-for-${id}`;
+        // Generate text from a known set of format options that will read well in a screen reader
+        const examplesAria =
+            this.props.examples.length === 7
+                ? ""
+                : `${this.props.examples[0]}
+                   ${this.props.examples.slice(1).join(", or\n")}`
+                      // @ts-expect-error TS2550: Property replaceAll does not exist on type string.
+                      .replaceAll("*", "")
+                      .replaceAll("$", "")
+                      .replaceAll("\\ \\text{pi}", " pi")
+                      .replaceAll("\\ ", " and ");
         const inputProps = {
-            "aria-describedby": id,
+            id: id,
+            "aria-describedby": ariaId,
             ref: "input",
             className: this._getInputClassName(),
             labelText: this.props.labelText,
@@ -110,7 +116,7 @@ class InputWithExamples extends React.Component<Props, State> {
         return (
             <>
                 <TextInput {...inputProps} />
-                <span id={id} style={{display: "none"}}>
+                <span id={ariaId} style={{display: "none"}}>
                     {examplesAria}
                 </span>
             </>
diff --git a/packages/perseus/src/multi-items/__tests__/__snapshots__/multi-renderer.test.tsx.snap b/packages/perseus/src/multi-items/__tests__/__snapshots__/multi-renderer.test.tsx.snap
index dd92cd9966..c43b8a4df1 100644
--- a/packages/perseus/src/multi-items/__tests__/__snapshots__/multi-renderer.test.tsx.snap
+++ b/packages/perseus/src/multi-items/__tests__/__snapshots__/multi-renderer.test.tsx.snap
@@ -975,6 +975,7 @@ exports[`multi-item renderer should snapshot: initial render 1`] = `
               <span>
                 <div>
                   <input
+                    aria-describedby="aria-for-input-with-examples-bnVtZXJpYy1pbnB1dCAx"
                     aria-invalid="false"
                     aria-label="Your answer:"
                     autocapitalize="off"
@@ -985,12 +986,17 @@ exports[`multi-item renderer should snapshot: initial render 1`] = `
                     type="text"
                     value=""
                   />
+                  <span
+                    id="aria-for-input-with-examples-bnVtZXJpYy1pbnB1dCAx"
+                    style="display: none;"
+                  />
                 </div>
                 <div
                   style="position: relative; height: 0px; display: none;"
                 >
                   <div
                     class="tooltipContainer"
+                    role="tooltip"
                     style="position: absolute; left: 0px;"
                   >
                     <div
diff --git a/packages/perseus/src/widgets/graded-group-set/__snapshots__/graded-group-set-jipt.test.ts.snap b/packages/perseus/src/widgets/graded-group-set/__snapshots__/graded-group-set-jipt.test.ts.snap
index b4a5c219a6..088a35e462 100644
--- a/packages/perseus/src/widgets/graded-group-set/__snapshots__/graded-group-set-jipt.test.ts.snap
+++ b/packages/perseus/src/widgets/graded-group-set/__snapshots__/graded-group-set-jipt.test.ts.snap
@@ -62,6 +62,7 @@ exports[`graded-group-set should render all graded groups 1`] = `
                       <span>
                         <div>
                           <input
+                            aria-describedby="aria-for-input-with-examples-bnVtZXJpYy1pbnB1dCAx"
                             aria-invalid="false"
                             aria-label="Your answer:"
                             autocapitalize="off"
@@ -72,12 +73,17 @@ exports[`graded-group-set should render all graded groups 1`] = `
                             type="text"
                             value=""
                           />
+                          <span
+                            id="aria-for-input-with-examples-bnVtZXJpYy1pbnB1dCAx"
+                            style="display: none;"
+                          />
                         </div>
                         <div
                           style="position: relative; height: 0px; display: none;"
                         >
                           <div
                             class="tooltipContainer"
+                            role="tooltip"
                             style="position: absolute; left: 0px;"
                           >
                             <div
@@ -289,6 +295,7 @@ exports[`graded-group-set should render all graded groups 1`] = `
                       <span>
                         <div>
                           <input
+                            aria-describedby="aria-for-input-with-examples-bnVtZXJpYy1pbnB1dCAx"
                             aria-invalid="false"
                             aria-label="Your answer:"
                             autocapitalize="off"
@@ -299,12 +306,17 @@ exports[`graded-group-set should render all graded groups 1`] = `
                             type="text"
                             value=""
                           />
+                          <span
+                            id="aria-for-input-with-examples-bnVtZXJpYy1pbnB1dCAx"
+                            style="display: none;"
+                          />
                         </div>
                         <div
                           style="position: relative; height: 0px; display: none;"
                         >
                           <div
                             class="tooltipContainer"
+                            role="tooltip"
                             style="position: absolute; left: 0px;"
                           >
                             <div
@@ -516,6 +528,7 @@ exports[`graded-group-set should render all graded groups 1`] = `
                       <span>
                         <div>
                           <input
+                            aria-describedby="aria-for-input-with-examples-bnVtZXJpYy1pbnB1dCAx"
                             aria-invalid="false"
                             aria-label="Your answer:"
                             autocapitalize="off"
@@ -526,12 +539,17 @@ exports[`graded-group-set should render all graded groups 1`] = `
                             type="text"
                             value=""
                           />
+                          <span
+                            id="aria-for-input-with-examples-bnVtZXJpYy1pbnB1dCAx"
+                            style="display: none;"
+                          />
                         </div>
                         <div
                           style="position: relative; height: 0px; display: none;"
                         >
                           <div
                             class="tooltipContainer"
+                            role="tooltip"
                             style="position: absolute; left: 0px;"
                           >
                             <div
diff --git a/packages/perseus/src/widgets/graded-group-set/__snapshots__/graded-group-set.test.ts.snap b/packages/perseus/src/widgets/graded-group-set/__snapshots__/graded-group-set.test.ts.snap
index 8db4a96dae..029787795e 100644
--- a/packages/perseus/src/widgets/graded-group-set/__snapshots__/graded-group-set.test.ts.snap
+++ b/packages/perseus/src/widgets/graded-group-set/__snapshots__/graded-group-set.test.ts.snap
@@ -128,6 +128,7 @@ exports[`graded group widget should snapshot 1`] = `
                       <span>
                         <div>
                           <input
+                            aria-describedby="aria-for-input-with-examples-bnVtZXJpYy1pbnB1dCAx"
                             aria-invalid="false"
                             aria-label="Your answer:"
                             autocapitalize="off"
@@ -138,12 +139,17 @@ exports[`graded group widget should snapshot 1`] = `
                             type="text"
                             value=""
                           />
+                          <span
+                            id="aria-for-input-with-examples-bnVtZXJpYy1pbnB1dCAx"
+                            style="display: none;"
+                          />
                         </div>
                         <div
                           style="position: relative; height: 0px; display: none;"
                         >
                           <div
                             class="tooltipContainer"
+                            role="tooltip"
                             style="position: absolute; left: 0px;"
                           >
                             <div
diff --git a/packages/perseus/src/widgets/group/__snapshots__/group.test.tsx.snap b/packages/perseus/src/widgets/group/__snapshots__/group.test.tsx.snap
index 32395581ae..796b327d9b 100644
--- a/packages/perseus/src/widgets/group/__snapshots__/group.test.tsx.snap
+++ b/packages/perseus/src/widgets/group/__snapshots__/group.test.tsx.snap
@@ -755,6 +755,7 @@ exports[`group widget should snapshot: initial render 1`] = `
                           <span>
                             <div>
                               <input
+                                aria-describedby="aria-for-input-with-examples-bnVtZXJpYy1pbnB1dCAx"
                                 aria-invalid="false"
                                 aria-label="value rounded to the nearest ten"
                                 autocapitalize="off"
@@ -765,12 +766,17 @@ exports[`group widget should snapshot: initial render 1`] = `
                                 type="text"
                                 value=""
                               />
+                              <span
+                                id="aria-for-input-with-examples-bnVtZXJpYy1pbnB1dCAx"
+                                style="display: none;"
+                              />
                             </div>
                             <div
                               style="position: relative; height: 0px; display: none;"
                             >
                               <div
                                 class="tooltipContainer"
+                                role="tooltip"
                                 style="position: absolute; left: 0px;"
                               >
                                 <div
@@ -960,6 +966,7 @@ exports[`group widget should snapshot: initial render 1`] = `
                           <span>
                             <div>
                               <input
+                                aria-describedby="aria-for-input-with-examples-bnVtZXJpYy1pbnB1dCAy"
                                 aria-invalid="false"
                                 aria-label="value rounded to the nearest hundred"
                                 autocapitalize="off"
@@ -970,12 +977,17 @@ exports[`group widget should snapshot: initial render 1`] = `
                                 type="text"
                                 value=""
                               />
+                              <span
+                                id="aria-for-input-with-examples-bnVtZXJpYy1pbnB1dCAy"
+                                style="display: none;"
+                              />
                             </div>
                             <div
                               style="position: relative; height: 0px; display: none;"
                             >
                               <div
                                 class="tooltipContainer"
+                                role="tooltip"
                                 style="position: absolute; left: 0px;"
                               >
                                 <div
diff --git a/packages/perseus/src/widgets/numeric-input/__snapshots__/numeric-input.test.ts.snap b/packages/perseus/src/widgets/numeric-input/__snapshots__/numeric-input.test.ts.snap
index eddb44a2bd..cae3a0f6fd 100644
--- a/packages/perseus/src/widgets/numeric-input/__snapshots__/numeric-input.test.ts.snap
+++ b/packages/perseus/src/widgets/numeric-input/__snapshots__/numeric-input.test.ts.snap
@@ -93,6 +93,7 @@ exports[`numeric-input widget Should render predictably: after interaction 1`] =
           <span>
             <div>
               <input
+                aria-describedby="aria-for-input-with-examples-bnVtZXJpYy1pbnB1dCAx"
                 aria-invalid="false"
                 aria-label="Your answer:"
                 autocapitalize="off"
@@ -103,12 +104,17 @@ exports[`numeric-input widget Should render predictably: after interaction 1`] =
                 type="text"
                 value="1252"
               />
+              <span
+                id="aria-for-input-with-examples-bnVtZXJpYy1pbnB1dCAx"
+                style="display: none;"
+              />
             </div>
             <div
               style="position: relative; height: 0px; display: none;"
             >
               <div
                 class="tooltipContainer"
+                role="tooltip"
                 style="position: absolute; left: 0px;"
               >
                 <div
@@ -295,6 +301,7 @@ exports[`numeric-input widget Should render predictably: first render 1`] = `
           <span>
             <div>
               <input
+                aria-describedby="aria-for-input-with-examples-bnVtZXJpYy1pbnB1dCAx"
                 aria-invalid="false"
                 aria-label="Your answer:"
                 autocapitalize="off"
@@ -305,12 +312,17 @@ exports[`numeric-input widget Should render predictably: first render 1`] = `
                 type="text"
                 value=""
               />
+              <span
+                id="aria-for-input-with-examples-bnVtZXJpYy1pbnB1dCAx"
+                style="display: none;"
+              />
             </div>
             <div
               style="position: relative; height: 0px; display: none;"
             >
               <div
                 class="tooltipContainer"
+                role="tooltip"
                 style="position: absolute; left: 0px;"
               >
                 <div
diff --git a/packages/perseus/src/widgets/numeric-input/numeric-input.test.ts b/packages/perseus/src/widgets/numeric-input/numeric-input.test.ts
index 2740d841d3..458689e5b6 100644
--- a/packages/perseus/src/widgets/numeric-input/numeric-input.test.ts
+++ b/packages/perseus/src/widgets/numeric-input/numeric-input.test.ts
@@ -75,6 +75,51 @@ describe("numeric-input widget", () => {
         // Assert
         expect(renderer).toHaveBeenAnsweredIncorrectly();
     });
+
+    it("Should render an element with format options as text for use by assistive technologies", async () => {
+        // Arrange - Fractions
+        const questionWithFormatOptions = JSON.parse(JSON.stringify(question1));
+        questionWithFormatOptions.widgets[
+            "numeric-input 1"
+        ].options.answers[0].answerForms = ["proper", "improper", "mixed"];
+
+        // Act
+        const fractionsContainer = renderQuestion(
+            questionWithFormatOptions,
+        ).container;
+        // eslint-disable-next-line testing-library/no-node-access
+        const fractionTextContainer = fractionsContainer.querySelector(
+            "[id*='aria-for-input-with-examples-']",
+        );
+
+        // Assert
+        expect(fractionTextContainer).toHaveTextContent(
+            "a simplified proper fraction",
+        );
+        expect(fractionTextContainer).toHaveTextContent(
+            "a simplified improper fraction",
+        );
+        expect(fractionTextContainer).toHaveTextContent("a mixed number");
+
+        // Arrange - Non-Fractions
+        questionWithFormatOptions.widgets[
+            "numeric-input 1"
+        ].options.answers[0].answerForms = ["integer", "decimal", "pi"];
+
+        // Act
+        const othersContainer = renderQuestion(
+            questionWithFormatOptions,
+        ).container;
+        // eslint-disable-next-line testing-library/no-node-access
+        const othersTextContainer = othersContainer.querySelector(
+            "[id*='aria-for-input-with-examples-']",
+        );
+
+        // Assert
+        expect(othersTextContainer).toHaveTextContent("an integer");
+        expect(othersTextContainer).toHaveTextContent("an exact decimal");
+        expect(othersTextContainer).toHaveTextContent("a multiple of pi");
+    });
 });
 
 describe("static function getOneCorrectAnswerFromRubric", () => {

From eb460efa1bd54006d139c5138751d73a8b6e029a Mon Sep 17 00:00:00 2001
From: Mark Fitzgerald <markfitzgerald@markfitgeraldm3.home>
Date: Tue, 3 Dec 2024 13:13:46 -0800
Subject: [PATCH 3/3] Update snapshots after merging in main.

---
 .../server-item-renderer.test.tsx.snap        | 13 +++++++++---
 .../multi-renderer.test.tsx.snap              | 13 +++++++++---
 .../__snapshots__/numeric-input.test.ts.snap  | 20 +++++++++++++++++++
 3 files changed, 40 insertions(+), 6 deletions(-)

diff --git a/packages/perseus/src/__tests__/__snapshots__/server-item-renderer.test.tsx.snap b/packages/perseus/src/__tests__/__snapshots__/server-item-renderer.test.tsx.snap
index 0deb7edd41..a1c1828e6c 100644
--- a/packages/perseus/src/__tests__/__snapshots__/server-item-renderer.test.tsx.snap
+++ b/packages/perseus/src/__tests__/__snapshots__/server-item-renderer.test.tsx.snap
@@ -41,7 +41,7 @@ exports[`server item renderer should snapshot: initial render 1`] = `
               <span>
                 <div>
                   <input
-                    aria-describedby="aria-for-input-with-examples-bnVtZXJpYy1pbnB1dCAx"
+                    aria-describedby="aria-for-input-with-examples-aW5wdXQtbnVtYmVyIDE"
                     aria-invalid="false"
                     autocapitalize="off"
                     autocomplete="off"
@@ -52,9 +52,16 @@ exports[`server item renderer should snapshot: initial render 1`] = `
                     value=""
                   />
                   <span
-                    id="aria-for-input-with-examples-bnVtZXJpYy1pbnB1dCAx"
+                    id="aria-for-input-with-examples-aW5wdXQtbnVtYmVyIDE"
                     style="display: none;"
-                  />
+                  >
+                    Your answer should be 
+                   an integer, like 6, or
+an exact decimal, like 0.75, or
+a simplified proper fraction, like 3/5, or
+a simplified improper fraction, like 7/4, or
+a mixed number, like 1 and 3/4
+                  </span>
                 </div>
                 <div
                   style="position: relative; height: 0px; display: none;"
diff --git a/packages/perseus/src/multi-items/__tests__/__snapshots__/multi-renderer.test.tsx.snap b/packages/perseus/src/multi-items/__tests__/__snapshots__/multi-renderer.test.tsx.snap
index d9f6724dd8..286f99fa5e 100644
--- a/packages/perseus/src/multi-items/__tests__/__snapshots__/multi-renderer.test.tsx.snap
+++ b/packages/perseus/src/multi-items/__tests__/__snapshots__/multi-renderer.test.tsx.snap
@@ -975,7 +975,7 @@ exports[`multi-item renderer should snapshot: initial render 1`] = `
               <span>
                 <div>
                   <input
-                    aria-describedby="aria-for-input-with-examples-bnVtZXJpYy1pbnB1dCAx"
+                    aria-describedby="aria-for-input-with-examples-aW5wdXQtbnVtYmVyIDE"
                     aria-invalid="false"
                     autocapitalize="off"
                     autocomplete="off"
@@ -986,9 +986,16 @@ exports[`multi-item renderer should snapshot: initial render 1`] = `
                     value=""
                   />
                   <span
-                    id="aria-for-input-with-examples-bnVtZXJpYy1pbnB1dCAx"
+                    id="aria-for-input-with-examples-aW5wdXQtbnVtYmVyIDE"
                     style="display: none;"
-                  />
+                  >
+                    Your answer should be 
+                   an integer, like 6, or
+an exact decimal, like 0.75, or
+a simplified proper fraction, like 3/5, or
+a simplified improper fraction, like 7/4, or
+a mixed number, like 1 and 3/4
+                  </span>
                 </div>
                 <div
                   style="position: relative; height: 0px; display: none;"
diff --git a/packages/perseus/src/widgets/numeric-input/__snapshots__/numeric-input.test.ts.snap b/packages/perseus/src/widgets/numeric-input/__snapshots__/numeric-input.test.ts.snap
index 23ae07b8ee..7eeae17bd6 100644
--- a/packages/perseus/src/widgets/numeric-input/__snapshots__/numeric-input.test.ts.snap
+++ b/packages/perseus/src/widgets/numeric-input/__snapshots__/numeric-input.test.ts.snap
@@ -525,6 +525,7 @@ exports[`numeric-input widget Should render tooltip as list when multiple format
           <span>
             <div>
               <input
+                aria-describedby="aria-for-input-with-examples-bnVtZXJpYy1pbnB1dCAx"
                 aria-invalid="false"
                 aria-label="Your answer:"
                 autocapitalize="off"
@@ -535,12 +536,22 @@ exports[`numeric-input widget Should render tooltip as list when multiple format
                 type="text"
                 value=""
               />
+              <span
+                id="aria-for-input-with-examples-bnVtZXJpYy1pbnB1dCAx"
+                style="display: none;"
+              >
+                Your answer should be 
+                   a simplified proper fraction, like 3/5, or
+a simplified improper fraction, like 7/4, or
+a mixed number, like 1 and 3/4
+              </span>
             </div>
             <div
               style="position: relative; height: 0px; display: none;"
             >
               <div
                 class="tooltipContainer"
+                role="tooltip"
                 style="position: absolute; left: 0px;"
               >
                 <div
@@ -677,6 +688,7 @@ exports[`numeric-input widget Should render tooltip when format option is given:
           <span>
             <div>
               <input
+                aria-describedby="aria-for-input-with-examples-bnVtZXJpYy1pbnB1dCAx"
                 aria-invalid="false"
                 aria-label="Your answer:"
                 autocapitalize="off"
@@ -687,12 +699,20 @@ exports[`numeric-input widget Should render tooltip when format option is given:
                 type="text"
                 value=""
               />
+              <span
+                id="aria-for-input-with-examples-bnVtZXJpYy1pbnB1dCAx"
+                style="display: none;"
+              >
+                Your answer should be 
+                   a simplified proper fraction, like 3/5
+              </span>
             </div>
             <div
               style="position: relative; height: 0px; display: none;"
             >
               <div
                 class="tooltipContainer"
+                role="tooltip"
                 style="position: absolute; left: 0px;"
               >
                 <div