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

@ -23,12 +23,6 @@ export type OwnProps = {
export type Props = OwnProps;
function focusRef(el: HTMLElement | null) {
if (el) {
el.focus();
}
}
function renderBody({ pack, i18n }: Props) {
if (pack && pack.status === 'error') {
return (
@ -80,9 +74,27 @@ export const StickerPreviewModal = React.memo(
installStickerPack,
uninstallStickerPack,
} = props;
const focusRef = React.useRef<HTMLButtonElement>(null);
const [root, setRoot] = React.useState<HTMLElement | null>(null);
const [confirmingUninstall, setConfirmingUninstall] = React.useState(false);
// Restore focus on teardown
React.useEffect(
() => {
const lastFocused = document.activeElement as any;
if (focusRef.current) {
focusRef.current.focus();
}
return () => {
if (lastFocused && lastFocused.focus) {
lastFocused.focus();
}
};
},
[root]
);
React.useEffect(() => {
const div = document.createElement('div');
document.body.appendChild(div);
@ -148,10 +160,10 @@ export const StickerPreviewModal = React.memo(
}
};
document.addEventListener('keyup', handler);
document.addEventListener('keydown', handler);
return () => {
document.removeEventListener('keyup', handler);
document.removeEventListener('keydown', handler);
};
},
[onClose]
@ -169,6 +181,7 @@ export const StickerPreviewModal = React.memo(
return root
? createPortal(
<div
// Not really a button. Just a background which can be clicked to close modal
role="button"
className="module-sticker-manager__preview-modal__overlay"
onClick={handleClickToClose}