Drag and drop blog post (#3714)

Author: devongovett

packages/@react-aria/dnd/docs/Anatomy.svg

@@ -12,7 +12,7 @@ import DropOperation from './DropOperation.svg';
 import BetweenDropPosition from './BetweenDropPosition.svg';
 import OnDropPosition from './OnDropPosition.svg';
 import RootDropPosition from './RootDropPosition.svg';
-import DragPreview from './DragPreview.svg';
+import Anatomy from './Anatomy.svg';
 import DragAffordance from './DragAffordance.svg';
 
 import {Layout} from '@react-spectrum/docs';
@@ -42,10 +42,7 @@ The drag source is responsible for providing one or more **drag items**, which s
 
 While dragging, a **drag preview** is displayed under the user's mouse or finger to indicate the items being dragged. By default, this is a copy of the dragged element, but it can be customized. For example, when multiple items are dragged, they could be shown as a stack, or with a badge indicating the count.
 
-<figure style={{display: 'flex', flexDirection: 'column', alignItems: 'center', margin: '20px 0'}}>
-  <DragPreview role="img" aria-labelledby="drag-preview-caption" />
-  <figcaption id="drag-preview-caption" style={{fontStyle: 'italic'}}>A custom drag preview representing multiple drag items.</figcaption>
-</figure>
+<Anatomy role="img" aria-label="Drag and drop anatomy diagram, showing drag source, drag preview, and drop target." />
 
 There are several **drop operations** that can be performed as a result of a drag and drop interaction:
 
@@ -76,7 +73,7 @@ Collection components built with hooks such as [useListBox](useListBox.html), [u
 
 While drag and drop has historically been mostly limited to mouse and touchscreen users, keyboard and screen reader friendly alternatives are important for users who cannot use these interaction methods. For example, copy and paste can often be used as an alternative to drag and drop to allow the user to move an object from one location to another. However, copy and paste does not cover all of the possible interactions that drag and drop allows. For example, it is hard to specify an exact location to insert an item into a list on paste, or even know where pasting is accepted. Users must either already know where they can paste, or navigate aimlessly until they find a valid location.
 
-React Aria implements keyboard and screen reader friendly interactions for drag and drop that provide full parity with the mouse and touch experiences. Users can press <Keyboard>Enter</Keyboard> on a draggable element to enter drag and drop mode. Then, they can press <Keyboard>Tab</Keyboard> to cycle between the drop targets that accept the dragged data, then press <Keyboard>Enter</Keyboard> to drop. <Keyboard>Escape</Keyboard> can be pressed at any time to cancel. Touch screen reader users can also drag by long pressing to activate drag and drop mode, swiping between drop targets, and double tapping to drop. Screen reader announcements are included to help guide the user through this process. All of this is built into the [useDrag](useDrag.html) and [useDrop](useDrop.html) hooks.
+React Aria implements keyboard and screen reader friendly interactions for drag and drop that provide full parity with the mouse and touch experiences. Users can press <Keyboard>Enter</Keyboard> on a draggable element to enter drag and drop mode. Then, they can press <Keyboard>Tab</Keyboard> to cycle between the drop targets that accept the dragged data, then press <Keyboard>Enter</Keyboard> to drop. <Keyboard>Escape</Keyboard> can be pressed at any time to cancel. Touch screen reader users can also drag by double tapping to activate drag and drop mode, swiping between drop targets, and double tapping again to drop. Screen reader announcements are included to help guide the user through this process. All of this is built into the [useDrag](useDrag.html) and [useDrop](useDrop.html) hooks.
 
 Collection components such as lists or tables are treated as a single drop target, so that users can easily tab past them to get to the next drop target without going through every item. Instead, within a droppable collection, keys such as <Keyboard>ArrowDown</Keyboard> and <Keyboard>ArrowUp</Keyboard> can be used to select a drop position, such as on an item, or between items. The exact interactions may vary depending on the layout of the collection component. Drag and drop for collections is implemented by the [useDraggableCollection](useDraggableCollection.html) and [useDroppableCollection](useDroppableCollection.html) hooks.
 

packages/@react-aria/dnd/docs/OnDropPosition.svg

@@ -38,7 +38,7 @@ keywords: [drag, drop, dnd, drag and drop, aria, accessibility]
 
 Drag and drop is a common UI interaction that allows users to transfer data between two locations by directly moving a visual representation on screen. It is a flexible, efficient, and intuitive way for users to perform a variety of tasks, and is widely supported across both desktop and mobile operating systems.
 
-React Aria supports traditional mouse and touch based drag and drop, but also implements keyboard and screen reader friendly interactions. Users can press <Keyboard>Enter</Keyboard> on a draggable element to enter drag and drop mode. Then, they can press <Keyboard>Tab</Keyboard> to navigate between drop targets, and <Keyboard>Enter</Keyboard> to drop or <Keyboard>Escape</Keyboard> to cancel. Touch screen reader users can also drag by long pressing to activate drag and drop mode, swiping between drop targets, and double tapping to drop.
+React Aria supports traditional mouse and touch based drag and drop, but also implements keyboard and screen reader friendly interactions. Users can press <Keyboard>Enter</Keyboard> on a draggable element to enter drag and drop mode. Then, they can press <Keyboard>Tab</Keyboard> to navigate between drop targets, and <Keyboard>Enter</Keyboard> to drop or <Keyboard>Escape</Keyboard> to cancel. Touch screen reader users can also drag by double tapping to activate drag and drop mode, swiping between drop targets, and double tapping again to drop.
 
 See the [drag and drop introduction](dnd.html) to learn more.
 

packages/@react-aria/dnd/docs/dnd.mdx

@@ -42,7 +42,7 @@ keywords: [drag, drop, dnd, drag and drop, aria, accessibility]
 
 Collection components built with hooks such as [useListBox](useListBox.html), [useTable](useTable.html), and [useGridList](useGridList.html) can support drag and drop interactions. Users can drag multiple selected items at once, or drag individual non-selected items.
 
-React Aria supports traditional mouse and touch based drag and drop, but also implements keyboard and screen reader friendly interactions. Users can press <Keyboard>Enter</Keyboard> on a draggable element to enter drag and drop mode. Then, they can press <Keyboard>Tab</Keyboard> to navigate between drop targets, and <Keyboard>Enter</Keyboard> to drop or <Keyboard>Escape</Keyboard> to cancel. Touch screen reader users can also drag by long pressing to activate drag and drop mode, swiping between drop targets, and double tapping to drop.
+React Aria supports traditional mouse and touch based drag and drop, but also implements keyboard and screen reader friendly interactions. Users can press <Keyboard>Enter</Keyboard> on a draggable element to enter drag and drop mode. Then, they can press <Keyboard>Tab</Keyboard> to navigate between drop targets, and <Keyboard>Enter</Keyboard> to drop or <Keyboard>Escape</Keyboard> to cancel. Touch screen reader users can also drag by double tapping to activate drag and drop mode, swiping between drop targets, and double tapping again to drop.
 
 See the [drag and drop introduction](dnd.html) to learn more.