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

feat(core): add A11yDescriptions component

Browse Source 
Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>
This commit is contained in:
braks
2022-12-18 21:09:26 +01:00
committed by Braks
parent b0e09f7661
commit f64e298508
3 changed files with 23 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
packages/core/src/auto-imports.d.ts vendored
View File

@@ -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']

16
packages/core/src/components/A11y/A11yDescriptions.vue Normal file
View File

@@ -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>

4
packages/core/src/utils/a11y.ts Normal file
View File

@@ -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']