Keyboard shortcuts and accessibility
This commit is contained in:
parent
8590a047c7
commit
20a892247f
87 changed files with 3652 additions and 711 deletions
|
@ -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}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue