chore: improve shortcut support

concord-consortium · Nov 29, 2024 · 8bf585b · 8bf585b
1 parent ea9c8f1
commit 8bf585b
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 27 deletions.
diff --git a/src/components/keyboard-shortcut-controls.test.tsx b/src/components/keyboard-shortcut-controls.test.tsx
@@ -55,7 +55,7 @@ describe("test keyboard shortcut controls component", () => {
     expect(input).toHaveAttribute("aria-describedby", "custom-keyboard-shortcut-confirmation");
     expect(screen.getByTestId("custom-keyboard-shortcut-confirmation")).toBeInTheDocument();
     const confirmationMsg = screen.getByTestId("custom-keyboard-shortcut-confirmation").textContent;
-    expect(confirmationMsg).toContain(`Keyboard shortcut changed to ${customShortcut}.`);
+    expect(confirmationMsg).toContain(`Keyboard shortcut changed to ${customShortcut}`);
     const dismissButton = screen.getByTestId("custom-keyboard-shortcut-confirmation-dismiss");
     expect(dismissButton).toHaveTextContent("X");
   });

diff --git a/src/components/keyboard-shortcut-controls.tsx b/src/components/keyboard-shortcut-controls.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { FormEvent, useState } from "react";
 
 import "./keyboard-shortcut-controls.scss";
 
@@ -10,42 +10,42 @@ interface IProps {
 }
 
 export const KeyboardShortcutControls = (props: IProps) => {
-  const { shortcutEnabled, onToggleShortcut } = props;
+  const { shortcutEnabled, shortcutKeys, onCustomizeShortcut, onToggleShortcut } = props;
   const toggleButtonLabel = shortcutEnabled ? "Disable Shortcut" : "Enable Shortcut";
-  // const [showError, setShowError] = useState(false);
-  // const [showConfirmation, setShowConfirmation] = useState(false);
+  const [showError, setShowError] = useState(false);
+  const [showConfirmation, setShowConfirmation] = useState(false);
 
   const handleToggleShortcut = () => {
     onToggleShortcut();
   };
 
-  // const handleCustomizeShortcut = (event: FormEvent) => {
-  //   event.preventDefault();
-  //   const form = event.target as HTMLInputElement;
-  //   const shortcut = form.querySelector("input")?.value;
-  //   if (shortcut) {
-  //     onCustomizeShortcut?.(shortcut);
-  //     setShowError(false);
-  //     setShowConfirmation(true);
-  //   } else {
-  //     setShowError(true);
-  //     setShowConfirmation(false);
-  //   }
-  // };
+  const handleCustomizeShortcut = (event: FormEvent) => {
+    event.preventDefault();
+    const form = event.target as HTMLInputElement;
+    const shortcut = form.querySelector("input")?.value;
+    if (shortcut) {
+      onCustomizeShortcut?.(shortcut);
+      setShowError(false);
+      setShowConfirmation(true);
+    } else {
+      setShowError(true);
+      setShowConfirmation(false);
+    }
+  };
 
-  // const customShortcutInputDescribedBy = showConfirmation
-  //   ? "custom-keyboard-shortcut-confirmation"
-  //   : showError
-  //     ? "custom-keyboard-shortcut-error"
-  //     : undefined;
+  const customShortcutInputDescribedBy = showConfirmation
+    ? "custom-keyboard-shortcut-confirmation"
+    : showError
+      ? "custom-keyboard-shortcut-error"
+      : undefined;
 
   return (
     <div className="keyboard-shortcut-controls">
       <h3>Keyboard Shortcut</h3>
       <button onClick={handleToggleShortcut} data-testid="keyboard-shortcut-toggle">
         {toggleButtonLabel}
       </button>
-      {/* <form data-testid="custom-keyboard-shortcut-form" onSubmit={handleCustomizeShortcut}>
+      <form data-testid="custom-keyboard-shortcut-form" onSubmit={handleCustomizeShortcut}>
         <fieldset disabled={!shortcutEnabled}>
           <label htmlFor="custom-keyboard-shortcut">Customize Keystroke</label>
           <input
@@ -65,7 +65,7 @@ export const KeyboardShortcutControls = (props: IProps) => {
               id="custom-keyboard-shortcut-confirmation"
               role="alert"
             >
-              Keyboard shortcut changed to {shortcutKeys}. 
+              Keyboard shortcut changed to {shortcutKeys}
               <button
                 aria-label="Dismiss this message." 
                 className="dismiss"
@@ -87,7 +87,7 @@ export const KeyboardShortcutControls = (props: IProps) => {
             </div>
           }
         </fieldset>
-      </form> */}
+      </form>
     </div>
   );
 };
diff --git a/src/utils.ts b/src/utils.ts
@@ -52,11 +52,14 @@ export const charKeyMap: Record<string, string> = {
 
 export const isShortcutPressed = (event: KeyboardEvent, shortcutKeys: string): boolean => {
   const keystrokeElements = shortcutKeys.split("+");
+  const isMac = navigator.platform.toUpperCase().indexOf("MAC") >= 0;
   return keystrokeElements.every((keystroke) => {
     if (keystroke in specialKeyMap) {
       return event[specialKeyMap[keystroke as keyof typeof specialKeyMap] as keyof KeyboardEvent];
+    } else if (keystroke in charKeyMap && isMac) {
+      return event.key === charKeyMap[keystroke];
     } else {
-      const normalizedKey = charKeyMap[keystroke] || keystroke.toLowerCase();
+      const normalizedKey = keystroke.toLowerCase();
       const isShifted = keystroke !== keystroke.toLowerCase();
       return event.key.toLowerCase() === normalizedKey && (!isShifted || event.shiftKey);
     }