Slider keyboard controls for SoundEffect field editor (#11277)

Co-authored-by: Richard Knoll <riknoll@users.noreply.github.com>

Author: microbit-robert

react-common/components/controls/DraggableGraph.tsx

@@ -16,6 +16,12 @@ export interface DraggableGraphProps extends ControlProps {
     handleStartAnimationRef?: (startAnimation: (duration: number) => void) => void;
 }
 
+const getSliderStepValue = (min: number, max: number) => {
+    const range = max - min;
+    // Assumes slider values are always integers.
+    return Math.max(1, Math.floor(range / 10));
+}
+
 export const DraggableGraph = (props: DraggableGraphProps) => {
     const {
         interpolation,
@@ -113,16 +119,37 @@ export const DraggableGraph = (props: DraggableGraphProps) => {
             };
 
             ref.onkeydown = ev => {
-                const step = (max - min) / 100;
-                if (ev.code === "ArrowDown" || ev.code === "ArrowLeft") {
-                    onPointChange(index, Math.max(min, points[index] - step));
-                    ev.stopPropagation();
-                    ev.preventDefault();
-                } else if (ev.code === "ArrowUp" || ev.code === "ArrowRight") {
-                    onPointChange(index, Math.min(max, points[index] + step));
-                    ev.stopPropagation();
+                const key = ev.key;
+                if (["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", "PageUp", "PageDown", "Home", "End"].includes(key)) {
                     ev.preventDefault();
-                } 
+                }
+                const currentValue = points[index]
+                switch(key) {
+                    case "ArrowDown":
+                    case "ArrowLeft": {
+                        return onPointChange(index, Math.max(min, currentValue - 1));
+                    }
+                    case "ArrowUp":
+                    case "ArrowRight": {
+                        return onPointChange(index, Math.min(max, currentValue + 1));
+                    }
+                    case "Home": {
+                        return onPointChange(index, min);
+                    }
+                    case "End": {
+                        return onPointChange(index, max);
+                    }
+                    case "PageDown": {
+                        const step = getSliderStepValue(min, max);
+                        const value = currentValue - step;
+                        return onPointChange(index, Math.max(min, value));
+                    }
+                    case "PageUp": {
+                        const step = getSliderStepValue(min, max);
+                        const value = currentValue + step;
+                        return onPointChange(index, Math.min(max, value));
+                    }
+                }
             }
         });
     }, [dragIndex, onPointChange])