From f4391b5eb9b088f02c128541363c28976725e6fe Mon Sep 17 00:00:00 2001
From: "Dave St.Germain" <dstgermain@edx.org>
Date: Tue, 1 Apr 2014 10:10:43 -0400
Subject: [PATCH 1/3] fixing drag and drop

---
 common/lib/capa/capa/templates/drag_and_drop_input.html | 4 ++--
 common/static/js/capa/drag_and_drop/base_image.js       | 2 +-
 common/static/js/capa/drag_and_drop/draggable_events.js | 3 +++
 common/static/js/capa/drag_and_drop/draggables.js       | 7 +++++--
 common/static/js/capa/drag_and_drop/targets.js          | 2 +-
 5 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/common/lib/capa/capa/templates/drag_and_drop_input.html b/common/lib/capa/capa/templates/drag_and_drop_input.html
index 589f9c4f57..499f8b3668 100644
--- a/common/lib/capa/capa/templates/drag_and_drop_input.html
+++ b/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>
diff --git a/common/static/js/capa/drag_and_drop/base_image.js b/common/static/js/capa/drag_and_drop/base_image.js
index eec64e230b..e836176bb3 100644
--- a/common/static/js/capa/drag_and_drop/base_image.js
+++ b/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 () {
diff --git a/common/static/js/capa/drag_and_drop/draggable_events.js b/common/static/js/capa/drag_and_drop/draggable_events.js
index c35531a493..215bd78432 100644
--- a/common/static/js/capa/drag_and_drop/draggable_events.js
+++ b/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();
         }
diff --git a/common/static/js/capa/drag_and_drop/draggables.js b/common/static/js/capa/drag_and_drop/draggables.js
index 9c2222dc47..cf21432a58 100644
--- a/common/static/js/capa/drag_and_drop/draggables.js
+++ b/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);
diff --git a/common/static/js/capa/drag_and_drop/targets.js b/common/static/js/capa/drag_and_drop/targets.js
index dbfc5d50ef..389eab821c 100644
--- a/common/static/js/capa/drag_and_drop/targets.js
+++ b/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;

From 232df30b3e6696639216684fa1c6610269fdf1d3 Mon Sep 17 00:00:00 2001
From: "Dave St.Germain" <dstgermain@edx.org>
Date: Mon, 7 Apr 2014 13:28:06 -0400
Subject: [PATCH 2/3] support aria-grabbed and aria-dropeffect

---
 .../capa/capa/templates/drag_and_drop_input.html  |  2 +-
 common/static/js/capa/drag_and_drop/base_image.js |  2 +-
 .../js/capa/drag_and_drop/draggable_events.js     | 15 ++++++++++++---
 .../js/capa/drag_and_drop/draggable_logic.js      | 11 +++++++++++
 common/static/js/capa/drag_and_drop/draggables.js | 10 ++++++----
 common/static/js/capa/drag_and_drop/targets.js    |  6 ++----
 6 files changed, 33 insertions(+), 13 deletions(-)

diff --git a/common/lib/capa/capa/templates/drag_and_drop_input.html b/common/lib/capa/capa/templates/drag_and_drop_input.html
index 499f8b3668..29eb629d93 100644
--- a/common/lib/capa/capa/templates/drag_and_drop_input.html
+++ b/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>
diff --git a/common/static/js/capa/drag_and_drop/base_image.js b/common/static/js/capa/drag_and_drop/base_image.js
index e836176bb3..88dfea69c9 100644
--- a/common/static/js/capa/drag_and_drop/base_image.js
+++ b/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 () {
diff --git a/common/static/js/capa/drag_and_drop/draggable_events.js b/common/static/js/capa/drag_and_drop/draggable_events.js
index 215bd78432..ca7cc1b23e 100644
--- a/common/static/js/capa/drag_and_drop/draggable_events.js
+++ b/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);
         }
     },
 
diff --git a/common/static/js/capa/drag_and_drop/draggable_logic.js b/common/static/js/capa/drag_and_drop/draggable_logic.js
index a850595c77..f746e6aad0 100644
--- a/common/static/js/capa/drag_and_drop/draggable_logic.js
+++ b/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;
 
diff --git a/common/static/js/capa/drag_and_drop/draggables.js b/common/static/js/capa/drag_and_drop/draggables.js
index cf21432a58..a45bc519a3 100644
--- a/common/static/js/capa/drag_and_drop/draggables.js
+++ b/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>'
diff --git a/common/static/js/capa/drag_and_drop/targets.js b/common/static/js/capa/drag_and_drop/targets.js
index 389eab821c..28e839d98e 100644
--- a/common/static/js/capa/drag_and_drop/targets.js
+++ b/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;

From 285c07fc221f38de2ace918eabf32b7a4c02eb62 Mon Sep 17 00:00:00 2001
From: "Dave St.Germain" <dstgermain@edx.org>
Date: Thu, 22 May 2014 10:06:10 -0400
Subject: [PATCH 3/3] Addressed review feedback.

---
 common/static/js/capa/drag_and_drop/base_image.js      |  4 +++-
 .../static/js/capa/drag_and_drop/draggable_events.js   | 10 +++++-----
 common/static/js/capa/drag_and_drop/draggable_logic.js | 10 ++++------
 3 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/common/static/js/capa/drag_and_drop/base_image.js b/common/static/js/capa/drag_and_drop/base_image.js
index 88dfea69c9..8681003347 100644
--- a/common/static/js/capa/drag_and_drop/base_image.js
+++ b/common/static/js/capa/drag_and_drop/base_image.js
@@ -17,7 +17,9 @@ define([], function () {
             '></div>'
         );
 
-        state.baseImageEl = $('<img alt="drop target image" />');
+        state.baseImageEl = $('<img />', {
+                alt: gettext("Drop target image")
+            });
 
         state.baseImageEl.attr('src', state.config.baseImage);
         state.baseImageEl.load(function () {
diff --git a/common/static/js/capa/drag_and_drop/draggable_events.js b/common/static/js/capa/drag_and_drop/draggable_events.js
index ca7cc1b23e..03553c27a8 100644
--- a/common/static/js/capa/drag_and_drop/draggable_events.js
+++ b/common/static/js/capa/drag_and_drop/draggable_events.js
@@ -63,7 +63,6 @@ return {
                 });
                 this.iconEl.appendTo(this.state.baseImageEl.parent());
 
-
                 if (this.labelEl !== null) {
                     if (this.isOriginal === true) {
                         this.labelEl.detach();
@@ -83,9 +82,10 @@ return {
                 if (this.isOriginal === true) {
                     this.state.numDraggablesInSlider -= 1;
                 }
-                SR.readText(gettext('dragging out of slider'));
+                // SR: global "screen reader" object in accessibility_tools.js
+                window.SR.readText(gettext('dragging out of slider'));
             } else {
-                SR.readText(gettext('dragging'));
+                window.SR.readText(gettext('dragging'));
             }
 
             this.zIndex = 1000;
@@ -107,9 +107,9 @@ return {
 
             this.checkLandingElement();
             if (this.inContainer === true) {
-                SR.readText(gettext('dropped in slider'));
+                window.SR.readText(gettext('dropped in slider'));
             } else {
-                SR.readText(gettext('dropped on target'));
+                window.SR.readText(gettext('dropped on target'));
             }
             this.toggleTargets(false);
         }
diff --git a/common/static/js/capa/drag_and_drop/draggable_logic.js b/common/static/js/capa/drag_and_drop/draggable_logic.js
index f746e6aad0..e7db461a37 100644
--- a/common/static/js/capa/drag_and_drop/draggable_logic.js
+++ b/common/static/js/capa/drag_and_drop/draggable_logic.js
@@ -236,15 +236,13 @@ return {
         return false;
     },
 
-    'toggleTargets': function (onoff) {
-        var c1, target, effect;
-        effect = (onoff ? 'move' : undefined);
+    'toggleTargets': function (isEnabled) {
+        var effect = (isEnabled ? 'move' : undefined);
         this.state.baseImageEl.attr('aria-dropeffect', effect);
 
-        for (c1 = 0; c1 < this.state.targets.length; c1 += 1) {
-            target = this.state.targets[c1];
+        $.each(this.state.targets, function (target) {
             target.targetEl.attr('aria-dropeffect', effect);
-        }
+        });
     },
 
     'snapToTarget': function (target) {