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

## 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

Author: nishasy

Reviewers: SonicScrewdriver, mark-fitzgerald, catandthemachines

Required Reviewers:

Approved By: SonicScrewdriver

Checks: ✅ 8 checks were successful

Pull Request URL: #2257

Author: nishasy

.changeset/four-bulldogs-cheat.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/perseus": patch
+---
+
+[SR] Allow using control + shift + arrow keys for NVDA

packages/perseus/src/strings.ts

@@ -690,9 +690,9 @@ export const strings = {
     // been finalized. Remove this comment after the tickets have been
     // created.
     srGraphInstructions:
-        "Use the Tab key to move through the interactive elements in the graph. When an interactive element has focus, use the Arrow keys to move it.",
+        "Use the Tab key to move through the interactive elements in the graph. When an interactive element has focus, use Control + Shift + Arrows to move it.",
     srUnlimitedGraphInstructions:
-        "Press Shift + Enter to interact with the graph. Use the Tab key to move through the interactive elements in the graph and access the graph Action Bar. When an interactive element has focus, use the Arrow keys to move it or use the Delete key to remove it from the graph. Use the buttons in the Action Bar to add or adjust elements within the graph.",
+        "Press Shift + Enter to interact with the graph. Use the Tab key to move through the interactive elements in the graph and access the graph Action Bar. When an interactive element has focus, use Control + Shift + Arrows to move it or use the Delete key to remove it from the graph. Use the buttons in the Action Bar to add or adjust elements within the graph.",
     xAxis: "X-axis",
     yAxis: "Y-axis",
     srPointAtCoordinates: "Point %(num)s at %(x)s comma %(y)s.",
@@ -970,9 +970,9 @@ export const mockStrings: PerseusStrings = {
 
     // The following strings are used for interactive graph SR descriptions.
     srGraphInstructions:
-        "Use the Tab key to move through the interactive elements in the graph. When an interactive element has focus, use the Arrow keys to move it.",
+        "Use the Tab key to move through the interactive elements in the graph. When an interactive element has focus, use Control + Shift + Arrows to move it.",
     srUnlimitedGraphInstructions:
-        "Press Shift + Enter to interact with the graph. Use the Tab key to move through the interactive elements in the graph and access the graph Action Bar. When an interactive element has focus, use the Arrow keys to move it or use the Delete key to remove it from the graph. Use the buttons in the Action Bar to add or adjust elements within the graph.",
+        "Press Shift + Enter to interact with the graph. Use the Tab key to move through the interactive elements in the graph and access the graph Action Bar. When an interactive element has focus, use Control + Shift + Arrows to move it or use the Delete key to remove it from the graph. Use the buttons in the Action Bar to add or adjust elements within the graph.",
     xAxis: "X-axis",
     yAxis: "Y-axis",
     graphKeyboardPrompt: "Press Shift + Enter to interact with the graph",

packages/perseus/src/widgets/interactive-graphs/__snapshots__/interactive-graph.test.tsx.snap

@@ -1118,7 +1118,7 @@ exports[`Interactive Graph question Should render predictably: after interaction
                 id="instructions-:r2:"
                 tabindex="-1"
               >
-                Use the Tab key to move through the interactive elements in the graph. When an interactive element has focus, use the Arrow keys to move it.
+                Use the Tab key to move through the interactive elements in the graph. When an interactive element has focus, use Control + Shift + Arrows to move it.
               </div>
               <div
                 class="default_xu2jcg-o_O-inlineStyles_16155wj"
@@ -1559,7 +1559,7 @@ exports[`Interactive Graph question Should render predictably: after interaction
                 id="instructions-:ra:"
                 tabindex="-1"
               >
-                Use the Tab key to move through the interactive elements in the graph. When an interactive element has focus, use the Arrow keys to move it.
+                Use the Tab key to move through the interactive elements in the graph. When an interactive element has focus, use Control + Shift + Arrows to move it.
               </div>
               <div
                 class="default_xu2jcg-o_O-inlineStyles_16155wj"
@@ -2006,7 +2006,7 @@ exports[`Interactive Graph question Should render predictably: after interaction
                 id="instructions-:rh:"
                 tabindex="-1"
               >
-                Press Shift + Enter to interact with the graph. Use the Tab key to move through the interactive elements in the graph and access the graph Action Bar. When an interactive element has focus, use the Arrow keys to move it or use the Delete key to remove it from the graph. Use the buttons in the Action Bar to add or adjust elements within the graph.
+                Press Shift + Enter to interact with the graph. Use the Tab key to move through the interactive elements in the graph and access the graph Action Bar. When an interactive element has focus, use Control + Shift + Arrows to move it or use the Delete key to remove it from the graph. Use the buttons in the Action Bar to add or adjust elements within the graph.
               </div>
               <div
                 class="default_xu2jcg-o_O-inlineStyles_16155wj"
@@ -2258,7 +2258,7 @@ exports[`Interactive Graph question Should render predictably: after interaction
                 id="instructions-:rm:"
                 tabindex="-1"
               >
-                Press Shift + Enter to interact with the graph. Use the Tab key to move through the interactive elements in the graph and access the graph Action Bar. When an interactive element has focus, use the Arrow keys to move it or use the Delete key to remove it from the graph. Use the buttons in the Action Bar to add or adjust elements within the graph.
+                Press Shift + Enter to interact with the graph. Use the Tab key to move through the interactive elements in the graph and access the graph Action Bar. When an interactive element has focus, use Control + Shift + Arrows to move it or use the Delete key to remove it from the graph. Use the buttons in the Action Bar to add or adjust elements within the graph.
               </div>
               <div
                 class="default_xu2jcg-o_O-inlineStyles_16155wj"
@@ -2502,7 +2502,7 @@ exports[`Interactive Graph question Should render predictably: first render 1`]
                 id="instructions-:r2:"
                 tabindex="-1"
               >
-                Use the Tab key to move through the interactive elements in the graph. When an interactive element has focus, use the Arrow keys to move it.
+                Use the Tab key to move through the interactive elements in the graph. When an interactive element has focus, use Control + Shift + Arrows to move it.
               </div>
               <div
                 class="default_xu2jcg-o_O-inlineStyles_16155wj"
@@ -2943,7 +2943,7 @@ exports[`Interactive Graph question Should render predictably: first render 2`]
                 id="instructions-:ra:"
                 tabindex="-1"
               >
-                Use the Tab key to move through the interactive elements in the graph. When an interactive element has focus, use the Arrow keys to move it.
+                Use the Tab key to move through the interactive elements in the graph. When an interactive element has focus, use Control + Shift + Arrows to move it.
               </div>
               <div
                 class="default_xu2jcg-o_O-inlineStyles_16155wj"
@@ -3390,7 +3390,7 @@ exports[`Interactive Graph question Should render predictably: first render 3`]
                 id="instructions-:rh:"
                 tabindex="-1"
               >
-                Press Shift + Enter to interact with the graph. Use the Tab key to move through the interactive elements in the graph and access the graph Action Bar. When an interactive element has focus, use the Arrow keys to move it or use the Delete key to remove it from the graph. Use the buttons in the Action Bar to add or adjust elements within the graph.
+                Press Shift + Enter to interact with the graph. Use the Tab key to move through the interactive elements in the graph and access the graph Action Bar. When an interactive element has focus, use Control + Shift + Arrows to move it or use the Delete key to remove it from the graph. Use the buttons in the Action Bar to add or adjust elements within the graph.
               </div>
               <div
                 class="default_xu2jcg-o_O-inlineStyles_16155wj"
@@ -3642,7 +3642,7 @@ exports[`Interactive Graph question Should render predictably: first render 4`]
                 id="instructions-:rm:"
                 tabindex="-1"
               >
-                Press Shift + Enter to interact with the graph. Use the Tab key to move through the interactive elements in the graph and access the graph Action Bar. When an interactive element has focus, use the Arrow keys to move it or use the Delete key to remove it from the graph. Use the buttons in the Action Bar to add or adjust elements within the graph.
+                Press Shift + Enter to interact with the graph. Use the Tab key to move through the interactive elements in the graph and access the graph Action Bar. When an interactive element has focus, use Control + Shift + Arrows to move it or use the Delete key to remove it from the graph. Use the buttons in the Action Bar to add or adjust elements within the graph.
               </div>
               <div
                 class="default_xu2jcg-o_O-inlineStyles_16155wj"

packages/perseus/src/widgets/interactive-graphs/graphs/use-draggable.ts

@@ -104,6 +104,7 @@ export function useDraggable(args: Params): DragState {
                 const {
                     direction: yDownDirection,
                     altKey,
+                    ctrlKey,
                     metaKey,
                     shiftKey,
                 } = state;
@@ -119,7 +120,7 @@ export function useDraggable(args: Params): DragState {
                 if (altKey || metaKey) {
                     divisions = 200;
                 }
-                if (shiftKey) {
+                if (shiftKey && !ctrlKey) {
                     divisions = 10;
                 }
 

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

@@ -77,9 +77,9 @@ const updateWidgetState = (renderer: Renderer, widgetId: string, update) => {
     renderer.restoreSerializedState(state);
 };
 const commonInstructions =
-    "Use the Tab key to move through the interactive elements in the graph. When an interactive element has focus, use the Arrow keys to move it.";
+    "Use the Tab key to move through the interactive elements in the graph. When an interactive element has focus, use Control + Shift + Arrows to move it.";
 const unlimitedInstructions =
-    "Press Shift + Enter to interact with the graph. Use the Tab key to move through the interactive elements in the graph and access the graph Action Bar. When an interactive element has focus, use the Arrow keys to move it or use the Delete key to remove it from the graph. Use the buttons in the Action Bar to add or adjust elements within the graph.";
+    "Press Shift + Enter to interact with the graph. Use the Tab key to move through the interactive elements in the graph and access the graph Action Bar. When an interactive element has focus, use Control + Shift + Arrows to move it or use the Delete key to remove it from the graph. Use the buttons in the Action Bar to add or adjust elements within the graph.";
 
 const blankOptions: APIOptions = Object.freeze(ApiOptions.defaults);