How to make Angular CDK Drag and Drop Accessible with a Keyboard

1.3k views Asked by At

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?

1

There are 1 answers

0
Yaseen Khamosh On

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 }"