docs/sensors/keyboard.md
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 <kbd>tab ↹</kbd> key to move forward through the tabbable elements and (shift + tab) (<kbd>shift</kbd> + )<kbd>tab ↹</kbd>) to move backwards. We achieve this by adding a tab-index to the <Draggable />. When a <Draggable /> has focus the spacebar <kbd>space</kbd> will lift a <Draggable />. This will start the drag.
Once a drag is started the following keyboard shortcuts can be used:
<Draggable />The following commands are also available but they depend on the type of <Droppable /> that the <Draggable /> is currently in:
<Draggable /> upwards in a <Droppable /><Draggable /> downwards in a <Droppable /><Draggable /> to a <Droppable /> to the right of the current <Droppable /> (move to new list)<Draggable /> to a <Droppable /> to the left of the current <Droppable /> (move to new list)<Draggable /> to a <Droppable /> to above the current <Droppable /> (move to new list)<Draggable /> to a <Droppable /> to below the current <Droppable /> (move to new list)<Draggable /> to the right in the current <Droppable /><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:
When dragging with a keyboard, react-beautiful-dnd will also perform auto scrolling operations to ensure the item can be moved around