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..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 @@ - + @@ -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..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 () { '>' ); - state.baseImageEl = $(''); + state.baseImageEl = $('', { + 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 c35531a493..03553c27a8 100644 --- a/common/static/js/capa/drag_and_drop/draggable_events.js +++ b/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); } }, 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..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,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; diff --git a/common/static/js/capa/drag_and_drop/draggables.js b/common/static/js/capa/drag_and_drop/draggables.js index 9c2222dc47..a45bc519a3 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 + '' ); @@ -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; ' + '" ' + - '>' + 'role="listitem">' ); 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 + '' diff --git a/common/static/js/capa/drag_and_drop/targets.js b/common/static/js/capa/drag_and_drop/targets.js index dbfc5d50ef..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,7 +114,6 @@ define([], function () { 'background-color: white; ' + 'font-size: 0.95em; ' + 'color: #009fe2; ' + - 'cursor: pointer; ' + '" ' + '>0' );