fixing drag and drop

common/lib/capa/capa/templates/drag_and_drop_input.html

@@ -1,4 +1,4 @@
-<section id="inputtype_${id}" class="capa_inputtype" >
+<div id="inputtype_${id}" class="capa_inputtype" role="application">
     <div class="drag_and_drop_problem_div" id="drag_and_drop_div_${id}"
      data-plain-id="${id}">
     </div>
@@ -29,4 +29,4 @@
     % if status in ['unsubmitted', 'correct', 'incorrect', 'incomplete']:
         </div>
     % endif
-</section>
+</div>

common/static/js/capa/drag_and_drop/base_image.js

@@ -17,7 +17,7 @@ define([], function () {
             '></div>'
         );
 
-        state.baseImageEl = $('<img />');
+        state.baseImageEl = $('<img alt="drop target" />');
 
         state.baseImageEl.attr('src', state.config.baseImage);
         state.baseImageEl.load(function () {

common/static/js/capa/drag_and_drop/draggable_events.js

@@ -28,6 +28,7 @@ return {
             if (this.numDraggablesOnMe > 0) {
                 return;
             }
+            this.containerEl.attr('aria-grabbed', 'true');
 
             // If this draggable is just being dragged out of the
             // container, we must perform some additional tasks.
@@ -63,6 +64,7 @@ return {
                 });
                 this.iconEl.appendTo(this.state.baseImageEl.parent());
 
+
                 if (this.labelEl !== null) {
                     if (this.isOriginal === true) {
                         this.labelEl.detach();
@@ -98,6 +100,7 @@ return {
     'mouseUp': function () {
         if (this.mousePressed === true) {
             this.state.currentMovingDraggable = null;
+            this.containerEl.attr('aria-grabbed', 'false');
 
             this.checkLandingElement();
         }

common/static/js/capa/drag_and_drop/draggables.js

@@ -64,7 +64,7 @@ define(['js/capa/drag_and_drop/draggable_events', 'js/capa/drag_and_drop/draggab
                                 'color: black; ' +
                                 'font-size: 0.95em; ' +
                             '" ' +
-                        '>' +
+                        'role="label">' +
                             draggableObj.originalConfigObj.label +
                         '</div>'
                     );
@@ -153,6 +153,8 @@ define(['js/capa/drag_and_drop/draggable_events', 'js/capa/drag_and_drop/draggab
             'mouseDown': draggableEvents.mouseDown,
             'mouseUp': draggableEvents.mouseUp,
             'mouseMove': draggableEvents.mouseMove,
+            'keydown': draggableEvents.keyDown,
+            'keyup': draggableEvents.keyDown,
 
             'checkLandingElement': draggableLogic.checkLandingElement,
             'checkIfOnTarget': draggableLogic.checkIfOnTarget,
@@ -181,8 +183,9 @@ define(['js/capa/drag_and_drop/draggable_events', 'js/capa/drag_and_drop/draggab
                     'border-right: 1px solid #CCC; ' +
                     'text-align: center; ' +
                     'position: relative; ' +
+                    'cursor: pointer; ' +
                 '" ' +
-                '></div>'
+                'tabindex="0" aria-grabbed="false" role="listitem"></div>'
         );
 
         draggableObj.containerEl.appendTo(state.sliderEl);

common/static/js/capa/drag_and_drop/targets.js

@@ -117,7 +117,7 @@ define([], function () {
                         'color: #009fe2; ' +
                         'cursor: pointer; ' +
                     '" ' +
-                '>0</div>'
+                'aria-dropeffect="move">0</div>'
             );
         } else {
             numTextEl = null;