diff --git a/docs/user/dashboard/images/lens_drag_drop_1.gif b/docs/user/dashboard/images/lens_drag_drop_1.gif new file mode 100644 index 00000000000000..e2fc30fc7caed0 Binary files /dev/null and b/docs/user/dashboard/images/lens_drag_drop_1.gif differ diff --git a/docs/user/dashboard/lens.asciidoc b/docs/user/dashboard/lens.asciidoc index 77dc517c223375..be84ba7fe37744 100644 --- a/docs/user/dashboard/lens.asciidoc +++ b/docs/user/dashboard/lens.asciidoc @@ -36,27 +36,33 @@ NOTE: The sum of the *Other* fields can equal more than 100% by a small amount. [[drag-and-drop-keyboard-navigation]] === Create your visualizations faster with keyboard navigation -Lens has a fully accessible, continuously improved drag and drop system. By using keyboard navigation instead of a mouse you can significantly speed up your work. +Lens has a fully accessible, continuously improved drag and drop system. By using keyboard navigation instead of a mouse, you can significantly speed up your work. [role="screenshot"] -image::images/lens_drag_drop_1.png[Presented Lens drag and drop] - -Follow the instructions below to take advantage of drag and drop keyboard navigation: +image::images/lens_drag_drop_1.gif[Presented Lens drag and drop] . Set a focus on the chosen item. Most of the draggable elements have two focus states. The inner focus state opens a panel with more detailed information or options. The outer one allows dragging an element. Tab through the page until you get the outer focus state on the chosen element: + [role="screenshot"] image::images/lens_drag_drop_2.png[Lens drag and drop focus state] -. Press space or enter to start dragging an item. -. Use left and right arrows to select a drop target outside of the group. -. Use up and down arrows to reorder item's position in the group if the item is reorderable. +Complete the following actions: + +. Press Space bar to start dragging an item. + +. Use Left and Right arrows to select where you want to drop the field. + +. To duplicate an operation, use Left and Right arrows to select the `Drop a field or click to add` in the same group. + + [role="screenshot"] image::images/lens_drag_drop_3.gif[Using drag and drop to reorder] -. Press space or enter to confirm. -. Press escape to cancel dragging. +. To reorder the fields in the group, use Up and Down arrows. + +. Press Space bar to confirm. + +. To cancel the action, press Esc. [float] [[lens-faq]]