blogofsongs
Reputation: 2567
How to make Angular CDK Drag and Drop Accessible with a Keyboard
Our app has a "Form Builder" where users build a form by dragging form fields onto it. I'm researching how we would make this keyboard accessible - such that a user could...
- grab a field by TAB'ing to it and hitting Enter
- move it using Arrow keys
- drop it by pressing Enter again
I have found no information on making CDK Drag and Drop operations accessible with a keyboard...
Has anyone done this successfully? Could anyone provide some pointers on a good place to start making it accessible in this way?
Upvotes: 8
Views: 1852
Answers (1)
Yaseen Khamosh
Reputation: 1
Add this directive to the element you want to drag with arrow keys and change xV and yV from in input box : [cdkDragFreeDragPosition]="{ x: xV, y:yV }"
Upvotes: 0
Related Questions
- Angular [CDK v10+] cant find a proper replacement for "enter" deprecated function in drag and drop CDK
- Implement a Material CDK based Drag and Drop Functionality
- Angular CDK Drag & Drop: Don't move source item
- angular cdk drag & drop Directly by click event Instead of dragging
- Angular CDK Drag Drop - Transfer Item without Loss of Visibility
- Angular cdk/drag-drop miltiple cdkDrag elements
- CdkDragDrop in CdkPortal is not responding
- How to set up correctly cdk drag-drop for Angular?
- Cancel drag on key press Angular cdk Drag and Drop
- How to use Angular CDK Drag Drop for angular components?