MDL-80426 qtype_ordering: Remove the unintuitive keyboard handling code

Users can now rearrange options using the move buttons that each option
have, therefore there is no need for the current unintuitive keyboard
interaction implementation in the ordering question type plugin.

question/type/ordering/amd/src/drag_reorder.js

@@ -26,7 +26,6 @@
 
 import $ from 'jquery';
 import drag from 'core/dragdrop';
-import keys from 'core/key_codes';
 import Templates from 'core/templates';
 import Notification from 'core/notification';
 
@@ -101,10 +100,6 @@ export default class DragReorder {
         this.orderList = document.querySelector(this.config.list);
 
         this.startListeners();
-
-        // Make the items tabbable.
-        // TODO: This can be removed once we move to templates and add the tabindex there.
-        $(this.combineSelectors(config.list, config.item)).attr('tabindex', '0');
     }
 
     /**
@@ -128,7 +123,6 @@ export default class DragReorder {
         // Set up the list listeners for moving list items around.
         this.orderList.addEventListener('mousedown', pointerHandle);
         this.orderList.addEventListener('touchstart', pointerHandle);
-        this.orderList.addEventListener('keydown', this.itemMovedByKeyboard.bind(this));
         this.orderList.addEventListener('click', this.itemMovedByClick.bind(this));
     }
 
@@ -214,11 +208,8 @@ export default class DragReorder {
 
     /**
      * End dragging.
-     *
-     * @param {number} x X co-ordinate
-     * @param {number} y Y co-ordinate
      */
-    dragEnd(x, y) {
+    dragEnd() {
         if (typeof this.config.reorderEnd !== 'undefined') {
             this.config.reorderEnd(this.itemDragging.closest(this.config.list), this.itemDragging);
         }
@@ -227,10 +218,6 @@ export default class DragReorder {
             // Order has changed, call the callback.
             this.config.reorderDone(this.itemDragging.closest(this.config.list), this.itemDragging, this.getCurrentOrder());
 
-        } else if (new Date().getTime() - this.dragStart.time < 500 &&
-            Math.abs(this.dragStart.x - x) < 10 && Math.abs(this.dragStart.y - y) < 10) {
-            // This was really a click. Set the focus on the current item.
-            this.itemDragging[0].focus();
         }
 
         // Clean up after the drag is finished.
@@ -241,49 +228,6 @@ export default class DragReorder {
         this.dragStart = null;
     }
 
-    /**
-     * Items can be moved and placed using certain keys.
-     * Tab for tabbing though and choose the item to be moved
-     * space, arrow-right arrow-down for moving current element forwards.
-     * arrow-right arrow-down for moving the current element backwards.
-     *
-     * @param {Event} e The keyboard event.
-     */
-    itemMovedByKeyboard(e) {
-        if (e.target.closest(this.config.item)) {
-            this.itemDragging = $(e.target.closest(this.config.item));
-
-            // Store the current state of the list.
-            this.originalOrder = this.getCurrentOrder();
-
-            switch (e.keyCode) {
-                case keys.arrowRight:
-                case keys.arrowDown:
-                    e.preventDefault();
-                    e.stopPropagation();
-                    if (this.itemDragging.next().length) {
-                        this.itemDragging.next().insertBefore(this.itemDragging);
-                    }
-                    break;
-
-                case keys.arrowLeft:
-                case keys.arrowUp:
-                    e.preventDefault();
-                    e.stopPropagation();
-                    if (this.itemDragging.prev().length) {
-                        this.itemDragging.prev().insertAfter(this.itemDragging);
-                    }
-                    break;
-            }
-
-            // After we have potentially moved the item, we need to check if the order has changed.
-            if (!this.arrayEquals(this.originalOrder, this.getCurrentOrder())) {
-                // Order has changed, call the callback.
-                this.config.reorderDone(this.itemDragging.closest(this.config.list), this.itemDragging, this.getCurrentOrder());
-            }
-        }
-    }
-
     /**
      * Handles the movement of an item by click.
      *
@@ -332,26 +276,6 @@ export default class DragReorder {
         }
     }
 
-    /**
-     * TODO: Once the tabindex is added to the template, this can be removed.
-     * Our outer and inner are two CSS selectors, which may contain commas.
-     * We want to combine them safely. So for instance combineSelectors('a, b', 'c, d')
-     * gives 'a c, a d, b c, b d'.
-     *
-     * @param {String} outer The selector for the outer element.
-     * @param {String} inner The selector for the inner element.
-     * @returns {String} The combined selector used to listen to the list item.
-     */
-    combineSelectors(outer, inner) {
-        let combined = [];
-        outer.split(',').forEach(firstSelector => {
-            inner.split(',').forEach(secondSelector => {
-                combined.push(firstSelector.trim() + ' ' + secondSelector.trim());
-            });
-        });
-        return combined.join(', ');
-    }
-
     /**
      * Get the x-position of the middle of the DOM node represented by the given jQuery object.
      *

question/type/ordering/styles.css

@@ -32,10 +32,6 @@
     cursor: move;
     margin-left: 26px; /* The margin is needed for the list-style-type in numberingxxx classes */
 }
-.que.ordering .sortablelist li.sortableitem:focus {
-    border-color: #0a0;
-    box-shadow: 0 0 5px 5px rgba(255, 255, 150, 1);
-}
 
 .que.ordering .sortablelist li.sortableitem:first-of-type [data-action="move-backward"],
 .que.ordering .sortablelist li.sortableitem:last-of-type [data-action="move-forward"] {