Accessibility for a Draggable, Droppable and Sortable component

Question

This is a component that I'm trying to make accessible:

As I understand, the ARIA Authoring Practices guidelines for drag and drop is basically:

1. Tab to move through the list of items
2. Space to select an item
3. Arrow keys to switch between the dropzone(s)
4. Enter to Drop

.. which works fine to get the items within the drop zone, but I wonder how should the sortable work?

Answer 1

The W3.org site gives an accessible drag-and-drop example that offers the following key controls:

• Use the Tab to move to the item you want to move.
• Select the item you want to move with the Spacebar.
• Use the Up and Down cursor keys to select a target in the context menu.
• Press Enter to move the item to the target list.

From this it's not difficult to extract the following controls for your situation:

• Use Tab to move between items
• Use space to select an item
• Use enter to move it between lists (add or remove)
• Use arrow keys to move an item within a list