Address review comments.

drag_and_drop_v2/public/css/drag_and_drop.css

@@ -116,7 +116,8 @@
 
 /* Focused option */
 .xblock--drag-and-drop .drag-container .item-bank .option:focus,
-.xblock--drag-and-drop .drag-container .item-bank .option:hover {
+.xblock--drag-and-drop .drag-container .item-bank .option:hover,
+.xblock--drag-and-drop .drag-container .item-bank .option[aria-grabbed='true'] {
     outline-width: 2px;
     outline-style: solid;
     outline-offset: -4px;

drag_and_drop_v2/public/js/drag_and_drop.js

@@ -13,7 +13,6 @@ function DragAndDropBlock(runtime, element, configuration) {
     var __vdom = virtualDom.h();  // blank virtual DOM
 
     // Keyboard accessibility
-    var CTRL = 17;
     var ESC = 27;
     var RET = 13;
     var SPC = 32;
@@ -21,7 +20,6 @@ function DragAndDropBlock(runtime, element, configuration) {
     var M = 77;
     var QUESTION_MARK = 63;
 
-    var ctrlDown = false;
     var placementMode = false;
     var $selectedItem;
     var $focusedElement;
@@ -213,16 +211,17 @@ function DragAndDropBlock(runtime, element, configuration) {
         });
     };
 
-    var isCycleKey = function(key) {
-        return !ctrlDown && key === TAB;
+    var isCycleKey = function(evt) {
+        return !evt.ctrlKey && !evt.metaKey && evt.which === TAB;
     };
 
-    var isCancelKey = function(key) {
-        return !ctrlDown && key === ESC;
+    var isCancelKey = function(evt) {
+        return !evt.ctrlKey && !evt.metaKey  && evt.which === ESC;
     };
 
-    var isActionKey = function(key) {
-        if (ctrlDown) {
+    var isActionKey = function(evt) {
+        var key = evt.which;
+        if (evt.ctrlKey || evt.metaKey) {
             return key === M;
         }
         return key === RET || key === SPC;
@@ -286,28 +285,20 @@ function DragAndDropBlock(runtime, element, configuration) {
             var $zone = $(this);
             $zone.on('keydown', function(evt) {
                 if (placementMode) {
-                    var key = evt.which;
-                    if (key === CTRL) {
-                        ctrlDown = true;
-                        return;
-                    }
-                    if (isCycleKey(key)) {
+                    if (isCycleKey(evt)) {
                         focusNextZone(evt, $zone);
-                    } else if (isCancelKey(key)) {
+                    } else if (isCancelKey(evt)) {
                         evt.preventDefault();
                         placementMode = false;
-                    } else if (isActionKey(key)) {
+                        releaseItem($selectedItem);
+                    } else if (isActionKey(evt)) {
                         evt.preventDefault();
                         placementMode = false;
                         placeItem($zone);
+                        releaseItem($selectedItem);
                     }
                 }
             });
-            $zone.on('keyup', function(evt) {
-                if (evt.which === CTRL) {
-                    ctrlDown = false;
-                }
-            });
         });
 
         // Make zone accept items that are dropped using the mouse
@@ -328,23 +319,14 @@ function DragAndDropBlock(runtime, element, configuration) {
 
             // Allow item to be "picked up" using the keyboard
             $item.on('keydown', function(evt) {
-                var key = evt.which;
-                if (key === CTRL) {
-                    ctrlDown = true;
-                    return;
-                }
-                if (isActionKey(key)) {
+                if (isActionKey(evt)) {
                     evt.preventDefault();
                     placementMode = true;
+                    grabItem($item);
                     $selectedItem = $item;
                     $root.find('.target .zone').first().focus();
                 }
             });
-            $item.on('keyup', function(evt) {
-                if (evt.which === CTRL) {
-                    ctrlDown = false;
-                }
-            });
 
             // Make item draggable using the mouse
             try {
@@ -355,18 +337,15 @@ function DragAndDropBlock(runtime, element, configuration) {
                     revert: 'invalid',
                     revertDuration: 150,
                     start: function(evt, ui) {
-                        var item_id = $(this).data('value');
-                        setGrabbedState(item_id, true);
-                        updateDOM();
+                        var $item = $(this);
+                        grabItem($item);
                         publishEvent({
                             event_type: 'xblock.drag-and-drop-v2.item.picked-up',
-                            item_id: item_id
+                            item_id: $item.data('value'),
                         });
                     },
                     stop: function(evt, ui) {
-                        var item_id = $(this).data('value');
-                        setGrabbedState(item_id, false);
-                        updateDOM();
+                        releaseItem($(this));
                     }
                 });
             } catch (e) {
@@ -376,6 +355,18 @@ function DragAndDropBlock(runtime, element, configuration) {
         });
     };
 
+    var grabItem = function($item) {
+        var item_id = $item.data('value');
+        setGrabbedState(item_id, true);
+        updateDOM();
+    };
+
+    var releaseItem = function($item) {
+        var item_id = $item.data('value');
+        setGrabbedState(item_id, false);
+        updateDOM();
+    };
+
     var setGrabbedState = function(item_id, grabbed) {
         for (var i = 0; i < configuration.items.length; i++) {
             if (configuration.items[i].id === item_id) {
@@ -524,10 +515,11 @@ function DragAndDropBlock(runtime, element, configuration) {
             if (item.grabbed !== undefined) {
                 grabbed = item.grabbed;
             }
+            var placed = item_user_state && ('input' in item_user_state || item_user_state.correct_input);
             var itemProperties = {
                 value: item.id,
                 drag_disabled: Boolean(item_user_state || state.finished),
-                class_name: item_user_state && ('input' in item_user_state || item_user_state.correct_input) ? 'fade': undefined,
+                class_name: placed || state.finished ? 'fade' : undefined,
                 xhr_active: (item_user_state && item_user_state.submitting_location),
                 input: input,
                 displayName: item.displayName,

drag_and_drop_v2/public/js/view.js

@@ -176,8 +176,8 @@
                             h('p', gettext('You can complete this exercise using only your keyboard.')),
                             h('ul', [
                                 h('li', gettext('Use "Tab" and "Shift-Tab" to navigate between items and zones.')),
-                                h('li', gettext('Press "Enter" or "Space" on an item to select it for dropping, then navigate to the zone you want to drop it on.')),
-                                h('li', gettext('Press "Enter" or "Space" to drop the item on the current zone.')),
+                                h('li', gettext('Press "Enter", "Space", "Ctrl-m", or "⌘-m" on an item to select it for dropping, then navigate to the zone you want to drop it on.')),
+                                h('li', gettext('Press "Enter", "Space", "Ctrl-m", or "⌘-m" to drop the item on the current zone.')),
                                 h('li', gettext('Press "Escape" if you want to cancel the drop operation (e.g. because you would like to select a different item).')),
                                 h('li', gettext('Press "?" at any time to bring up this dialog.')),
                             ])

tests/integration/test_base.py

@@ -72,6 +72,9 @@ class BaseIntegrationTest(SeleniumBaseTest):
     def _get_keyboard_help_dialog(self):
         return self._page.find_element_by_css_selector(".keyboard-help .keyboard-help-dialog")
 
+    def _get_reset_button(self):
+        return self._page.find_element_by_css_selector('.reset-button')
+
     def _get_feedback(self):
         return self._page.find_element_by_css_selector(".feedback")