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}"
data-plain-id="${id}">
</div>
......@@ -29,4 +29,4 @@
% if status in ['unsubmitted', 'correct', 'incorrect', 'incomplete']:
</div>
% endif
</section>
</div>
......@@ -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 () {
......
......@@ -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);
}
},
......
......@@ -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;
......
......@@ -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>'
......
......@@ -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>'
);
......
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