feat(core,a11y): add A11yDescriptions to VueFlow container

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

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

@@ -1,18 +1,40 @@
 <script lang="ts" setup>
-import { ARIA_EDGE_DESC_KEY, ARIA_NODE_DESC_KEY } from '../../utils/a11y'
+import type { CSSProperties } from 'vue'
+import { ARIA_EDGE_DESC_KEY, ARIA_LIVE_MESSAGE, ARIA_NODE_DESC_KEY } from '../../utils/a11y'
 
-const { id, disableKeyboardA11y } = useVueFlow()
+const { id, disableKeyboardA11y, ariaLiveMessage } = useVueFlow()
+
+const ariaLiveStyle: CSSProperties = {
+  position: 'absolute',
+  width: 1,
+  height: 1,
+  margin: -1,
+  border: 0,
+  padding: 0,
+  overflow: 'hidden',
+  clip: 'rect(0px, 0px, 0px, 0px)',
+  clipPath: 'inset(100%)',
+}
 </script>
 
 <template>
-  <template v-if="!disableKeyboardA11y">
+  <div :id="`${ARIA_NODE_DESC_KEY}-${id}`" style="display: none">
-    <div :id="`${ARIA_NODE_DESC_KEY}-${id}`" style="display: none">
+    Press enter or space to select a node.
-      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
+    {{ !disableKeyboardA11y ? 'You can then use the arrow keys to move the node around.' : '' }}
-      and press escape to cancel.
+    You can then use the arrow keys to move the node around, press delete to remove it and press escape to cancel.
-    </div>
+  </div>
 
-    <div :id="`${ARIA_EDGE_DESC_KEY}-${id}`" style="display: none">
+  <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.
+    Press enter or space to select an edge. You can then press delete to remove it or press escape to cancel.
-    </div>
+  </div>
-  </template>
+
+  <div
+    v-if="!disableKeyboardA11y"
+    :id="`${ARIA_LIVE_MESSAGE}-${id}`"
+    aria-live="assertive"
+    aria-atomic="true"
+    :style="ariaLiveStyle"
+  >
+    {{ ariaLiveMessage }}
+  </div>
 </template>

packages/core/src/container/VueFlow/VueFlow.vue

@@ -1,12 +1,14 @@
 <script lang="ts" setup>
 import type { D3ZoomEvent } from 'd3-zoom'
 import Viewport from '../Viewport/Viewport.vue'
-import type { FlowElements, FlowProps } from '../../types/flow'
+import A11yDescriptions from '../../components/A11y/A11yDescriptions.vue'
 import type {
   Connection,
   EdgeChange,
   EdgeMouseEvent,
   EdgeUpdateEvent,
+  FlowElements,
+  FlowProps,
   GraphEdge,
   GraphNode,
   NodeChange,
@@ -170,5 +172,7 @@ export default {
     </Viewport>
 
     <slot />
+
+    <A11yDescriptions />
   </div>
 </template>

packages/core/src/utils/a11y.ts

@@ -3,6 +3,8 @@ import type { XYPosition } from '~/types'
 export const ARIA_NODE_DESC_KEY = 'vue-flow__node-desc'
 export const ARIA_EDGE_DESC_KEY = 'vue-flow__edge-desc'
 
+export const ARIA_LIVE_MESSAGE = 'react-flow__aria-live'
+
 export const elementSelectionKeys = ['Enter', ' ', 'Escape']
 
 export const arrowKeyDiffs: Record<string, XYPosition> = {