react-beautiful-dnd supports dragging with only a keyboard. We have audited how our keyboard shortcuts interact with standard browser keyboard interactions. When the user is not dragging they can use their keyboard as they normally would. While dragging we override and disable certain browser shortcuts (such as tab) to ensure a fluid experience for the user.
To see more indepth information about how we impact standard browser events see our how we use DOM events guide
When a drag is not occurring, the user will be able to navigate through the <Draggable />'s on a page using the standard tab tab ↹ key to move forward through the tabbable elements and (shift + tab) (shift + )tab ↹) to move backwards. We achieve this by adding a tab-index to the <Draggable />. When a <Draggable /> has focus the spacebar space will lift a <Draggable />. This will start the drag.
Once a drag is started the following keyboard shortcuts can be used:
- spacebar space - drop the
<Draggable /> - escape esc - cancel the drag
The following commands are also available but they depend on the type of <Droppable /> that the <Draggable /> is currently in:
- Up arrow ↑ - move a
<Draggable />upwards in a<Droppable /> - Down arrow ↓ - move a
<Draggable />downwards in a<Droppable /> - Right arrow → - move a
<Draggable />to a<Droppable />to the right of the current<Droppable />(move to new list) - Left arrow ← - move a
<Draggable />to a<Droppable />to the left of the current<Droppable />(move to new list)
- Up arrow ↑ - move a
<Draggable />to a<Droppable />to above the current<Droppable />(move to new list) - Down arrow ↓ - move a
<Draggable />to a<Droppable />to below the current<Droppable />(move to new list) - Right arrow → - move a
<Draggable />to the right in the current<Droppable /> - Left arrow ← - move a
<Draggable />to the left in the current<Droppable />
During a drag the following standard keyboard events have their default behaviour prevented (through event.preventDefault()) to avoid a bad experience:
- tab tab ↹ - preventing tabbing
- enter ⏎ - preventing submission
When dragging with a keyboard, react-beautiful-dnd will also perform auto scrolling operations to ensure the item can be moved around
