From 089859d837637a3dd92de098af4f572ce2f2c140 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Sun, 25 Dec 2022 11:42:25 +0100
Subject: [PATCH] feat(core): add a11y support to nodes selection box

Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>
---
 .../NodesSelection/NodesSelection.vue         | 33 +++++++++++++++++--
 1 file changed, 31 insertions(+), 2 deletions(-)

diff --git a/packages/core/src/components/NodesSelection/NodesSelection.vue b/packages/core/src/components/NodesSelection/NodesSelection.vue
index e5ffb4b8..cff4f287 100644
--- a/packages/core/src/components/NodesSelection/NodesSelection.vue
+++ b/packages/core/src/components/NodesSelection/NodesSelection.vue
@@ -1,5 +1,7 @@
 <script lang="ts" setup>
-const { emits, setState, viewport, getSelectedNodes, snapToGrid, snapGrid, noPanClassName } = $(useVueFlow())
+const { emits, viewport, getSelectedNodes, noPanClassName, disableKeyboardA11y, userSelectionActive } = $(useVueFlow())
+
+const updatePositions = useUpdateNodePositions()
 
 const el = ref()
 
@@ -16,6 +18,12 @@ const dragging = useDrag({
   },
 })
 
+watch($$(disableKeyboardA11y), (a11yDisabled) => {
+  if (!a11yDisabled) {
+    el.value?.focus({ preventScroll: true })
+  }
+})
+
 const selectedNodesBBox = $computed(() => getRectOfNodes(getSelectedNodes))
 
 const innerStyle = computed(() => ({
@@ -26,6 +34,18 @@ const innerStyle = computed(() => ({
 }))
 
 const onContextMenu = (event: MouseEvent) => emits.selectionContextMenu({ event, nodes: getSelectedNodes })
+
+const onKeyDown = (event: KeyboardEvent) => {
+  if (arrowKeyDiffs[event.key]) {
+    updatePositions(
+      {
+        x: arrowKeyDiffs[event.key].x,
+        y: arrowKeyDiffs[event.key].y,
+      },
+      event.shiftKey,
+    )
+  }
+}
 </script>
 
 <script lang="ts">
@@ -36,10 +56,19 @@ export default {
 
 <template>
   <div
+    v-if="!userSelectionActive && selectedNodesBBox.width && selectedNodesBBox.height"
     class="vue-flow__nodesselection vue-flow__container"
     :class="noPanClassName"
     :style="{ transform: `translate(${viewport.x}px,${viewport.y}px) scale(${viewport.zoom})` }"
   >
-    <div ref="el" :class="{ dragging }" class="vue-flow__nodesselection-rect" :style="innerStyle" @contextmenu="onContextMenu" />
+    <div
+      ref="el"
+      :class="{ dragging }"
+      class="vue-flow__nodesselection-rect"
+      :style="innerStyle"
+      :tabIndex="disableKeyboardA11y ? undefined : -1"
+      @contextmenu="onContextMenu"
+      @keydown="disableKeyboardA11y ? undefined : onKeyDown"
+    />
   </div>
 </template>