Fix example code in README.md (#18158)

* Fix example code in README.md As mentioned in #16916, it seems not to work to add "draggable" attribute directly to Dashicon. The example works when the Dashicon is wrapped in a div. * Fix tabbing issue
WordPress · Dec 3, 2019 · 5064a06 · 5064a06
1 parent e12d4dd
commit 5064a06
Showing 1 changed file with 22 additions and 20 deletions.
diff --git a/packages/components/src/draggable/README.md b/packages/components/src/draggable/README.md
@@ -51,16 +51,17 @@ const MyDraggable = () => (
 					elementId="draggable-panel"
 					transferData={ { } }
 				>
-				{
-					( { onDraggableStart, onDraggableEnd } ) => (
-						<Dashicon
-							icon="move"
-							onDragStart={ onDraggableStart }
-							onDragEnd={ onDraggableEnd }
-							draggable
-						/>
-					)
-				}
+					{
+						( { onDraggableStart, onDraggableEnd } ) => (
+							<div className="example-drag-handle" draggable>
+								<Dashicon
+									icon="move"
+									onDragStart={ onDraggableStart }
+									onDragEnd={ onDraggableEnd }
+								/>
+							</div>
+						)
+					}
 				</Draggable>
 			</PanelBody>
 		</Panel>
@@ -83,16 +84,17 @@ const MyDraggable = ( { onDragStart, onDragEnd } ) => (
 					onDragStart={ onDragStart }
 					onDragEnd={ onDragEnd }
 				>
-				{
-					( { onDraggableStart, onDraggableEnd } ) => (
-						<Dashicon
-							icon="move"
-							onDragStart={ onDraggableStart }
-							onDragEnd={ onDraggableEnd }
-							draggable
-						/>
-					)
-				}
+					{
+						( { onDraggableStart, onDraggableEnd } ) => (
+							<div className="example-drag-handle" draggable>
+								<Dashicon
+									icon="move"
+									onDragStart={ onDraggableStart }
+									onDragEnd={ onDraggableEnd }
+								/>
+							</div>
+						)
+					}
 				</Draggable>
 			</PanelBody>
 		</Panel>