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

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

Browse Source 
Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>
This commit is contained in:
braks
2022-12-20 00:38:56 +01:00
committed by Braks
parent 9508dea863
commit 7195582a6c
3 changed files with 40 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/core/src/components/A11y/A11yDescriptions.vue
+33 -11
View File
@@ -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">
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_NODE_DESC_KEY}-${id}`" style="display: none">
Press enter or space to select a node.
{{ !disableKeyboardA11y ? 'You can then use the arrow keys to move the node around.' : '' }}
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>
<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>
<div
v-if="!disableKeyboardA11y"
:id="`${ARIA_LIVE_MESSAGE}-${id}`"
aria-live="assertive"
aria-atomic="true"
:style="ariaLiveStyle"
>
{{ ariaLiveMessage }}
</div>
</template>