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 @@ - + @@ -29,4 +29,4 @@ % if status in ['unsubmitted', 'correct', 'incorrect', 'incomplete']: % endif - + 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 () { '>' ); - state.baseImageEl = $(''); + state.baseImageEl = $(''); 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 + '' ); @@ -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; ' + '" ' + - '>' + 'tabindex="0" aria-grabbed="false" role="listitem">' ); 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' + 'aria-dropeffect="move">0' ); } else { numTextEl = null;