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

@ -65,9 +65,27 @@ export const StickerManagerPackRow = React.memo(
[id, key, clearUninstalling]
);
const handleKeyDown = React.useCallback(
(event: React.KeyboardEvent) => {
if (
onClickPreview &&
(event.key === 'Enter' || event.key === 'Space')
) {
event.stopPropagation();
event.preventDefault();
onClickPreview(pack);
}
},
[onClickPreview, pack]
);
const handleClickPreview = React.useCallback(
() => {
(event: React.MouseEvent) => {
if (onClickPreview) {
event.stopPropagation();
event.preventDefault();
onClickPreview(pack);
}
},
@ -87,7 +105,10 @@ export const StickerManagerPackRow = React.memo(
</ConfirmationModal>
) : null}
<div
tabIndex={0}
// This can't be a button because we have buttons as descendants
role="button"
onKeyDown={handleKeyDown}
onClick={handleClickPreview}
className="module-sticker-manager__pack-row"
>