Keyboard support in interact.js drag

Question

I've setup interact.js draggable as -

interact('.draggable')
            .draggable({
                onstart: (event: Interact.InteractEvent) => onstartRef.current(event),
                onmove: (event: Interact.InteractEvent) => onmoveRef.current(event),
                onend: (event: Interact.InteractEvent) => onendRef.current(event)
            })

I was trying to add support for a11y with keyboard drag with interact.js but could not find anything in documentation for it. How to bind "dragStart", "dragMove" and "dragEnd" events with keyboard events.

I could find a github issue but is there more information - https://github.com/taye/interact.js/issues/275.

I'm starting with listening to keyboard arrow-left, right, up, down, and willing to start "onStart", "onEnd" and "onMove".

switch (event.key) {
        case 'ArrowLeft':

Answer 1

It’s quite likely that the dragging is not essential to your application, and that other interactions, like context menus, can achieve the same goal.

Don’t try to force it and replicate the exact same interaction, just with keyboard. Steering an element across the screen by means of arrow keys might be playful at first, but is cumbersome when trying to get a job done.

Plus, it still is inaccessible to users with vision impairments.

The WCAG 2.2 explicitly demand a single pointer interaction

Success Criterion 2.5.7 Dragging Movements (Level AA): All functionality that uses a dragging movement for operation can be achieved by a single pointer without dragging, unless dragging is essential or the functionality is determined by the user agent and not modified by the author.

The currently sole sufficient technique to satisfy that criterion is listing some examples:

Example 1

• A list of items can be re-ordered by picking up an item and dragging it upwards or downwards. Other elements move dynamically to open a gap where the picked-up target can be dropped. After a single pointer activation, the list items display up and down arrows which allow a step-wise re-ordering of the list via single pointer inputs (taps or clicks at the up or down arrow).
• A vertical priority list indicates the priority of items listed. Each item can be ‘picked up’ with a pointer and dragged up or down to another position. The other list items rearrange dynamically. To the left of each list item, a number in a text field shows the current priority position. For any of the items, users can put in another number. This leads to a dynamic reordering and renumbering of the priority list.
• In a Kanban implementation for process management, tasks can be dragged horizontally from one ‘swimming lane’ to another in order to change the status of tasks (for example, to change the status of a task from “in process” to “completed”). One or several items in a lane can be selected by a single tap or click. A single pointer activation of a drop-down menu labelled “Move selected items to” offers a selection of drop targets (other lanes). A further single pointer activation over the desired menu item moves targets to the specified lane.
• In a radial control widget, the visual indicator of the current value of the control can be dragged to a different position. Users can also click or tap on another position of the radial control to change the value.

In windows, you can drag an item onto your trash icon, or you can right click it and select “Delete”. The context menu is keyboard accessible.