Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Conversation

mark-fitzgerald
Copy link
Contributor

@mark-fitzgerald mark-fitzgerald commented Nov 20, 2024

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
    Storybook - 1 Format Option
  5. Using the keyboard, tab to the close icon in the top right of the preview area
    Storybook - Close Icon
  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
    VoiceOver - 1 Format Option
  9. Multiple format options should be read with an "or" conjunction in the phrase
    VoiceOver - 3 Format Option

Affected behavior:

Before

VoiceOver - Before

After

VoiceOver - 1 Format Option

@mark-fitzgerald mark-fitzgerald self-assigned this Nov 20, 2024
Copy link
Contributor

github-actions bot commented Nov 20, 2024

npm Snapshot: Published

Good news!! We've packaged up the latest commit from this PR (eb460ef) 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

Copy link
Contributor

github-actions bot commented Nov 20, 2024

Size Change: +224 B (+0.02%)

Total Size: 1.29 MB

Filename Size Change
packages/perseus/dist/es/index.js 424 kB +224 B (+0.05%)
ℹ️ View Unchanged
Filename Size
packages/kas/dist/es/index.js 39 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.9 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.7 kB
packages/pure-markdown/dist/es/index.js 3.66 kB
packages/simple-markdown/dist/es/index.js 12.5 kB

compressed-size-action

@mark-fitzgerald mark-fitzgerald requested review from SonicScrewdriver and a team November 20, 2024 18:50
@mark-fitzgerald mark-fitzgerald marked this pull request as ready for review November 20, 2024 18:50
@khan-actions-bot
Copy link
Contributor

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
Copy link
Contributor

SonicScrewdriver commented Nov 20, 2024

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)

Copy link
Contributor

@SonicScrewdriver SonicScrewdriver left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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. :)

@mark-fitzgerald
Copy link
Contributor Author

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)

Research findings: This is expected behavior for older versions of VoiceOver. Newer versions of VoiceOver, and other screen readers automatically read the aria-describedby text.

@mark-fitzgerald mark-fitzgerald merged commit ef819ea into main Dec 3, 2024
9 checks passed
@mark-fitzgerald mark-fitzgerald deleted the LEMS-2458-associate-format-options-tooltip-with-input-for-screen-readers branch December 3, 2024 21:52
mark-fitzgerald pushed a commit that referenced this pull request Dec 5, 2024
This PR was opened by the [Changesets release](https://github.com/changesets/action) GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to main, this PR will be updated.

# Releases
## @khanacademy/[email protected]

### Minor Changes

-   [#1901](#1901) [`051c50cf7`](051c50c) Thanks [@Myranae](https://github.com/Myranae)! - Introduces a validation function for the number line widget (extracted from the scoring function).


-   [#1936](#1936) [`d05272661`](d052726) Thanks [@jeremywiebe](https://github.com/jeremywiebe)! - Changes the PerseusWidgetsMap to be extensible so that widgets can be registered outside of Perseus and still have full type safety.


-   [#1832](#1832) [`e3062b3c8`](e3062b3) Thanks [@mark-fitzgerald](https://github.com/mark-fitzgerald)! - [Numeric Input] - Update the UI to match Expression widget

### Patch Changes

-   [#1937](#1937) [`3cdabf1a3`](3cdabf1) Thanks [@jeremywiebe](https://github.com/jeremywiebe)! - TypeScript fixes


-   [#1948](#1948) [`e21a3a39b`](e21a3a3) Thanks [@jeremywiebe](https://github.com/jeremywiebe)! - Refactor internally used object mapping utilities to use ES6 exports


-   [#1938](#1938) [`5e8d8468b`](5e8d846) Thanks [@jeremywiebe](https://github.com/jeremywiebe)! - Type fixes


-   [#1942](#1942) [`1d2b4e7bf`](1d2b4e7) Thanks [@SonicScrewdriver](https://github.com/SonicScrewdriver)! - Ensure that zoomed-in images retain alt text


-   [#1861](#1861) [`763a4ba38`](763a4ba) Thanks [@mark-fitzgerald](https://github.com/mark-fitzgerald)! - [Numeric Input] - Show format options as a list


-   [#1947](#1947) [`b8926e38a`](b8926e3) Thanks [@jeremywiebe](https://github.com/jeremywiebe)! - Minor refactoring of ServerItemRenderer's componentDidUpdate to reduce duplication


-   [#1946](#1946) [`f35512786`](f355127) Thanks [@jeremywiebe](https://github.com/jeremywiebe)! - Refactor scoring for `group` widget to follow the same pattern as all other widgets


-   [#1891](#1891) [`ef819ea95`](ef819ea) Thanks [@mark-fitzgerald](https://github.com/mark-fitzgerald)! - [Numeric Input] - Associate format options tooltip content with input field for assistive technologies


-   [#1945](#1945) [`e69ca3146`](e69ca31) Thanks [@nishasy](https://github.com/nishasy)! - Add global styles to reflect prod styling


-   [#1923](#1923) [`be8c06c75`](be8c06c) Thanks [@benchristel](https://github.com/benchristel)! - Internal: convert backgroundImage dimensions to numbers during parsing.


-   [#1934](#1934) [`129adebef`](129adeb) Thanks [@jeremywiebe](https://github.com/jeremywiebe)! - Improve comments on some Perseus types


-   [#1924](#1924) [`2d89ef87d`](2d89ef8) Thanks [@benchristel](https://github.com/benchristel)! - Internal: add and pass regression tests for PerseusItem parser's handling of legacy data

## @khanacademy/[email protected]

### Patch Changes

-   [#1938](#1938) [`5e8d8468b`](5e8d846) Thanks [@jeremywiebe](https://github.com/jeremywiebe)! - Type fixes


-   [#1937](#1937) [`3cdabf1a3`](3cdabf1) Thanks [@jeremywiebe](https://github.com/jeremywiebe)! - Ensure links opening to style guide (Google Docs) set `rel="noreferrer"`


-   [#1946](#1946) [`f35512786`](f355127) Thanks [@jeremywiebe](https://github.com/jeremywiebe)! - Remove debugging call in GraphSettings component

-   Updated dependencies \[[`3cdabf1a3`](3cdabf1), [`e21a3a39b`](e21a3a3), [`5e8d8468b`](5e8d846), [`1d2b4e7bf`](1d2b4e7), [`763a4ba38`](763a4ba), [`b8926e38a`](b8926e3), [`f35512786`](f355127), [`ef819ea95`](ef819ea), [`e69ca3146`](e69ca31), [`be8c06c75`](be8c06c), [`051c50cf7`](051c50c), [`129adebef`](129adeb), [`d05272661`](d052726), [`2d89ef87d`](2d89ef8), [`e3062b3c8`](e3062b3)]:
    -   @khanacademy/[email protected]

Author: khan-actions-bot

Reviewers: mark-fitzgerald

Required Reviewers:

Approved By: mark-fitzgerald

Checks: ⏭️  Publish npm snapshot, ✅ Check builds for changes in size (ubuntu-latest, 20.x), ✅ Lint, Typecheck, Format, and Test (ubuntu-latest, 20.x), ✅ Cypress (ubuntu-latest, 20.x), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ✅ gerald

Pull Request URL: #1944
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants