From 232df30b3e6696639216684fa1c6610269fdf1d3 Mon Sep 17 00:00:00 2001 From: "Dave St.Germain" Date: Mon, 7 Apr 2014 13:28:06 -0400 Subject: [PATCH] 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 @@ -
+
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 () { '>
' ); - state.baseImageEl = $('drop target'); + state.baseImageEl = $('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">
' + 'role="listitem">' ); 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 + '' 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 + '" ' + - '>' + 'aria-dropeffect="">' ); - 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' + '>0' ); } else { numTextEl = null;