alighasami/vue-flow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(core): prevent esc keypress when a11y is disabled

Browse Source
This commit is contained in:
braks
2024-02-21 23:27:01 +01:00
committed by Braks
parent e5a84656ad
commit f815ef6dd5
2 changed files with 4 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/core/src/components/Edges/EdgeWrapper.ts
+2 -1
View File
@@ -44,6 +44,7 @@ const EdgeWrapper = defineComponent({
findNode, findNode,
isValidConnection, isValidConnection,
multiSelectionActive, multiSelectionActive,
disableKeyboardA11y,
} = useVueFlow() } = useVueFlow()
const hooks = useEdgeHooks(props.edge, emits) const hooks = useEdgeHooks(props.edge, emits)
@@ -334,7 +335,7 @@ const EdgeWrapper = defineComponent({
} }
function onKeyDown(event: KeyboardEvent) { function onKeyDown(event: KeyboardEvent) {
if (elementSelectionKeys.includes(event.key) && props.selectable) { if (!disableKeyboardA11y.value && elementSelectionKeys.includes(event.key) && props.selectable) {
const unselect = event.key === 'Escape' const unselect = event.key === 'Escape'
if (unselect) { if (unselect) {
packages/core/src/components/Nodes/NodeWrapper.ts
+2 -2
View File
@@ -319,7 +319,7 @@ const NodeWrapper = defineComponent({
} }
function onKeyDown(event: KeyboardEvent) { function onKeyDown(event: KeyboardEvent) {
if (isInputDOMNode(event)) { if (isInputDOMNode(event) || disableKeyboardA11y.value) {
return return
} }
@@ -335,7 +335,7 @@ const NodeWrapper = defineComponent({
unselect, unselect,
nodeElement.value!, nodeElement.value!,
) )
} else if (!disableKeyboardA11y.value && props.draggable && node.value.selected && arrowKeyDiffs[event.key]) { } else if (props.draggable && node.value.selected && arrowKeyDiffs[event.key]) {
ariaLiveMessage.value = `Moved selected node ${event.key.replace('Arrow', '').toLowerCase()}. New position, x: ${~~node ariaLiveMessage.value = `Moved selected node ${event.key.replace('Arrow', '').toLowerCase()}. New position, x: ${~~node
.value.position.x}, y: ${~~node.value.position.y}` .value.position.x}, y: ${~~node.value.position.y}`