Mirrored_Repos/InvokeAI
1
0
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI synced 2024-08-30 20:32:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(ui): filter out interactive targets when pressing space on canvas tab

Browse Source 
Improve input filtering for better accessibility
This commit is contained in:
Thomas Mello 2024-01-29 23:39:07 +03:00 committed by psychedelicious
parent 30e11b4b42
commit 4477e04d59
2 changed files with 16 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
invokeai/frontend/web/src/features/canvas/hooks/useCanvasHotkeys.ts
View File

@ -1,5 +1,4 @@
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { isInputElement } from 'common/util/isInputElement';
import {
$canvasStage,
$tool,
@ -14,6 +13,7 @@ import {
setShouldShowBoundingBox,
setShouldSnapToGrid,
} from 'features/canvas/store/canvasSlice';
import { isInteractiveTarget } from 'features/canvas/util/isInteractiveTarget';
import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
import { useCallback, useEffect } from 'react';
import { useHotkeys } from 'react-hotkeys-hook';
@ -93,7 +93,7 @@ const useInpaintingCanvasHotkeys = () => {
const onKeyDown = useCallback(
(e: KeyboardEvent) => {
if (e.repeat || e.key !== ' ' || isInputElement(e.target as HTMLElement) || activeTabName !== 'unifiedCanvas') {
if (e.repeat || e.key !== ' ' || isInteractiveTarget(e.target) || activeTabName !== 'unifiedCanvas') {
return;
}
if ($toolStash.get() || $tool.get() === 'move') {
@ -108,7 +108,7 @@ const useInpaintingCanvasHotkeys = () => {
);
const onKeyUp = useCallback(
(e: KeyboardEvent) => {
if (e.repeat || e.key !== ' ' || isInputElement(e.target as HTMLElement) || activeTabName !== 'unifiedCanvas') {
if (e.repeat || e.key !== ' ' || isInteractiveTarget(e.target) || activeTabName !== 'unifiedCanvas') {
return;
}
if (!$toolStash.get() || $tool.get() !== 'move') {

13
invokeai/frontend/web/src/features/canvas/util/isInteractiveTarget.ts Normal file
View File

@ -0,0 +1,13 @@
import { isInputElement } from 'common/util/isInputElement';
export const isInteractiveTarget = (target: EventTarget | null) => {
if (target instanceof HTMLElement) {
return (
target.tabIndex > -1 ||
isInputElement(target) ||
['dialog', 'alertdialog'].includes(target.getAttribute('role') ?? '')
);
}
return false;
};