feat(core): add A11yDescriptions component

Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>

packages/core/src/auto-imports.d.ts

@@ -8,6 +8,8 @@ declare global {
   const $ref: typeof import('vue/macros')['$ref']
   const $shallowRef: typeof import('vue/macros')['$shallowRef']
   const $toRef: typeof import('vue/macros')['$toRef']
+  const ARIA_EDGE_DESC_KEY: typeof import('./utils/a11y')['ARIA_EDGE_DESC_KEY']
+  const ARIA_NODE_DESC_KEY: typeof import('./utils/a11y')['ARIA_NODE_DESC_KEY']
   const EdgeId: typeof import('./context/index')['EdgeId']
   const EdgeRef: typeof import('./context/index')['EdgeRef']
   const EffectScope: typeof import('vue')['EffectScope']
@@ -57,6 +59,7 @@ declare global {
   const defineComponent: typeof import('vue')['defineComponent']
   const eagerComputed: typeof import('@vueuse/core')['eagerComputed']
   const effectScope: typeof import('vue')['effectScope']
+  const elementSelectionKeys: typeof import('./utils/a11y')['elementSelectionKeys']
   const extendRef: typeof import('@vueuse/core')['extendRef']
   const getBezierEdgeCenter: typeof import('./components/Edges/utils/general')['getBezierEdgeCenter']
   const getBezierPath: typeof import('./components/Edges/utils/bezier')['getBezierPath']

packages/core/src/components/A11y/A11yDescriptions.vue

@@ -0,0 +1,16 @@
+<script lang="ts" setup>
+const { id, disableKeyboardA11y } = useVueFlow()
+</script>
+
+<template>
+  <template v-if="!disableKeyboardA11y">
+    <div :id="`${ARIA_NODE_DESC_KEY}-${id}`" style="display: none">
+      Press enter or space to select a node. You can then use the arrow keys to move the node around, press delete to remove it
+      and press escape to cancel.
+    </div>
+
+    <div :id="`${ARIA_EDGE_DESC_KEY}-${id}`" style="display: none">
+      Press enter or space to select an edge. You can then press delete to remove it or press escape to cancel.
+    </div>
+  </template>
+</template>

packages/core/src/utils/a11y.ts

@@ -0,0 +1,4 @@
+export const ARIA_NODE_DESC_KEY = 'vue-flow__node-desc'
+export const ARIA_EDGE_DESC_KEY = 'vue-flow__edge-desc'
+
+export const elementSelectionKeys = ['Enter', ' ', 'Escape']