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

Question

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?

Nicoline

Hey @Nicoline did you get answer for it? – Excision

There is already a feature going on regarding this request: please track it here: github.com/angular/components/issues/25468, If you can't wait for it, then you need to implement your own :/ – Erinn

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

Salientian

doesn't work... – Leprous