Commit 7bbffd8b by Dave St.Germain

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

This fixes a few accessibility problems with drag and drop
parents dfbfd7b2 285c07fc
<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}" <div class="drag_and_drop_problem_div" id="drag_and_drop_div_${id}"
data-plain-id="${id}"> data-plain-id="${id}">
</div> </div>
...@@ -29,4 +29,4 @@ ...@@ -29,4 +29,4 @@
% if status in ['unsubmitted', 'correct', 'incorrect', 'incomplete']: % if status in ['unsubmitted', 'correct', 'incorrect', 'incomplete']:
</div> </div>
% endif % endif
</section> </div>
...@@ -17,7 +17,9 @@ define([], function () { ...@@ -17,7 +17,9 @@ define([], function () {
'></div>' '></div>'
); );
state.baseImageEl = $('<img />'); state.baseImageEl = $('<img />', {
alt: gettext("Drop target image")
});
state.baseImageEl.attr('src', state.config.baseImage); state.baseImageEl.attr('src', state.config.baseImage);
state.baseImageEl.load(function () { state.baseImageEl.load(function () {
......
...@@ -82,6 +82,10 @@ return { ...@@ -82,6 +82,10 @@ return {
if (this.isOriginal === true) { if (this.isOriginal === true) {
this.state.numDraggablesInSlider -= 1; 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; this.zIndex = 1000;
...@@ -89,7 +93,8 @@ return { ...@@ -89,7 +93,8 @@ return {
if (this.labelEl !== null) { if (this.labelEl !== null) {
this.labelEl.css('z-index', '1000'); this.labelEl.css('z-index', '1000');
} }
this.iconEl.attr('aria-grabbed', 'true').focus();
this.toggleTargets(true);
this.mousePressed = true; this.mousePressed = true;
this.state.currentMovingDraggable = this; this.state.currentMovingDraggable = this;
} }
...@@ -98,8 +103,15 @@ return { ...@@ -98,8 +103,15 @@ return {
'mouseUp': function () { 'mouseUp': function () {
if (this.mousePressed === true) { if (this.mousePressed === true) {
this.state.currentMovingDraggable = null; this.state.currentMovingDraggable = null;
this.iconEl.attr('aria-grabbed', 'false');
this.checkLandingElement(); this.checkLandingElement();
if (this.inContainer === true) {
window.SR.readText(gettext('dropped in slider'));
} else {
window.SR.readText(gettext('dropped on target'));
}
this.toggleTargets(false);
} }
}, },
......
...@@ -236,6 +236,15 @@ return { ...@@ -236,6 +236,15 @@ return {
return false; 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) { 'snapToTarget': function (target) {
var offset; var offset;
......
...@@ -64,7 +64,7 @@ define(['js/capa/drag_and_drop/draggable_events', 'js/capa/drag_and_drop/draggab ...@@ -64,7 +64,7 @@ define(['js/capa/drag_and_drop/draggable_events', 'js/capa/drag_and_drop/draggab
'color: black; ' + 'color: black; ' +
'font-size: 0.95em; ' + 'font-size: 0.95em; ' +
'" ' + '" ' +
'>' + 'role="label">' +
draggableObj.originalConfigObj.label + draggableObj.originalConfigObj.label +
'</div>' '</div>'
); );
...@@ -160,6 +160,7 @@ define(['js/capa/drag_and_drop/draggable_events', 'js/capa/drag_and_drop/draggab ...@@ -160,6 +160,7 @@ define(['js/capa/drag_and_drop/draggable_events', 'js/capa/drag_and_drop/draggab
'correctZIndexes': draggableLogic.correctZIndexes, 'correctZIndexes': draggableLogic.correctZIndexes,
'moveBackToSlider': draggableLogic.moveBackToSlider, 'moveBackToSlider': draggableLogic.moveBackToSlider,
'moveDraggableTo': draggableLogic.moveDraggableTo, 'moveDraggableTo': draggableLogic.moveDraggableTo,
'toggleTargets': draggableLogic.toggleTargets,
'makeDraggableCopy': makeDraggableCopy, 'makeDraggableCopy': makeDraggableCopy,
...@@ -181,8 +182,9 @@ define(['js/capa/drag_and_drop/draggable_events', 'js/capa/drag_and_drop/draggab ...@@ -181,8 +182,9 @@ define(['js/capa/drag_and_drop/draggable_events', 'js/capa/drag_and_drop/draggab
'border-right: 1px solid #CCC; ' + 'border-right: 1px solid #CCC; ' +
'text-align: center; ' + 'text-align: center; ' +
'position: relative; ' + 'position: relative; ' +
'cursor: move; ' +
'" ' + '" ' +
'></div>' 'role="listitem"></div>'
); );
draggableObj.containerEl.appendTo(state.sliderEl); draggableObj.containerEl.appendTo(state.sliderEl);
...@@ -237,6 +239,7 @@ define(['js/capa/drag_and_drop/draggable_events', 'js/capa/drag_and_drop/draggab ...@@ -237,6 +239,7 @@ define(['js/capa/drag_and_drop/draggable_events', 'js/capa/drag_and_drop/draggab
'position: absolute; ' + 'position: absolute; ' +
'color: black; ' + 'color: black; ' +
'font-size: 0.95em; ' + 'font-size: 0.95em; ' +
'cursor: move; ' +
'" ' + '" ' +
'>' + '>' +
obj.label + obj.label +
...@@ -276,7 +279,9 @@ define(['js/capa/drag_and_drop/draggable_events', 'js/capa/drag_and_drop/draggab ...@@ -276,7 +279,9 @@ define(['js/capa/drag_and_drop/draggable_events', 'js/capa/drag_and_drop/draggab
'position: absolute; ' + 'position: absolute; ' +
'color: black; ' + 'color: black; ' +
'font-size: 0.95em; ' + 'font-size: 0.95em; ' +
'cursor: move; ' +
'" ' + '" ' +
'tabindex="0" aria-grabbed="false" role="listitem"' +
'>' + '>' +
obj.label + obj.label +
'</div>' '</div>'
......
...@@ -86,9 +86,8 @@ define([], function () { ...@@ -86,9 +86,8 @@ define([], function () {
'left: ' + obj.x + 'px; ' + 'left: ' + obj.x + 'px; ' +
borderCss + borderCss +
'" ' + '" ' +
'></div>' 'aria-dropeffect=""></div>'
); );
if (fromTargetField === true) { if (fromTargetField === true) {
targetEl.appendTo(draggableObj.iconEl); targetEl.appendTo(draggableObj.iconEl);
} else { } else {
...@@ -115,7 +114,6 @@ define([], function () { ...@@ -115,7 +114,6 @@ define([], function () {
'background-color: white; ' + 'background-color: white; ' +
'font-size: 0.95em; ' + 'font-size: 0.95em; ' +
'color: #009fe2; ' + 'color: #009fe2; ' +
'cursor: pointer; ' +
'" ' + '" ' +
'>0</div>' '>0</div>'
); );
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment