Keyboard shortcuts and accessibility

ts/components/emoji/EmojiButton.tsx

@@ -19,15 +19,11 @@ export type OwnProps = {
 export type Props = OwnProps &
   Pick<
     EmojiPickerProps,
-    | 'onClose'
-    | 'doSend'
-    | 'onPickEmoji'
-    | 'onSetSkinTone'
-    | 'recentEmojis'
-    | 'skinTone'
+    'doSend' | 'onPickEmoji' | 'onSetSkinTone' | 'recentEmojis' | 'skinTone'
   >;
 
 export const EmojiButton = React.memo(
+  // tslint:disable-next-line:max-func-body-length
   ({
     i18n,
     doSend,
@@ -35,7 +31,6 @@ export const EmojiButton = React.memo(
     skinTone,
     onSetSkinTone,
     recentEmojis,
-    onClose,
   }: Props) => {
     const [open, setOpen] = React.useState(false);
     const [popperRoot, setPopperRoot] = React.useState<HTMLElement | null>(
@@ -56,9 +51,8 @@ export const EmojiButton = React.memo(
     const handleClose = React.useCallback(
       () => {
         setOpen(false);
-        onClose();
       },
-      [setOpen, onClose]
+      [setOpen]
     );
 
     // Create popper root and handle outside clicks
@@ -71,7 +65,6 @@ export const EmojiButton = React.memo(
           const handleOutsideClick = ({ target }: MouseEvent) => {
             if (!root.contains(target as Node)) {
               setOpen(false);
-              onClose();
             }
           };
           document.addEventListener('click', handleOutsideClick);
@@ -88,6 +81,29 @@ export const EmojiButton = React.memo(
       [open, setOpen, setPopperRoot]
     );
 
+    // Install keyboard shortcut to open emoji picker
+    React.useEffect(
+      () => {
+        const handleKeydown = (event: KeyboardEvent) => {
+          const { ctrlKey, key, metaKey, shiftKey } = event;
+          const ctrlOrCommand = metaKey || ctrlKey;
+
+          if (ctrlOrCommand && shiftKey && key === 'e') {
+            event.stopPropagation();
+            event.preventDefault();
+
+            setOpen(!open);
+          }
+        };
+        document.addEventListener('keydown', handleKeydown);
+
+        return () => {
+          document.removeEventListener('keydown', handleKeydown);
+        };
+      },
+      [open, setOpen]
+    );
+
     return (
       <Manager>
         <Reference>