Improve keyboard handling

Use keyboard shortcut on toggling maskedtextinput visibility.

categories/freeform/react/src/components/MaskedTextInput/index.tsx

@@ -60,6 +60,7 @@ export const MaskedTextInput = React.forwardRef<
     style,
     length,
     disabled,
+    onKeyUp,
     ...etcProps
   }: MaskedTextInputProps,
   forwardedRef,
@@ -70,6 +71,17 @@ export const MaskedTextInput = React.forwardRef<
   const id = idProp ?? defaultId;
   const [visible, setVisible] = React.useState(false);
 
+  const handleKeyUp: React.KeyboardEventHandler<MaskedTextInputDerivedElement> = React.useCallback((e) => {
+    if (e.ctrlKey && e.code === 'Space') {
+      setVisible((prev) => !prev);
+    }
+    onKeyUp?.(e);
+  }, [onKeyUp]);
+
+  const handleToggleVisible = React.useCallback(() => {
+    setVisible((prev) => !prev);
+  }, []);
+
   return (
     <div
       className={clsx(
@@ -121,6 +133,7 @@ export const MaskedTextInput = React.forwardRef<
         aria-labelledby={labelId}
         type={!visible ? 'password' : 'text'}
         data-testid="input"
+        onKeyUp={handleKeyUp}
         className={clsx(
           'bg-negative rounded-inherit w-full peer block font-inherit',
           'focus:outline-0',
@@ -188,6 +201,7 @@ export const MaskedTextInput = React.forwardRef<
           disabled={disabled}
           type="button"
           data-testid="indicator"
+          tabIndex={-1}
           className={clsx(
             'text-center z-[1] focus:outline-0 flex items-center justify-center aspect-square absolute bottom-0 right-0 select-none text-primary group-focus-within:text-secondary',
             {
@@ -196,7 +210,7 @@ export const MaskedTextInput = React.forwardRef<
               'w-16': size === 'large',
             },
           )}
-          onClick={() => { setVisible((b) => !b); }}
+          onClick={handleToggleVisible}
         >
           <svg
             className="w-6 h-6 fill-none stroke-current stroke-2 linejoin-round linecap-round"