Keyboard support for dragEnter/dragLeave in dropzone (A11y).

Scenario

I work on canvas where there are multiple draggable objects and multiple dropzone of same or different types. The draggable were set to listen drag start, move and end events.

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

The dropzone is setup using

interactable.current = interact(`#${id}`).dropzone({});

The goal is, as soon as draggable overlaps with dropzone and enters into dropzone, handle to support dragging-in to dropzone scenario. This works fine for mouse and touch events but not working for "keyboard" a11y events.

I've tried with listening keyboard events as below -

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

I wish dragMove's dragEnter and dragLeave to trigger when drag happens via keyboard keys.

Expected behavior

dragMove's dragEnter and dragLeave to trigger when drag happens via keyboard keys.

Actual behavior

dragMove is not triggered with keyboard interactions, neither any other dragStart or dragEnd. Please help finding way to fix this a11y issue where customer wants same experience of dragging-in the object in drop-zone as with mouse and touch.

System configuration

interact.js version: ^1.10.11 Browser name and version: All Operating System: All

taye / interact.js