@khanacademy/math-input 4.3.1 → 5.0.0

package/src/components/key-handlers/handle-jump-out.ts

@@ -3,7 +3,7 @@ import {CursorContext} from "../input/cursor-contexts";
 import {
     isFraction,
     isParens,
-    contextForCursor,
+    getCursorContext,
     getCursor,
 } from "../input/mathquill-helpers";
 import {mathQuillInstance} from "../input/mathquill-instance";
@@ -26,7 +26,7 @@ const KeysForJumpContext = {
  */
 function handleJumpOut(mathField: MathFieldInterface, key: Key): void {
     const cursor = getCursor(mathField);
-    const context = contextForCursor(cursor);
+    const context = getCursorContext(mathField);
 
     // Validate that the current cursor context matches the key's intent.
     if (KeysForJumpContext[context] !== key) {
@@ -43,6 +43,7 @@ function handleJumpOut(mathField: MathFieldInterface, key: Key): void {
             // Insert at the end of the parentheses, and then navigate right
             // once more to get 'beyond' the parentheses.
             cursor.insRightOf(cursor.parent.parent);
+            mathField.keystroke("Right");
             break;
 
         case CursorContext.BEFORE_FRACTION:

package/src/components/keypad/__tests__/keypad-v2-mathquill.test.tsx

@@ -65,6 +65,7 @@ function V2KeypadWithMathquill(props: Props) {
                             multiplicationDot
                             preAlgebra
                             trigonometry
+                            sendEvent={async () => {}}
                         />
                     </div>
                 }
@@ -95,26 +96,26 @@ describe("Keypad v2 with MathQuill", () => {
         // Act
 
         // a^2
-        userEvent.click(screen.getByRole("button", {name: "Extras"}));
+        userEvent.click(screen.getByRole("tab", {name: "Extras"}));
         userEvent.click(screen.getByRole("button", {name: "a"}));
-        userEvent.click(screen.getByRole("button", {name: "Operators"}));
+        userEvent.click(screen.getByRole("tab", {name: "Operators"}));
         userEvent.click(screen.getByRole("button", {name: "Square"}));
 
         // +
-        userEvent.click(screen.getByRole("button", {name: "Numbers"}));
+        userEvent.click(screen.getByRole("tab", {name: "Numbers"}));
         userEvent.click(screen.getByRole("button", {name: "Plus"}));
 
         // b^2 =
-        userEvent.click(screen.getByRole("button", {name: "Extras"}));
+        userEvent.click(screen.getByRole("tab", {name: "Extras"}));
         userEvent.click(screen.getByRole("button", {name: "b"}));
-        userEvent.click(screen.getByRole("button", {name: "Operators"}));
+        userEvent.click(screen.getByRole("tab", {name: "Operators"}));
         userEvent.click(screen.getByRole("button", {name: "Square"}));
         userEvent.click(screen.getByRole("button", {name: "Equals sign"}));
 
         // c^2
-        userEvent.click(screen.getByRole("button", {name: "Extras"}));
+        userEvent.click(screen.getByRole("tab", {name: "Extras"}));
         userEvent.click(screen.getByRole("button", {name: "c"}));
-        userEvent.click(screen.getByRole("button", {name: "Operators"}));
+        userEvent.click(screen.getByRole("tab", {name: "Operators"}));
         userEvent.click(screen.getByRole("button", {name: "Square"}));
 
         // Assert
@@ -131,26 +132,26 @@ describe("Keypad v2 with MathQuill", () => {
         // Act
 
         // c = /Square root
-        userEvent.click(screen.getByRole("button", {name: "Extras"}));
+        userEvent.click(screen.getByRole("tab", {name: "Extras"}));
         userEvent.click(screen.getByRole("button", {name: "c"}));
-        userEvent.click(screen.getByRole("button", {name: "Operators"}));
+        userEvent.click(screen.getByRole("tab", {name: "Operators"}));
         userEvent.click(screen.getByRole("button", {name: "Equals sign"}));
         userEvent.click(screen.getByRole("button", {name: "Square root"}));
 
         // a^2
-        userEvent.click(screen.getByRole("button", {name: "Extras"}));
+        userEvent.click(screen.getByRole("tab", {name: "Extras"}));
         userEvent.click(screen.getByRole("button", {name: "a"}));
-        userEvent.click(screen.getByRole("button", {name: "Operators"}));
+        userEvent.click(screen.getByRole("tab", {name: "Operators"}));
         userEvent.click(screen.getByRole("button", {name: "Square"}));
 
         // +
-        userEvent.click(screen.getByRole("button", {name: "Numbers"}));
+        userEvent.click(screen.getByRole("tab", {name: "Numbers"}));
         userEvent.click(screen.getByRole("button", {name: "Plus"}));
 
         // b^2
-        userEvent.click(screen.getByRole("button", {name: "Extras"}));
+        userEvent.click(screen.getByRole("tab", {name: "Extras"}));
         userEvent.click(screen.getByRole("button", {name: "b"}));
-        userEvent.click(screen.getByRole("button", {name: "Operators"}));
+        userEvent.click(screen.getByRole("tab", {name: "Operators"}));
         userEvent.click(screen.getByRole("button", {name: "Square"}));
 
         // Assert
@@ -170,15 +171,15 @@ describe("Keypad v2 with MathQuill", () => {
 
         // Argument is empty because mathquill generates textarea w/o label
         userEvent.type(screen.getByRole("textbox"), "a");
-        userEvent.click(screen.getByRole("button", {name: "Operators"}));
+        userEvent.click(screen.getByRole("tab", {name: "Operators"}));
         userEvent.click(screen.getByRole("button", {name: "Square"}));
 
         userEvent.type(screen.getByRole("textbox"), "+");
 
         // b^2
-        userEvent.click(screen.getByRole("button", {name: "Extras"}));
+        userEvent.click(screen.getByRole("tab", {name: "Extras"}));
         userEvent.click(screen.getByRole("button", {name: "b"}));
-        userEvent.click(screen.getByRole("button", {name: "Operators"}));
+        userEvent.click(screen.getByRole("tab", {name: "Operators"}));
         userEvent.click(screen.getByRole("button", {name: "Square"}));
         userEvent.type(screen.getByRole("textbox"), "=c^2");
 
@@ -194,33 +195,35 @@ describe("Keypad v2 with MathQuill", () => {
         );
 
         // Act
-        // Write `a^2+b^2=c^2` using the keypad
-        const buttonPressesForFormula = [
-            "Extras",
-            "a",
-            "Operators",
-            "Square",
-            "Numbers",
-            "Plus",
-            "Extras",
-            "b",
-            "Operators",
-            "Square",
-            "Equals sign",
-            "Extras",
-            "c",
-            "Operators",
-            "Square",
-        ];
-        buttonPressesForFormula.forEach((button) => {
-            userEvent.click(screen.getByRole("button", {name: button}));
-        });
+
+        // a^2
+        userEvent.click(screen.getByRole("tab", {name: "Extras"}));
+        userEvent.click(screen.getByRole("button", {name: "a"}));
+        userEvent.click(screen.getByRole("tab", {name: "Operators"}));
+        userEvent.click(screen.getByRole("button", {name: "Square"}));
+
+        // +
+        userEvent.click(screen.getByRole("tab", {name: "Numbers"}));
+        userEvent.click(screen.getByRole("button", {name: "Plus"}));
+
+        // b^2
+        userEvent.click(screen.getByRole("tab", {name: "Extras"}));
+        userEvent.click(screen.getByRole("button", {name: "b"}));
+        userEvent.click(screen.getByRole("tab", {name: "Operators"}));
+        userEvent.click(screen.getByRole("button", {name: "Square"}));
+
+        // =c^2
+        userEvent.click(screen.getByRole("button", {name: "Equals sign"}));
+        userEvent.click(screen.getByRole("tab", {name: "Extras"}));
+        userEvent.click(screen.getByRole("button", {name: "c"}));
+        userEvent.click(screen.getByRole("tab", {name: "Operators"}));
+        userEvent.click(screen.getByRole("button", {name: "Square"}));
 
         // Assert
         // make sure the formula was typed correctly
         expect(mockMathInputCallback).toHaveBeenLastCalledWith("a^2+b^2=c^2");
 
-        userEvent.click(screen.getByRole("button", {name: "Numbers"}));
+        userEvent.click(screen.getByRole("tab", {name: "Numbers"}));
         // delete: need 14 backspaces in MathQuill to delete `a^2+b^2=c^2`
         for (let i = 0; i < 14; i++) {
             userEvent.click(screen.getByRole("button", {name: "Delete"}));

package/src/components/keypad/__tests__/keypad.test.tsx

@@ -0,0 +1,42 @@
+import {render, screen} from "@testing-library/react";
+import * as React from "react";
+
+import keyConfigs from "../../../data/key-configs";
+import {CursorContext} from "../../input/cursor-contexts";
+import Keypad from "../index";
+
+const contextToKeyAria = {
+    [CursorContext.IN_PARENS]: keyConfigs.JUMP_OUT_PARENTHESES.ariaLabel,
+    [CursorContext.IN_SUPER_SCRIPT]: keyConfigs.JUMP_OUT_EXPONENT.ariaLabel,
+    [CursorContext.IN_SUB_SCRIPT]: keyConfigs.JUMP_OUT_BASE.ariaLabel,
+    [CursorContext.IN_NUMERATOR]: keyConfigs.JUMP_OUT_NUMERATOR.ariaLabel,
+    [CursorContext.IN_DENOMINATOR]: keyConfigs.JUMP_OUT_DENOMINATOR.ariaLabel,
+    [CursorContext.BEFORE_FRACTION]: keyConfigs.JUMP_INTO_NUMERATOR.ariaLabel,
+};
+
+describe("keypad", () => {
+    describe("shows navigation buttons", () => {
+        Object.entries(contextToKeyAria).forEach(([context, ariaLabel]) => {
+            it(`shows button for ${context}`, () => {
+                // Arrange
+                // Act
+                render(
+                    <Keypad
+                        onClickKey={() => {}}
+                        cursorContext={context as CursorContext}
+                        sendEvent={async () => {
+                            /* TODO: verify correct analytics event sent */
+                        }}
+                    />,
+                );
+
+                // Assert
+                expect(
+                    screen.getByRole("button", {
+                        name: ariaLabel,
+                    }),
+                );
+            });
+        });
+    });
+});

package/src/components/keypad/button-assets.tsx

@@ -706,12 +706,17 @@ export default function ButtonAsset({id}: Props): React.ReactElement {
             return (
                 <svg
                     xmlns="http://www.w3.org/2000/svg"
-                    width="20"
-                    height="20"
-                    fill="currentColor"
-                    viewBox="0 0 256 256"
+                    width="40"
+                    height="40"
+                    fill="none"
+                    viewBox="0 0 40 40"
                 >
-                    <path d="M205.66,61.64l-144,144a8,8,0,0,1-11.32-11.32l144-144a8,8,0,0,1,11.32,11.31ZM50.54,101.44a36,36,0,0,1,50.92-50.91h0a36,36,0,0,1-50.92,50.91ZM56,76A20,20,0,1,0,90.14,61.84h0A20,20,0,0,0,56,76ZM216,180a36,36,0,1,1-10.54-25.46h0A35.76,35.76,0,0,1,216,180Zm-16,0a20,20,0,1,0-5.86,14.14A19.87,19.87,0,0,0,200,180Z" />
+                    <path
+                        fill="currentColor"
+                        fillRule="evenodd"
+                        d="M24.447 11.106a1 1 0 0 1 .447 1.341l-8 16a1 1 0 1 1-1.788-.894l8-16a1 1 0 0 1 1.341-.447ZM15 13a2 2 0 1 0 0 4 2 2 0 0 0 0-4Zm-4 2a4 4 0 1 1 8 0 4 4 0 0 1-8 0Zm12 10a2 2 0 1 1 4 0 2 2 0 0 1-4 0Zm2-4a4 4 0 1 0 0 8 4 4 0 0 0 0-8Z"
+                        clipRule="evenodd"
+                    />
                 </svg>
             );
         case "PI":
@@ -821,6 +826,30 @@ export default function ButtonAsset({id}: Props): React.ReactElement {
                     />
                 </svg>
             );
+        case "JUMP_OUT_BASE":
+            return (
+                <svg
+                    width="40"
+                    height="40"
+                    viewBox="0 0 40 40"
+                    fill="none"
+                    style={{display: "block", transform: "scale(1,-1)"}}
+                    xmlns="http://www.w3.org/2000/svg"
+                >
+                    <path
+                        fillRule="evenodd"
+                        clipRule="evenodd"
+                        d="M18.2929 15.2929c.3905-.3905 1.0237-.3905 1.4142 0L26 21.5858V20c0-.5523.4477-1 1-1s1 .4477 1 1v4.003c-.0004.1345-.0273.2627-.0759.3798-.0477.1152-.1178.2234-.2105.3177a.809004.809004 0 01-.0131.0131c-.1797.1765-.4259.2856-.6975.2864H23c-.5523 0-1-.4477-1-1s.4477-1 1-1h1.5858l-6.2929-6.2929c-.3905-.3905-.3905-1.0237 0-1.4142zM31 33c-.5523 0-1-.4477-1-1V16c0-.5523.4477-1 1-1s1 .4477 1 1v16c0 .5523-.4477 1-1 1z"
+                        fill="#1865F2"
+                    />
+                    <path
+                        fillRule="evenodd"
+                        clipRule="evenodd"
+                        d="M9 9c-.55228 0-1 .44772-1 1v6c0 .5523.44772 1 1 1h6c.5523 0 1-.4477 1-1v-6c0-.55228-.4477-1-1-1H9zm5 2h-4v4h4v-4z"
+                        fill="#21242C"
+                    />
+                </svg>
+            );
         case "JUMP_INTO_NUMERATOR":
             return (
                 <svg
@@ -964,7 +993,6 @@ export default function ButtonAsset({id}: Props): React.ReactElement {
         case "DOWN":
         case "LEFT":
         case "RIGHT":
-        case "JUMP_OUT_BASE":
         case "PHI":
         case "NTHROOT3":
         case "POW":

package/src/components/keypad/index.tsx

@@ -5,6 +5,7 @@ import * as React from "react";
 
 import Key from "../../data/keys";
 import {ClickKeyCallback} from "../../types";
+import {CursorContext} from "../input/cursor-contexts";
 import Tabbar from "../tabbar/tabbar";
 import {TabbarItemType} from "../tabbar/types";
 
@@ -14,8 +15,11 @@ import NumbersPage from "./keypad-pages/numbers-page";
 import OperatorsPage from "./keypad-pages/operators-page";
 import SharedKeys from "./shared-keys";
 
+import type {SendEventFn} from "@khanacademy/perseus-core";
+
 export type Props = {
     onClickKey: ClickKeyCallback;
+    cursorContext?: CursorContext;
     trigonometry?: boolean;
     extraKeys: ReadonlyArray<Key>;
     multiplicationDot?: boolean;
@@ -24,6 +28,12 @@ export type Props = {
     logarithms?: boolean;
     basicRelations?: boolean;
     advancedRelations?: boolean;
+
+    sendEvent: SendEventFn;
+};
+
+const defaultProps = {
+    extraKeys: [],
 };
 
 function allPages(props: Props): ReadonlyArray<TabbarItemType> {
@@ -50,6 +60,8 @@ function allPages(props: Props): ReadonlyArray<TabbarItemType> {
     return pages;
 }
 
+// The main (v2) Keypad. Use this component to present an accessible, onscreen
+// keypad to learners for entering math expressions.
 export default function Keypad(props: Props) {
     const [selectedPage, setSelectedPage] =
         React.useState<TabbarItemType>("Numbers");
@@ -58,7 +70,8 @@ export default function Keypad(props: Props) {
 
     const {
         onClickKey,
-        extraKeys = [],
+        cursorContext,
+        extraKeys,
         multiplicationDot,
         divisionKey,
         preAlgebra,
@@ -76,9 +89,15 @@ export default function Keypad(props: Props) {
                     setSelectedPage(tabbarItem);
                 }}
                 style={styles.tabbar}
+                onClickClose={() => onClickKey("DISMISS")}
             />
 
-            <View style={styles.grid}>
+            <View
+                style={styles.grid}
+                role="grid"
+                tabIndex={0}
+                aria-label="Keypad"
+            >
                 {selectedPage === "Numbers" && (
                     <NumbersPage onClickKey={onClickKey} />
                 )}
@@ -99,14 +118,18 @@ export default function Keypad(props: Props) {
                 )}
                 <SharedKeys
                     onClickKey={onClickKey}
+                    cursorContext={cursorContext}
                     multiplicationDot={multiplicationDot}
                     divisionKey={divisionKey}
+                    selectedPage={selectedPage}
                 />
             </View>
         </View>
     );
 }
 
+Keypad.defaultProps = defaultProps;
+
 const styles = StyleSheet.create({
     tabbar: {
         background: Color.white,

package/src/components/keypad/keypad-mathquill.stories.tsx

@@ -3,6 +3,8 @@ import {Popover, PopoverContentCore} from "@khanacademy/wonder-blocks-popover";
 import * as React from "react";
 
 import Key from "../../data/keys";
+import {CursorContext} from "../input/cursor-contexts";
+import {getCursorContext} from "../input/mathquill-helpers";
 import {createMathField} from "../input/mathquill-instance";
 import {MathFieldInterface} from "../input/mathquill-types";
 import keyTranslator from "../key-handlers/key-translator";
@@ -16,11 +18,22 @@ export default {
 export function V2KeypadWithMathquill() {
     const mathFieldWrapperRef = React.useRef<HTMLDivElement>(null);
     const [mathField, setMathField] = React.useState<MathFieldInterface>();
+    const [cursorContext, setCursorContext] = React.useState<CursorContext>(
+        CursorContext.NONE,
+    );
 
     React.useEffect(() => {
         if (!mathField && mathFieldWrapperRef.current) {
             const mathFieldInstance = createMathField(
                 mathFieldWrapperRef.current,
+                (baseConfig) => ({
+                    ...baseConfig,
+                    handlers: {
+                        edit: (_mathField) => {
+                            setCursorContext(getCursorContext(_mathField));
+                        },
+                    },
+                }),
             );
             setMathField(mathFieldInstance);
         }
@@ -34,6 +47,7 @@ export function V2KeypadWithMathquill() {
         const mathFieldCallback = keyTranslator[key];
         if (mathFieldCallback) {
             mathFieldCallback(mathField, key);
+            setCursorContext(getCursorContext(mathField));
         } else {
             // eslint-disable-next-line no-console
             console.warn(`No translation to Mathquill for: ${key}`);
@@ -53,6 +67,7 @@ export function V2KeypadWithMathquill() {
                         <Keypad
                             extraKeys={["x", "y", "PI", "THETA"]}
                             onClickKey={handleClickKey}
+                            cursorContext={cursorContext}
                             advancedRelations
                             basicRelations
                             divisionKey
@@ -60,6 +75,10 @@ export function V2KeypadWithMathquill() {
                             multiplicationDot
                             preAlgebra
                             trigonometry
+                            sendEvent={async (event) => {
+                                // eslint-disable-next-line no-console
+                                console.log("Send Event:", event);
+                            }}
                         />
                     </PopoverContentCore>
                 }

package/src/components/keypad/keypad-pages/extras-page.tsx

@@ -10,7 +10,7 @@ type Props = {
     onClickKey: ClickKeyCallback;
 };
 
-const columns = 4;
+const columns = 3;
 
 export default function ExtrasPage(props: Props) {
     const {extraKeys, onClickKey} = props;

package/src/components/keypad/keypad-pages/numbers-page.tsx

@@ -10,26 +10,29 @@ type Props = {
 
 export default function NumbersPage(props: Props) {
     const {onClickKey} = props;
+    // These keys are arranged sequentially so that tabbing follows numerical order. This
+    // allows us to visually mimic a keypad without affecting a11y. The visual order of the
+    // keys in the keypad is determined by their coordinates, not their order in the DOM.
     return (
         <>
-            {/* Row 1 */}
+            {/* Row 4 */}
             <KeypadButton
-                keyConfig={Keys.NUM_7}
+                keyConfig={Keys.NUM_1}
                 onClickKey={onClickKey}
-                coord={[0, 0]}
+                coord={[0, 2]}
             />
             <KeypadButton
-                keyConfig={Keys.NUM_8}
+                keyConfig={Keys.NUM_2}
                 onClickKey={onClickKey}
-                coord={[1, 0]}
+                coord={[1, 2]}
             />
             <KeypadButton
-                keyConfig={Keys.NUM_9}
+                keyConfig={Keys.NUM_3}
                 onClickKey={onClickKey}
-                coord={[2, 0]}
+                coord={[2, 2]}
             />
 
-            {/* Row 2 */}
+            {/* Row 3 */}
             <KeypadButton
                 keyConfig={Keys.NUM_4}
                 onClickKey={onClickKey}
@@ -46,24 +49,24 @@ export default function NumbersPage(props: Props) {
                 coord={[2, 1]}
             />
 
-            {/* Row 3 */}
+            {/* Row 2 */}
             <KeypadButton
-                keyConfig={Keys.NUM_1}
+                keyConfig={Keys.NUM_7}
                 onClickKey={onClickKey}
-                coord={[0, 2]}
+                coord={[0, 0]}
             />
             <KeypadButton
-                keyConfig={Keys.NUM_2}
+                keyConfig={Keys.NUM_8}
                 onClickKey={onClickKey}
-                coord={[1, 2]}
+                coord={[1, 0]}
             />
             <KeypadButton
-                keyConfig={Keys.NUM_3}
+                keyConfig={Keys.NUM_9}
                 onClickKey={onClickKey}
-                coord={[2, 2]}
+                coord={[2, 0]}
             />
 
-            {/* Row 4 */}
+            {/* Row 1 */}
             <KeypadButton
                 keyConfig={Keys.NUM_0}
                 onClickKey={onClickKey}
@@ -79,6 +82,12 @@ export default function NumbersPage(props: Props) {
                 onClickKey={onClickKey}
                 coord={[2, 3]}
             />
+            <KeypadButton
+                keyConfig={Keys.PERCENT}
+                onClickKey={onClickKey}
+                coord={[3, 0]}
+                secondary
+            />
         </>
     );
 }

package/src/components/keypad/shared-keys.tsx

@@ -2,21 +2,61 @@ import * as React from "react";
 
 import Keys from "../../data/key-configs";
 import {ClickKeyCallback} from "../../types";
+import {CursorContext} from "../input/cursor-contexts";
+import {TabbarItemType} from "../tabbar/types";
 
 import {KeypadButton} from "./keypad-button";
 
 type Props = {
     onClickKey: ClickKeyCallback;
+    selectedPage: TabbarItemType;
+    cursorContext?: CursorContext;
     multiplicationDot?: boolean;
     divisionKey?: boolean;
 };
 
+function getCursorContextConfig(cursorContext?: CursorContext) {
+    if (!cursorContext) {
+        return null;
+    }
+
+    switch (cursorContext) {
+        case CursorContext.NONE:
+            return null;
+        case CursorContext.IN_PARENS:
+            return Keys.JUMP_OUT_PARENTHESES;
+        case CursorContext.IN_SUPER_SCRIPT:
+            return Keys.JUMP_OUT_EXPONENT;
+        case CursorContext.IN_SUB_SCRIPT:
+            return Keys.JUMP_OUT_BASE;
+        case CursorContext.IN_NUMERATOR:
+            return Keys.JUMP_OUT_NUMERATOR;
+        case CursorContext.IN_DENOMINATOR:
+            return Keys.JUMP_OUT_DENOMINATOR;
+        case CursorContext.BEFORE_FRACTION:
+            return Keys.JUMP_INTO_NUMERATOR;
+    }
+}
+
 export default function SharedKeys(props: Props) {
-    const {onClickKey, divisionKey, multiplicationDot} = props;
+    const {
+        onClickKey,
+        cursorContext,
+        divisionKey,
+        multiplicationDot,
+        selectedPage,
+    } = props;
+
+    const cursorKeyConfig = getCursorContextConfig(cursorContext);
+
+    // Fraction position depends on the page
+    const fractionCoord: readonly [number, number] =
+        selectedPage === "Numbers" || selectedPage === "Operators"
+            ? [3, 1]
+            : [3, 0];
 
     return (
         <>
-            {/* Row 1 */}
             <KeypadButton
                 keyConfig={Keys.PLUS}
                 onClickKey={onClickKey}
@@ -29,6 +69,12 @@ export default function SharedKeys(props: Props) {
                 coord={[5, 0]}
                 secondary
             />
+            <KeypadButton
+                keyConfig={Keys.FRAC_INCLUSIVE}
+                onClickKey={onClickKey}
+                coord={fractionCoord}
+                secondary
+            />
 
             {/* Row 2 */}
             <KeypadButton
@@ -61,12 +107,14 @@ export default function SharedKeys(props: Props) {
             />
 
             {/* Row 4 */}
-            <KeypadButton
-                keyConfig={Keys.FRAC_INCLUSIVE}
-                onClickKey={onClickKey}
-                coord={[4, 3]}
-                secondary
-            />
+            {cursorKeyConfig && (
+                <KeypadButton
+                    keyConfig={cursorKeyConfig}
+                    onClickKey={onClickKey}
+                    coord={[4, 3]}
+                    secondary
+                />
+            )}
             <KeypadButton
                 keyConfig={Keys.BACKSPACE}
                 onClickKey={onClickKey}