[Numeric Input] - Link tooltip content to input field for assistive technologies

[mark-fitzgerald]

Summary:

Currently, the format options tooltip for the input field is only available to sighted users. People using assistive technologies (like braille or screen readers) are unaware of any formatting options for their answers. This change will add an element adjacent to the input field that includes the content of the tooltip, and an association between the two so that assistive technologies can make use of the format options.

Issue: LEMS-2458

Test plan:

1. Launch Storybook
2. Navigate to Perseus Editor => Editor => Demo
3. Add a Numeric Input widget
4. Configure the widget to have any number of format options
   
5. Using the keyboard, tab to the close icon in the top right of the preview area
   
6. Launch VoiceOver (or your preferred screen reader)
7. Tab to the input field in the preview
8. The screen reader should read the same content as what shows in the tooltip
   
9. Multiple format options should be read with an "or" conjunction in the phrase
   

Affected behavior:

Before

After

[github-actions]

npm Snapshot: Published

Good news!! We've packaged up the latest commit from this PR (d08b48d) and published it to npm. You
can install it using the tag PR1891.

Example:

yarn add @khanacademy/perseus@PR1891

If you are working in Khan Academy's webapp, you can run:

./dev/tools/bump_perseus_version.sh -t PR1891

[github-actions]

Size Change: +218 B (+0.02%)

Total Size: 1.29 MB

Filename	Size	Change
packages/perseus/dist/es/index.js	424 kB	+218 B (+0.05%)

ℹ️ View Unchanged

Filename	Size
packages/kas/dist/es/index.js	38.9 kB
packages/keypad-context/dist/es/index.js	760 B
packages/kmath/dist/es/index.js	4.27 kB
packages/math-input/dist/es/index.js	77.8 kB
packages/math-input/dist/es/strings.js	1.79 kB
packages/perseus-core/dist/es/index.js	1.48 kB
packages/perseus-editor/dist/es/index.js	697 kB
packages/perseus-linter/dist/es/index.js	22.2 kB
packages/perseus/dist/es/strings.js	3.57 kB
packages/pure-markdown/dist/es/index.js	3.66 kB
packages/simple-markdown/dist/es/index.js	12.4 kB

_{compressed-size-action}

[khan-actions-bot]

Gerald

Required Reviewers

• @Khan/perseus for changes to .changeset/odd-moons-remember.md, packages/perseus/src/components/input-with-examples.tsx, packages/perseus/src/components/text-input.tsx, packages/perseus/src/components/tooltip.tsx, packages/perseus/src/__tests__/__snapshots__/server-item-renderer.test.tsx.snap, packages/perseus/src/widgets/numeric-input/numeric-input.test.ts, packages/perseus/src/multi-items/__tests__/__snapshots__/multi-renderer.test.tsx.snap, packages/perseus/src/widgets/graded-group-set/__snapshots__/graded-group-set-jipt.test.ts.snap, packages/perseus/src/widgets/graded-group-set/__snapshots__/graded-group-set.test.ts.snap, packages/perseus/src/widgets/group/__snapshots__/group.test.tsx.snap, packages/perseus/src/widgets/numeric-input/__snapshots__/numeric-input.test.ts.snap

---

Don't want to be involved in this pull request? Comment #removeme and we won't notify you of further changes.

[SonicScrewdriver]

Some notes about weird Voice Over behaviour with my older OS:

• In Chrome and Safari, I'm have to press control + option + command + / to access a "more content menu". I then have to hit the down arrow to hear the tooltip content
• This appears to work perfectly fine on Firefox, however.

OS
Ventura 13.6

Browsers Tested

• Chrome 130.0.6723.91
• Safari Technology Preview Release 180 (Safari 17.4, WebKit 18618.1.1.2)
• Firefox Developer 131.0b9 (aarch64)

[SonicScrewdriver]

Makes sense to me, thank you for implementing this!

Considering the issues with my Voice Over seem to just be that it requires a different access method, I think we're good to go with releasing this. :)