support aria-grabbed and aria-dropeffect

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

@@ -1,4 +1,4 @@
-<div id="inputtype_${id}" class="capa_inputtype" role="application">
+<div id="inputtype_${id}" class="capa_inputtype">
     <div class="drag_and_drop_problem_div" id="drag_and_drop_div_${id}"
      data-plain-id="${id}">
     </div>

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

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

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

@@ -28,7 +28,6 @@ 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.
@@ -84,6 +83,9 @@ return {
                 if (this.isOriginal === true) {
                     this.state.numDraggablesInSlider -= 1;
                 }
+                SR.readText(gettext('dragging out of slider'));
+            } else {
+                SR.readText(gettext('dragging'));
             }
 
             this.zIndex = 1000;
@@ -91,7 +93,8 @@ return {
             if (this.labelEl !== null) {
                 this.labelEl.css('z-index', '1000');
             }
-
+            this.iconEl.attr('aria-grabbed', 'true').focus();
+            this.toggleTargets(true);
             this.mousePressed = true;
             this.state.currentMovingDraggable = this;
         }
@@ -100,9 +103,15 @@ return {
     'mouseUp': function () {
         if (this.mousePressed === true) {
             this.state.currentMovingDraggable = null;
-            this.containerEl.attr('aria-grabbed', 'false');
+            this.iconEl.attr('aria-grabbed', 'false');
 
             this.checkLandingElement();
+            if (this.inContainer === true) {
+                SR.readText(gettext('dropped in slider'));
+            } else {
+                SR.readText(gettext('dropped on target'));
+            }
+            this.toggleTargets(false);
         }
     },
 

common/static/js/capa/drag_and_drop/draggable_logic.js

@@ -236,6 +236,17 @@ return {
         return false;
     },
 
+    'toggleTargets': function (onoff) {
+        var c1, target, effect;
+        effect = (onoff ? 'move' : undefined);
+        this.state.baseImageEl.attr('aria-dropeffect', effect);
+
+        for (c1 = 0; c1 < this.state.targets.length; c1 += 1) {
+            target = this.state.targets[c1];
+            target.targetEl.attr('aria-dropeffect', effect);
+        }
+    },
+
     'snapToTarget': function (target) {
         var offset;
 

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

@@ -153,8 +153,6 @@ 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,
@@ -162,6 +160,7 @@ define(['js/capa/drag_and_drop/draggable_events', 'js/capa/drag_and_drop/draggab
             'correctZIndexes': draggableLogic.correctZIndexes,
             'moveBackToSlider': draggableLogic.moveBackToSlider,
             'moveDraggableTo': draggableLogic.moveDraggableTo,
+            'toggleTargets': draggableLogic.toggleTargets,
 
             'makeDraggableCopy': makeDraggableCopy,
 
@@ -183,9 +182,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; ' +
+                    'cursor: move; ' +
                 '" ' +
-                'tabindex="0" aria-grabbed="false" role="listitem"></div>'
+                'role="listitem"></div>'
         );
 
         draggableObj.containerEl.appendTo(state.sliderEl);
@@ -240,6 +239,7 @@ define(['js/capa/drag_and_drop/draggable_events', 'js/capa/drag_and_drop/draggab
                                 'position: absolute; ' +
                                 'color: black; ' +
                                 'font-size: 0.95em; ' +
+                                'cursor: move; ' +
                             '" ' +
                         '>' +
                             obj.label +
@@ -279,7 +279,9 @@ define(['js/capa/drag_and_drop/draggable_events', 'js/capa/drag_and_drop/draggab
                             'position: absolute; ' +
                             'color: black; ' +
                             'font-size: 0.95em; ' +
+                            'cursor: move; ' +
                         '" ' +
+                        'tabindex="0" aria-grabbed="false" role="listitem"' +
                     '>' +
                         obj.label +
                     '</div>'

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

@@ -86,9 +86,8 @@ define([], function () {
                     'left: ' + obj.x + 'px; ' +
                     borderCss +
                 '" ' +
-            '></div>'
+            'aria-dropeffect=""></div>'
         );
-
         if (fromTargetField === true) {
             targetEl.appendTo(draggableObj.iconEl);
         } else {
@@ -115,9 +114,8 @@ define([], function () {
                         'background-color: white; ' +
                         'font-size: 0.95em; ' +
                         'color: #009fe2; ' +
-                        'cursor: pointer; ' +
                     '" ' +
-                'aria-dropeffect="move">0</div>'
+                '>0</div>'
             );
         } else {
             numTextEl = null;