Accessibility in Vue Chips component
27 Feb 20231 minute to read
Keyboard interaction
The following shortcut keys are used to access the Chip control without any interruption.
Keyboard shortcuts | Actions |
---|---|
Enter | Selects the targeted chip from the ChipList/ChipCollection. |
Delete | Deletes the targeted chip from the ChipList/ChipCollection. |
<template>
<ejs-chiplist id="chip" enableDelete="true" selection="Single">
<e-chips>
<e-chip text="Andrew" avatarIconCss='andrew'></e-chip>
<e-chip text="Janet" avatarIconCss='janet'></e-chip>
<e-chip text="Laura" avatarIconCss='laura'></e-chip>
<e-chip text="Margaret" avatarIconCss='margaret'></e-chip>
</e-chips>
</ejs-chiplist>
</template>
<script>
import Vue from 'vue';
import { ChipListPlugin } from '@syncfusion/ej2-vue-buttons';
Vue.use(ChipListPlugin);
export default {}
</script>
<style>
#chip .andrew {
background-image: url('./andrew.png')
}
#chip .margaret {
background-image: url('./margaret.png')
}
#chip .laura {
background-image: url('./laura.png')
}
#chip .janet {
background-image: url('./janet.png')
}
</style>