Skip to content

[SR] Allow using control + shift + arrow keys for NVDA #2257

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

Merged
merged 15 commits into from
Mar 19, 2025

Conversation

nishasy
Copy link
Contributor

@nishasy nishasy commented Feb 20, 2025

Summary:

NVDA takes control of inputs in its default mode, so users can't use just the arrow keys to move the interactive elements on the graph. We want to allow using modifier key + control + shift + arrow keys to move interactive elements on the graph.

Note: This already works with the modifier key + shift + arrow keys (no control), but holding down shift makes it so that the amount the element moves is 4x more than without shift.

Note 2: When using NVDA, you can get the same keyboard experience as not using a screen reader (i.e. move the points with arrow keys only) if you go into focus mode (NVDA key + space bar).

Implemented:

  • Added support for the control key press
    • stops shift from increasing the move difference if control is held down
  • Added "modifier key + control + shift +" to the instruction strings

Issue: https://khanacademy.atlassian.net/browse/LEMS-2874

Test plan:

yarn jest packages/perseus/src/widgets/interactive-graphs/interactive-graph.test.tsx

Storybook
http://localhost:6006/?path=/docs/perseuseditor-widgets-interactive-graph--docs

…eys for NVDA

todo

Issue: none

Test plan:
todo
@nishasy nishasy self-assigned this Feb 20, 2025
@nishasy nishasy changed the title DRAFT!!! DO NOT REVIEW - [SR] Allow using control + shift + arrow keys for NVDA TEST!!! DO NOT REVIEW - [SR] Allow using control + shift + arrow keys for NVDA Feb 20, 2025
@nishasy nishasy marked this pull request as ready for review February 20, 2025 00:20
Copy link
Contributor

github-actions bot commented Feb 20, 2025

npm Snapshot: Published

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

Example:

pnpm add @khanacademy/perseus@PR2257

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

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

Copy link
Contributor

github-actions bot commented Feb 20, 2025

Size Change: +15 B (0%)

Total Size: 735 kB

Filename Size Change
packages/perseus/dist/es/index.js 370 kB +7 B (0%)
packages/perseus/dist/es/strings.js 6.74 kB +8 B (+0.12%)
ℹ️ View Unchanged
Filename Size
packages/kas/dist/es/index.js 39.7 kB
packages/keypad-context/dist/es/index.js 760 B
packages/kmath/dist/es/index.js 11.1 kB
packages/math-input/dist/es/index.js 77.5 kB
packages/math-input/dist/es/strings.js 1.79 kB
packages/perseus-core/dist/es/index.js 31.9 kB
packages/perseus-editor/dist/es/index.js 136 kB
packages/perseus-linter/dist/es/index.js 22.8 kB
packages/perseus-score/dist/es/index.js 20.6 kB
packages/pure-markdown/dist/es/index.js 4.14 kB
packages/simple-markdown/dist/es/index.js 13.1 kB

compressed-size-action

@nishasy nishasy marked this pull request as draft February 21, 2025 00:06
@nishasy nishasy changed the title TEST!!! DO NOT REVIEW - [SR] Allow using control + shift + arrow keys for NVDA [SR] Allow using control + shift + arrow keys for NVDA Feb 25, 2025
@catandthemachines
Copy link
Member

Question, does this solution still work for screen reader users who have different modifier keys set or Voiceover? 🤔

@nishasy nishasy marked this pull request as ready for review March 18, 2025 18:04
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! Thank you :)

@nishasy nishasy merged commit 1e67022 into main Mar 19, 2025
8 checks passed
@nishasy nishasy deleted the control-shift-arrow-keys branch March 19, 2025 21:04
nishasy added a commit that referenced this pull request Mar 19, 2025
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]

### Patch Changes

- [#2309](#2309)
[`7be7a42d6`](7be7a42)
Thanks [@nishasy](https://github.com/nishasy)! - [SR] Update graph
elements so their aria-describedby is read in non-Chrome browsers


- [#2257](#2257)
[`1e67022c9`](1e67022)
Thanks [@nishasy](https://github.com/nishasy)! - [SR] Allow using
control + shift + arrow keys for NVDA

## @khanacademy/[email protected]

### Patch Changes

- Updated dependencies
\[[`7be7a42d6`](7be7a42),
[`1e67022c9`](1e67022)]:
    -   @khanacademy/[email protected]
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