Keyboard shortcuts and accessibility

This commit is contained in:
Scott Nonnenberg 2019-11-07 13:36:16 -08:00
parent 8590a047c7
commit 20a892247f
87 changed files with 3652 additions and 711 deletions

View file

@ -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>