Merge pull request #3254 from edx/dcs/a11y-dragdrop

This fixes a few accessibility problems with 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">
     <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,9 @@ define([], function () {
             '></div>'
         );
 
-        state.baseImageEl = $('<img />');
+        state.baseImageEl = $('<img />', {
+                alt: gettext("Drop target image")
+            });
 
         state.baseImageEl.attr('src', state.config.baseImage);
         state.baseImageEl.load(function () {

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

@@ -82,6 +82,10 @@ return {
                 if (this.isOriginal === true) {
                     this.state.numDraggablesInSlider -= 1;
                 }
+                // SR: global "screen reader" object in accessibility_tools.js
+                window.SR.readText(gettext('dragging out of slider'));
+            } else {
+                window.SR.readText(gettext('dragging'));
             }
 
             this.zIndex = 1000;
@@ -89,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;
         }
@@ -98,8 +103,15 @@ return {
     'mouseUp': function () {
         if (this.mousePressed === true) {
             this.state.currentMovingDraggable = null;
+            this.iconEl.attr('aria-grabbed', 'false');
 
             this.checkLandingElement();
+            if (this.inContainer === true) {
+                window.SR.readText(gettext('dropped in slider'));
+            } else {
+                window.SR.readText(gettext('dropped on target'));
+            }
+            this.toggleTargets(false);
         }
     },
 

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

@@ -236,6 +236,15 @@ return {
         return false;
     },
 
+    'toggleTargets': function (isEnabled) {
+        var effect = (isEnabled ? 'move' : undefined);
+        this.state.baseImageEl.attr('aria-dropeffect', effect);
+
+        $.each(this.state.targets, function (target) {
+            target.targetEl.attr('aria-dropeffect', effect);
+        });
+    },
+
     'snapToTarget': function (target) {
         var offset;
 

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>'
                     );
@@ -160,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,
 
@@ -181,8 +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: move; ' +
                 '" ' +
-                '></div>'
+                'role="listitem"></div>'
         );
 
         draggableObj.containerEl.appendTo(state.sliderEl);
@@ -237,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 +
@@ -276,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,7 +114,6 @@ define([], function () {
                         'background-color: white; ' +
                         'font-size: 0.95em; ' +
                         'color: #009fe2; ' +
-                        'cursor: pointer; ' +
                     '" ' +
                 '>0</div>'
             );