Merge pull request #112 from open-craft/mtyaka/a11y-interaction-issues

a11y Interaction Improvements

.travis.yml

@@ -12,7 +12,7 @@ install:
     - "pip install selenium==2.53.0"
     - "pip uninstall -y xblock-drag-and-drop-v2"
     - "python setup.py sdist"
-    - "pip install dist/xblock-drag-and-drop-v2-2.0.13.tar.gz"
+    - "pip install dist/xblock-drag-and-drop-v2-2.0.14.tar.gz"
 script:
     - pep8 drag_and_drop_v2 tests --max-line-length=120
     - pylint drag_and_drop_v2

Changelog.md

+Version 2.0.14 (2017-01-17)
+---------------------------
+
+* Various accessibility improvements (PRs #110, #111, #112)
+
+Version 2.0.13 (2017-01-02)
+---------------------------
+
+* i18n improvements (PR #113)
+
 Version 2.0.12 (2016-11-08)
 ---------------------------
 

drag_and_drop_v2/public/js/drag_and_drop.js

@@ -8,7 +8,8 @@ function DragAndDropTemplates(configuration) {
         }
         return (
             h("div.spinner-wrapper", {key: item.value + '-spinner'}, [
-                h("i.fa.fa-spin.fa-spinner")
+                h("span.fa.fa-spin.fa-spinner", {attributes: {'aria-hidden': true}}),
+                h("span.sr", gettext('Submitting'))
             ])
         );
     };
@@ -53,7 +54,6 @@ function DragAndDropTemplates(configuration) {
 
     var itemTemplate = function(item, ctx) {
         // Define properties
-        var descriptionClassName = "sr description";
         var className = (item.class_name) ? item.class_name : "";
         var zone = getZone(item.zone, ctx) || {};
         if (item.has_image) {
@@ -119,8 +119,8 @@ function DragAndDropTemplates(configuration) {
             var item_description_id = configuration.url_name + '-item-' + item.value + '-description';
             item_content.properties.attributes = { 'aria-describedby': item_description_id };
             item_description = h(
-                'div',
-                { key: item.value + '-description', id: item_description_id, className: descriptionClassName },
+                'div.sr.description',
+                { key: item_description_id, id: item_description_id},
                 description_content
             );
         }
@@ -185,7 +185,7 @@ function DragAndDropTemplates(configuration) {
         var item_wrapper = 'div.item-wrapper.item-align.item-align-' + zone.align;
         var is_item_in_zone = function(i) { return i.is_placed && (i.zone === zone.uid); };
         var items_in_zone = $.grep(ctx.items, is_item_in_zone);
-        var zone_description_id = configuration.url_name + '-zone-' + zone.uid + '-description';
+        var zone_description_id = zone.prefixed_uid + '-description';
         if (items_in_zone.length == 0) {
           var zone_description = h(
             'div',
@@ -221,8 +221,15 @@ function DragAndDropTemplates(configuration) {
                     }
                 },
                 [
-                    h('p', { className: className }, zone.title),
-                    h('p', { className: 'zone-description sr' }, zone.description || gettext("droppable")),
+                    h(
+                        'p',
+                        { className: className },
+                        [
+                            zone.title,
+                            h('span.sr', gettext(', dropzone'))
+                        ]
+                    ),
+                    h('p', { className: 'zone-description sr' }, zone.description || gettext('droppable')),
                     h(item_wrapper, renderCollection(itemTemplate, items_in_zone, ctx)),
                     zone_description
                 ]
@@ -242,10 +249,10 @@ function DragAndDropTemplates(configuration) {
         });
 
         return (
-            h('section.feedback', {}, [
+            h('div.feedback', {attributes: {'role': 'group', 'aria-label': gettext('Feedback')}}, [
                 h(
                     "div.feedback-content",
-                    { attributes: { 'aria-live': 'polite' } },
+                    {},
                     [
                         h('h3.title1', { style: { display: feedback_display } }, gettext('Feedback')),
                         h('div.messages', { style: { display: feedback_display } }, feedback_messages),
@@ -286,27 +293,42 @@ function DragAndDropTemplates(configuration) {
     };
 
     var submitAnswerTemplate = function(ctx) {
-        var attemptsUsedId = "attempts-used-"+configuration.url_name;
-        var attemptsUsedDisplay = (ctx.max_attempts && ctx.max_attempts > 0) ? 'inline': 'none';
+        var submitButtonProperties = {
+            disabled: ctx.disable_submit_button || ctx.submit_spinner,
+            attributes: {}
+        };
+
+        var attemptsUsedInfo = null;
+        if (ctx.max_attempts && ctx.max_attempts > 0) {
+            var attemptsUsedId = "attempts-used-" + configuration.url_name;
+            submitButtonProperties.attributes["aria-describedby"] = attemptsUsedId;
+            var attemptsUsedTemplate = gettext("You have used {used} of {total} attempts.");
+            var attemptsUsedText = attemptsUsedTemplate.
+                replace("{used}", ctx.attempts).replace("{total}", ctx.max_attempts);
+            attemptsUsedInfo = h("span.attempts-used", {id: attemptsUsedId}, attemptsUsedText);
+        }
+
+        var submitSpinner = null;
+        if (ctx.submit_spinner) {
+            submitSpinner = h('span', [
+                h('span.fa.fa-spin.fa-spinner', {attributes: {'aria-hidden': true}}),
+                h('span.sr', gettext('Submitting'))
+            ]);
+        }
 
         return (
-          h("section.action-toolbar-item.submit-answer", {}, [
-              h(
-                  "button.btn-brand.submit-answer-button",
-                  {
-                      disabled: ctx.disable_submit_button || ctx.submit_spinner, 
-                      attributes: {"aria-describedby": attemptsUsedId}},
-                  [
-                      (ctx.submit_spinner ? h("span.fa.fa-spin.fa-spinner") : null),
-                      gettext("Submit")
-                  ]
-              ),
-              h(
-                  "span.attempts-used#"+attemptsUsedId, {style: {display: attemptsUsedDisplay}},
-                  gettext("You have used {used} of {total} attempts.")
-                      .replace("{used}", ctx.attempts).replace("{total}", ctx.max_attempts)
-              )
-          ])
+            h("div.action-toolbar-item.submit-answer", {}, [
+                h(
+                    "button.btn-brand.submit-answer-button",
+                    submitButtonProperties,
+                    [
+                        submitSpinner,
+                        ' ',  // whitespace between spinner icon and text
+                        gettext("Submit")
+                    ]
+                ),
+                attemptsUsedInfo
+            ])
         );
     };
 
@@ -351,7 +373,7 @@ function DragAndDropTemplates(configuration) {
             go_to_beginning_button_class += ' sr';
         }
         return(
-            h("section.action-toolbar-item.sidebar-buttons", {}, [
+            h("div.action-toolbar-item.sidebar-buttons", {}, [
                 sidebarButtonTemplate(
                     go_to_beginning_button_class,
                     "fa-arrow-up",
@@ -397,13 +419,7 @@ function DragAndDropTemplates(configuration) {
         return h(
             popupSelector,
             {
-                style: {display: have_messages ? 'block' : 'none'},
-                attributes: {
-                    "tabindex": "-1",
-                    'aria-live': 'polite',
-                    'aria-atomic': 'true',
-                    'aria-relevant': 'additions',
-                }
+                style: {display: have_messages ? 'block' : 'none'}
             },
             [
                 h(
@@ -491,18 +507,24 @@ function DragAndDropTemplates(configuration) {
 
         return h('div.problem-progress', {
             id: configuration.url_name + '-problem-progress',
-            attributes: {'role': 'status', 'aria-live': 'polite'}
+            attributes: {role: 'status'}
         }, progress_text);
     };
 
     var mainTemplate = function(ctx) {
+        var main_element_properties = {attributes: {role: 'group'}};
         var problemProgress = progressTemplate(ctx);
         var problemTitle = null;
         if (ctx.show_title) {
+            var problem_title_id = configuration.url_name + '-problem-title';
             problemTitle = h('h3.problem-title', {
+                id: problem_title_id,
                 innerHTML: ctx.title_html,
                 attributes: {'aria-describedby': problemProgress.properties.id}
             });
+            main_element_properties.attributes['arial-labelledby'] = problem_title_id;
+        } else {
+            main_element_properties.attributes['aria-label'] = gettext('Drag and Drop Problem');
         }
         var problemHeader = ctx.show_problem_header ? h('h4.title1', gettext('Problem')) : null;
         // Render only items in the bank here, including placeholders.  Placed
@@ -523,36 +545,37 @@ function DragAndDropTemplates(configuration) {
             item_bank_properties.attributes['role'] = 'button';
         }
         return (
-            h('section.themed-xblock.xblock--drag-and-drop', [
+            h('div.themed-xblock.xblock--drag-and-drop', main_element_properties, [
                 problemTitle,
                 problemProgress,
                 h('div', [forwardKeyboardHelpButtonTemplate(ctx)]),
-                h('section.problem', [
+                h('div.problem', [
                     problemHeader,
                     h('p', {innerHTML: ctx.problem_html}),
                 ]),
-                h('section.drag-container', {}, [
+                h('div.drag-container', {}, [
                     h('div.item-bank', item_bank_properties, [
                         renderCollection(itemTemplate, items_in_bank, ctx),
                         renderCollection(itemPlaceholderTemplate, items_placed, ctx)
                     ]),
-                    h('div.target',
-                        {},
-                        [
-                            itemFeedbackPopupTemplate(ctx),
-                            h('div.target-img-wrapper', [
-                                h('img.target-img', {src: ctx.target_img_src, alt: ctx.target_img_description}),
-                            ]
-                        ),
+                    h('div.target', {attributes: {'role': 'group', 'arial-label': gettext('Drop Targets')}}, [
+                        itemFeedbackPopupTemplate(ctx),
+                        h('div.target-img-wrapper', [
+                            h('img.target-img', {src: ctx.target_img_src, alt: ctx.target_img_description}),
+                        ]),
                         renderCollection(zoneTemplate, ctx.zones, ctx)
                     ]),
                 ]),
-                h("section.actions-toolbar", {}, [
+                h("div.actions-toolbar", {attributes: {'role': 'group', 'aria-label': gettext('Actions')}}, [
                     sidebarTemplate(ctx),
                     (ctx.show_submit_answer ? submitAnswerTemplate(ctx) : null),
                 ]),
                 keyboardHelpPopupTemplate(ctx),
                 feedbackTemplate(ctx),
+                h('div.sr.reader-feedback-area', {
+                    attributes: {'aria-live': 'polite', 'aria-atomic': true},
+                    innerHTML: ctx.screen_reader_messages
+                }),
             ])
         );
     };
@@ -664,6 +687,9 @@ function DragAndDropBlock(runtime, element, configuration) {
             // to watch for load events on any child element, since load events do not bubble.
             element.addEventListener('load', webkitFix, true);
 
+            // Remove the spinner and create a blank slate for virtualDom to take over.
+            $root.empty();
+
             applyState();
             initDroppable();
 
@@ -904,7 +930,7 @@ function DragAndDropBlock(runtime, element, configuration) {
         return feedback_msgs_list.map(function(message) { return message.message; }).join('\n');
     };
 
-    var updateDOM = function(state) {
+    var updateDOM = function() {
         var new_vdom = render(state);
         var patches = virtualDom.diff(__vdom, new_vdom);
         root = virtualDom.patch(root, patches);
@@ -912,6 +938,51 @@ function DragAndDropBlock(runtime, element, configuration) {
         __vdom = new_vdom;
     };
 
+    var sr_clear_timeout = null;
+
+    var setScreenReaderMessages = function() {
+        clearTimeout(sr_clear_timeout);
+
+        var pluckMessages = function(feedback_items) {
+            return feedback_items.map(function(item) {
+                return item.message;
+            });
+        };
+        var messages = [];
+        // In standard mode, it makes more sense to read the per-item feedback before overall feedback.
+        if (state.feedback && configuration.mode === DragAndDropBlock.STANDARD_MODE) {
+            messages = messages.concat(pluckMessages(state.feedback));
+        }
+        if (state.overall_feedback) {
+            messages = messages.concat(pluckMessages(state.overall_feedback));
+        }
+        // In assessment mode overall feedback comes first then multiple per-item feedbacks.
+        if (state.feedback && configuration.mode === DragAndDropBlock.ASSESSMENT_MODE) {
+            if (state.feedback.length > 0) {
+                if (!state.last_action_correct) {
+                    messages.push(gettext("Some of your answers were not correct."));
+                }
+                messages = messages.concat(
+                    gettext("Hints:"),
+                    pluckMessages(state.feedback)
+                );
+            }
+        }
+        var paragraphs = messages.map(function(msg) {
+            return '<p>' + msg + '</p>';
+        });
+
+        state.screen_reader_messages = paragraphs.join('');
+
+        // Remove the text on next redraw. This will make screen readers read the message again,
+        // next time the user performs an action, even if next feedback message did not change from
+        // last attempt (for example: if user drops the same item on two wrong zones one after another,
+        // the negative feedback should be read out twice, not only on first drop).
+        sr_clear_timeout = setTimeout(function() {
+            state.screen_reader_messages = '';
+        }, 0);
+    };
+
     var publishEvent = function(data) {
         $.ajax({
             type: 'POST',
@@ -981,16 +1052,18 @@ function DragAndDropBlock(runtime, element, configuration) {
         return false;
     };
 
-    var placeItem = function($zone, $item) {
-        var item_id;
-        if ($item !== undefined) {
-            item_id = $item.data('value');
-        } else {
-            item_id = $selectedItem.data('value');
-        }
-
+    var placeGrabbedItem = function($zone) {
         var zone = String($zone.data('uid'));
         var zone_align = $zone.data('zone_align');
+        var items = configuration.items;
+
+        var item_id;
+        for (var i = 0; i < items.length; i++) {
+            if (items[i].grabbed) {
+                item_id = items[i].id;
+                break;
+            }
+        }
 
         var items_in_zone_count = countItemsInZone(zone, [item_id.toString()]);
         if (configuration.max_items_per_zone && configuration.max_items_per_zone <= items_in_zone_count) {
@@ -1036,18 +1109,17 @@ function DragAndDropBlock(runtime, element, configuration) {
                     } else if (isCancelKey(evt)) {
                         evt.preventDefault();
                         state.keyboard_placement_mode = false;
-                        releaseItem($selectedItem);
+                        releaseGrabbedItems();
                     } else if (isActionKey(evt)) {
                         evt.preventDefault();
                         evt.stopPropagation();
                         state.keyboard_placement_mode = false;
-                        releaseItem($selectedItem);
                         if ($zone.is('.item-bank')) {
                             delete state.items[$selectedItem.data('value')];
-                            applyState();
                         } else {
-                            placeItem($zone);
+                            placeGrabbedItem($zone);
                         }
+                        releaseGrabbedItems();
                     }
                 } else if (isTabKey(evt) && !evt.shiftKey) {
                     // If the user just dropped an item to this zone, next TAB keypress
@@ -1074,8 +1146,7 @@ function DragAndDropBlock(runtime, element, configuration) {
             tolerance: 'pointer',
             drop: function(evt, ui) {
                 var $zone = $(this);
-                var $item = ui.helper;
-                placeItem($zone, $item);
+                placeGrabbedItem($zone);
             }
         });
 
@@ -1087,7 +1158,7 @@ function DragAndDropBlock(runtime, element, configuration) {
                 drop: function(evt, ui) {
                     var $item = ui.helper;
                     var item_id = $item.data('value');
-                    releaseItem($item);
+                    releaseGrabbedItems();
                     delete state.items[item_id];
                     applyState();
                 }
@@ -1140,7 +1211,7 @@ function DragAndDropBlock(runtime, element, configuration) {
                     stop: function(evt, ui) {
                         // Revert to original position.
                         $item.css($item.data('initial-position'));
-                        releaseItem($(this));
+                        releaseGrabbedItems();
                     }
                 });
             } catch (e) {
@@ -1152,31 +1223,27 @@ function DragAndDropBlock(runtime, element, configuration) {
 
     var grabItem = function($item, interaction_type) {
         var item_id = $item.data('value');
-        setGrabbedState(item_id, true, interaction_type);
+        configuration.items.forEach(function(item) {
+            if (item.id === item_id) {
+                item.grabbed = true;
+                item.grabbed_with = interaction_type;
+            } else {
+                item.grabbed = false;
+                delete item.grabbed_with;
+            }
+        });
         closePopup(false);
         // applyState(true) skips destroying and initializing draggable
         applyState(true);
     };
 
-    var releaseItem = function($item) {
-        var item_id = $item.data('value');
-        setGrabbedState(item_id, false);
-        // applyState(true) skips destroying and initializing draggable
-        applyState(true);
-    };
-
-    var setGrabbedState = function(item_id, grabbed, interaction_type) {
+    var releaseGrabbedItems = function() {
         configuration.items.forEach(function(item) {
-            if (item.id === item_id) {
-                if (grabbed) {
-                    item.grabbed = true;
-                    item.grabbed_with = interaction_type;
-                } else {
-                    item.grabbed = false;
-                    delete item.grabbed_with;
-                }
-            }
+            item.grabbed = false;
+            delete item.grabbed_with;
         });
+        // applyState(true) skips destroying and initializing draggable
+        applyState(true);
     };
 
     var destroyDraggable = function() {
@@ -1220,6 +1287,7 @@ function DragAndDropBlock(runtime, element, configuration) {
                         state.finished = true;
                         state.overall_feedback = data.overall_feedback;
                     }
+                    setScreenReaderMessages();
                 }
                 applyState();
                 if (state.feedback && state.feedback.length > 0) {
@@ -1324,6 +1392,7 @@ function DragAndDropBlock(runtime, element, configuration) {
             } else {
                 state.finished = true;
             }
+            setScreenReaderMessages();
         }).always(function() {
             state.submit_spinner = false;
             applyState();
@@ -1451,7 +1520,8 @@ function DragAndDropBlock(runtime, element, configuration) {
             showing_answer: state.showing_answer,
             show_answer_spinner: state.show_answer_spinner,
             disable_go_to_beginning_button: !canGoToBeginning(),
-            show_go_to_beginning_button: state.go_to_beginning_button_visible
+            show_go_to_beginning_button: state.go_to_beginning_button_visible,
+            screen_reader_messages: (state.screen_reader_messages || '')
         };
 
         return renderView(context);

drag_and_drop_v2/templates/html/drag_and_drop.html

 {% load i18n %}
-<section class="themed-xblock xblock--drag-and-drop">
-    <i class="fa fa-spin fa-spinner initial-load-spinner"></i>{% trans "Loading drag and drop problem." %}
-</section>
+<div class="themed-xblock xblock--drag-and-drop">
+  <span class="fa fa-spin fa-spinner initial-load-spinner" aria-hidden="true"></span>
+  {% trans "Loading drag and drop problem." %}
+</div>

drag_and_drop_v2/templates/html/drag_and_drop_edit.html

@@ -4,10 +4,12 @@
 <div class="xblock--drag-and-drop--editor editor-with-buttons">
     {{ js_templates|safe }}
 
-    <section class="drag-builder">
-        <div class="tab feedback-tab">
-
-            <section class="tab-content">
+    <div class="drag-builder">
+        <section class="tab feedback-tab">
+            <header class="tab-header">
+                <h3>{% trans "Basic Settings" %}</h3>
+            </header>
+            <div class="tab-content">
                 <form class="feedback-form">
                     <label class="h4">
                         <span>{% trans fields.display_name.display_name %}</span>
@@ -80,14 +82,14 @@
                         <textarea class="final-feedback">{{ self.data.feedback.finish }}</textarea>
                     </label>
                 </form>
-            </section>
-        </div>
+            </div>
+        </section>
 
-        <div class="tab zones-tab hidden">
+        <section class="tab zones-tab hidden">
             <header class="tab-header">
                 <h3>{% trans "Zones" %}</h3>
             </header>
-            <section class="tab-content">
+            <div class="tab-content">
                 <form class="target-image-form">
                     <label class="h4" for="background-url-{{id_suffix}}">
                         <span>{% trans "Background URL" %}</span>
@@ -114,8 +116,8 @@
                         {% endblocktrans %}
                     </div>
                 </form>
-            </section>
-            <section class="tab-content">
+            </div>
+            <div class="tab-content">
                 <form class="display-labels-form">
                     <h4>{% trans "Zone labels" %}</h4>
                     <label class="checkbox-label">
@@ -130,8 +132,8 @@
                         <span>{% trans "Display zone borders on the image" %}</span>
                     </label>
                 </form>
-            </section>
-            <section class="tab-content">
+            </div>
+            <div class="tab-content">
                 <h4>{% trans "Zone definitions" %}</h4>
                 <div class="zone-editor">
                     <div class="controls">
@@ -147,14 +149,14 @@
                         </div>
                     </div>
                 </div>
-            </section>
-        </div>
+            </div>
+        </section>
 
-        <div class="tab items-tab hidden">
+        <section class="tab items-tab hidden">
             <header class="tab-header">
                 <h3>{% trans "Items" %}</h3>
             </header>
-            <section class="tab-content">
+            <div class="tab-content">
                 <form class="item-styles-form">
                     <label class="h4">
                         <span>{% trans fields.item_background_color.display_name %}</span>
@@ -184,18 +186,18 @@
                       {% trans fields.max_items_per_zone.help %}
                     </div>
                 </form>
-            </section>
-            <section class="tab-content">
+            </div>
+            <div class="tab-content">
                 <h4>{% trans "Item definitions" %}</h4>
                 <form class="items-form"></form>
                 <button class="btn add-item add-element">
                     <span class="icon add" aria-hidden="true"></span>
                     {% trans "Add an item" %}
                 </button>
-            </section>
-        </div>
+            </div>
+        </section>
 
-    </section>
+    </div>
 
     <div class="xblock-actions">
       <ul class="action-buttons">

drag_and_drop_v2/translations/en/LC_MESSAGES/text.po

@@ -595,6 +595,31 @@ msgid_plural "{possible} points possible (ungraded)"
 msgstr[0] ""
 msgstr[1] ""
 
+#: drag_and_drop_v2/public/js/drag_and_drop.js:374
+#: drag_and_drop_v2/public/js/drag_and_drop.js:839
+msgid "Hints:"
+msgstr ""
+
+#: drag_and_drop_v2/public/js/drag_and_drop.js:224
+msgid ", dropzone"
+msgstr ""
+
+#: drag_and_drop_v2/public/js/drag_and_drop.js:479
+msgid "Drag and Drop Problem"
+msgstr ""
+
+#: drag_and_drop_v2/public/js/drag_and_drop.js:509
+msgid "Drop Targets"
+msgstr ""
+
+#: drag_and_drop_v2/public/js/drag_and_drop.js:517
+msgid "Actions"
+msgstr ""
+
+#: drag_and_drop_v2/public/js/drag_and_drop.js:12
+msgid "Submitting"
+msgstr ""
+
 #: utils.py:44
 msgid "Your highest score is {score}"
 msgstr ""

drag_and_drop_v2/translations/eo/LC_MESSAGES/text.po

@@ -694,6 +694,31 @@ msgstr[1] "{possible} pöïnts pössïßlé (üngrädéd) Ⱡ'σяєм ιρѕυ
 msgid "Close"
 msgstr "Çlösé Ⱡ'σяєм ιρѕ#"
 
+#: drag_and_drop_v2/public/js/drag_and_drop.js:374
+#: drag_and_drop_v2/public/js/drag_and_drop.js:839
+msgid "Hints:"
+msgstr "Hïnts: Ⱡ'σяєм ιρѕυ#"
+
+#: drag_and_drop_v2/public/js/drag_and_drop.js:224
+msgid ", dropzone"
+msgstr ", dröpzöné Ⱡ'σяєм ιρѕυм ∂σłσ#"
+
+#: drag_and_drop_v2/public/js/drag_and_drop.js:479
+msgid "Drag and Drop Problem"
+msgstr "Dräg änd Dröp Prößlém Ⱡ'σяєм ιρѕυм ∂σłσя ѕιт αмєт, #"
+
+#: drag_and_drop_v2/public/js/drag_and_drop.js:509
+msgid "Drop Targets"
+msgstr "Dröp Tärgéts Ⱡ'σяєм ιρѕυм ∂σłσя ѕ#"
+
+#: drag_and_drop_v2/public/js/drag_and_drop.js:517
+msgid "Actions"
+msgstr "Àçtïöns Ⱡ'σяєм ιρѕυм #"
+
+#: drag_and_drop_v2/public/js/drag_and_drop.js:12
+msgid "Submitting"
+msgstr "Süßmïttïng Ⱡ'σяєм ιρѕυм ∂σłσ#"
+
 #: utils.py:44
 msgid "Your highest score is {score}"
 msgstr "Ýöür hïghést sçöré ïs {score} Ⱡ'σяєм ιρѕυм ∂σłσя ѕιт αмєт, ¢σηѕ#"

setup.py

@@ -23,7 +23,7 @@ def package_data(pkg, root_list):
 
 setup(
     name='xblock-drag-and-drop-v2',
-    version='2.0.13',
+    version='2.0.14',
     description='XBlock - Drag-and-Drop v2',
     packages=['drag_and_drop_v2'],
     install_requires=[

tests/integration/test_base.py

@@ -48,7 +48,7 @@ ItemDefinition = namedtuple(  # pylint: disable=invalid-name
 
 
 class BaseIntegrationTest(SeleniumBaseTest):
-    default_css_selector = 'section.themed-xblock.xblock--drag-and-drop'
+    default_css_selector = '.themed-xblock.xblock--drag-and-drop'
     module_name = __name__
 
     _additional_escapes = {
@@ -239,22 +239,32 @@ class DefaultDataTestMixin(object):
 class InteractionTestBase(object):
     POPUP_ERROR_CLASS = "popup-incorrect"
 
-    @classmethod
-    def _get_items_with_zone(cls, items_map):
+    def setUp(self):
+        super(InteractionTestBase, self).setUp()
+
+        scenario_xml = self._get_scenario_xml()
+        self._add_scenario(self.PAGE_ID, self.PAGE_TITLE, scenario_xml)
+        self._page = self.go_to_page(self.PAGE_TITLE)
+        # Resize window so that the entire drag container is visible.
+        # Selenium has issues when dragging to an area that is off screen.
+        self.browser.set_window_size(1024, 1024)
+
+    @staticmethod
+    def _get_items_with_zone(items_map):
         return {
             item_key: definition for item_key, definition in items_map.items()
             if definition.zone_ids != []
         }
 
-    @classmethod
-    def _get_items_without_zone(cls, items_map):
+    @staticmethod
+    def _get_items_without_zone(items_map):
         return {
             item_key: definition for item_key, definition in items_map.items()
             if definition.zone_ids == []
         }
 
-    @classmethod
-    def _get_items_by_zone(cls, items_map):
+    @staticmethod
+    def _get_items_by_zone(items_map):
         zone_ids = set([definition.zone_ids[0] for _, definition in items_map.items() if definition.zone_ids])
         return {
             zone_id: {item_key: definition for item_key, definition in items_map.items()
@@ -262,15 +272,17 @@ class InteractionTestBase(object):
             for zone_id in zone_ids
         }
 
-    def setUp(self):
-        super(InteractionTestBase, self).setUp()
-
-        scenario_xml = self._get_scenario_xml()
-        self._add_scenario(self.PAGE_ID, self.PAGE_TITLE, scenario_xml)
-        self._page = self.go_to_page(self.PAGE_TITLE)
-        # Resize window so that the entire drag container is visible.
-        # Selenium has issues when dragging to an area that is off screen.
-        self.browser.set_window_size(1024, 800)
+    @staticmethod
+    def _get_incorrect_zone_for_item(item, zones):
+        """Returns the first zone that is not correct for this item."""
+        zone_id = None
+        zone_title = None
+        for z_id, z_title in zones:
+            if z_id not in item.zone_ids:
+                zone_id = z_id
+                zone_title = z_title
+                break
+        return [zone_id, zone_title]
 
     def _get_item_by_value(self, item_value):
         return self._page.find_elements_by_xpath(".//div[@data-value='{item_id}']".format(item_id=item_value))[0]
@@ -312,7 +324,7 @@ class InteractionTestBase(object):
         both the HTML attribute and the DOM property are set to false.
         We work around that selenium bug by using JavaScript to get the correct value of 'draggable'.
         """
-        script = "return $('div.option[data-value={}]').prop('draggable')".format(item_value)
+        script = "return $('.option[data-value={}]').prop('draggable')".format(item_value)
         return self.browser.execute_script(script)
 
     def assertDraggable(self, item_value):
@@ -370,7 +382,7 @@ class InteractionTestBase(object):
         item.send_keys("")
         item.send_keys(action_key)
         # Focus is on first *zone* now
-        self.assert_grabbed_item(item)
+        self.assert_item_grabbed(item)
         # Get desired zone and figure out how many times we have to press Tab to focus the zone.
         if zone_id is None:  # moving back to the bank
             zone = self._get_item_bank()
@@ -387,9 +399,12 @@ class InteractionTestBase(object):
             ActionChains(self.browser).send_keys(Keys.TAB).perform()
         zone.send_keys(action_key)
 
-    def assert_grabbed_item(self, item):
+    def assert_item_grabbed(self, item):
         self.assertEqual(item.get_attribute('aria-grabbed'), 'true')
 
+    def assert_item_not_grabbed(self, item):
+        self.assertEqual(item.get_attribute('aria-grabbed'), 'false')
+
     def assert_placed_item(self, item_value, zone_title, assessment_mode=False):
         item = self._get_placed_item_by_value(item_value)
         self.wait_until_visible(item)
@@ -474,3 +489,10 @@ class InteractionTestBase(object):
 
     def assert_button_enabled(self, submit_button, enabled=True):
         self.assertEqual(submit_button.is_enabled(), enabled)
+
+    def assert_reader_feedback_messages(self, expected_message_lines):
+        expected_paragraphs = ['<p>{}</p>'.format(l) for l in expected_message_lines]
+        expected_html = ''.join(expected_paragraphs)
+        feedback_area = self._page.find_element_by_css_selector('.reader-feedback-area')
+        actual_html = feedback_area.get_attribute('innerHTML')
+        self.assertEqual(actual_html, expected_html)

tests/integration/test_events.py

@@ -76,7 +76,7 @@ class EventsFiredTest(DefaultDataTestMixin, ParameterizedTestsMixin, BaseEventsT
     @data(*enumerate(scenarios))  # pylint: disable=star-args
     @unpack
     def test_event(self, index, event):
-        self.parameterized_item_positive_feedback_on_good_move(self.items_map)
+        self.parameterized_item_positive_feedback_on_good_move_standard(self.items_map)
         dummy, name, published_data = self.publish.call_args_list[index][0]
         self.assertEqual(name, event['name'])
         self.assertEqual(published_data, event['data'])

tests/integration/test_interaction.py

@@ -50,35 +50,92 @@ class ParameterizedTestsMixin(object):
         ActionChains(self.browser).send_keys(Keys.TAB).perform()
         self.assertFocused(go_to_beginning_button)
 
-    def parameterized_item_positive_feedback_on_good_move(
-            self, items_map, scroll_down=100, action_key=None, assessment_mode=False
+    def parameterized_item_positive_feedback_on_good_move_standard(
+            self, items_map, scroll_down=100, action_key=None, feedback=None
     ):
+        if feedback is None:
+            feedback = self.feedback
+
         popup = self._get_popup()
         feedback_popup_content = self._get_popup_content()
 
         # Scroll drop zones into view to make sure Selenium can successfully drop items
         self.scroll_down(pixels=scroll_down)
 
-        for definition in self._get_items_with_zone(items_map).values():
+        items_with_zones = self._get_items_with_zone(items_map).values()
+        for i, definition in enumerate(items_with_zones):
             self.place_item(definition.item_id, definition.zone_ids[0], action_key)
             self.wait_until_ondrop_xhr_finished(self._get_item_by_value(definition.item_id))
-            self.assert_placed_item(definition.item_id, definition.zone_title, assessment_mode=assessment_mode)
+            self.assert_placed_item(definition.item_id, definition.zone_title, assessment_mode=False)
             feedback_popup_html = feedback_popup_content.get_attribute('innerHTML')
-            if assessment_mode:
-                self.assertEqual(feedback_popup_html, '')
-                self.assertFalse(popup.is_displayed())
-                if action_key:
-                    # Next TAB keypress should move focus to "Go to Beginning button"
-                    self._test_next_tab_goes_to_go_to_beginning_button()
+            self.assertEqual(feedback_popup_html, "<p>{}</p>".format(definition.feedback_positive))
+            self.assert_popup_correct(popup)
+            self.assertTrue(popup.is_displayed())
+            expected_sr_texts = [definition.feedback_positive]
+            if i == len(items_with_zones) - 1:
+                # We just dropped the last item, so the problem is done and we should see the final feedback.
+                overall_feedback = feedback['final']
             else:
-                self.assertEqual(feedback_popup_html, "<p>{}</p>".format(definition.feedback_positive))
-                self.assert_popup_correct(popup)
+                overall_feedback = feedback['intro']
+            expected_sr_texts.append(overall_feedback)
+            self.assert_reader_feedback_messages(expected_sr_texts)
+            self._test_popup_focus_and_close(popup, action_key)
+
+    def parameterized_item_positive_feedback_on_good_move_assessment(
+            self, items_map, scroll_down=100, action_key=None, feedback=None
+    ):
+        if feedback is None:
+            feedback = self.feedback
+
+        popup = self._get_popup()
+        feedback_popup_content = self._get_popup_content()
+
+        # Scroll drop zones into view to make sure Selenium can successfully drop items
+        self.scroll_down(pixels=scroll_down)
+
+        items_with_zones = self._get_items_with_zone(items_map).values()
+        for definition in items_with_zones:
+            self.place_item(definition.item_id, definition.zone_ids[0], action_key)
+            self.wait_until_ondrop_xhr_finished(self._get_item_by_value(definition.item_id))
+            self.assert_placed_item(definition.item_id, definition.zone_title, assessment_mode=True)
+            feedback_popup_html = feedback_popup_content.get_attribute('innerHTML')
+            self.assertEqual(feedback_popup_html, '')
+            self.assertFalse(popup.is_displayed())
+            self.assert_reader_feedback_messages([])
+            if action_key:
+                # Next TAB keypress should move focus to "Go to Beginning button"
+                self._test_next_tab_goes_to_go_to_beginning_button()
+
+    def parameterized_item_negative_feedback_on_bad_move_standard(
+            self, items_map, all_zones, scroll_down=100, action_key=None, feedback=None
+    ):
+        if feedback is None:
+            feedback = self.feedback
+
+        popup = self._get_popup()
+        feedback_popup_content = self._get_popup_content()
+
+        # Scroll drop zones into view to make sure Selenium can successfully drop items
+        self.scroll_down(pixels=scroll_down)
+
+        for definition in items_map.values():
+            zone_id, _ = self._get_incorrect_zone_for_item(definition, all_zones)
+            if zone_id is not None:  # Some items may be placed in any zone, ignore those.
+                self.place_item(definition.item_id, zone_id, action_key)
+                self.wait_until_html_in(definition.feedback_negative, feedback_popup_content)
+                self.assert_popup_incorrect(popup)
                 self.assertTrue(popup.is_displayed())
+                self.assert_reverted_item(definition.item_id)
+                expected_sr_texts = [definition.feedback_negative, feedback['intro']]
+                self.assert_reader_feedback_messages(expected_sr_texts)
                 self._test_popup_focus_and_close(popup, action_key)
 
-    def parameterized_item_negative_feedback_on_bad_move(
-            self, items_map, all_zones, scroll_down=100, action_key=None, assessment_mode=False
+    def parameterized_item_negative_feedback_on_bad_move_assessment(
+            self, items_map, all_zones, scroll_down=100, action_key=None, feedback=None
     ):
+        if feedback is None:
+            feedback = self.feedback
+
         popup = self._get_popup()
         feedback_popup_content = self._get_popup_content()
 
@@ -86,30 +143,17 @@ class ParameterizedTestsMixin(object):
         self.scroll_down(pixels=scroll_down)
 
         for definition in items_map.values():
-            # Get first zone that is not correct for this item.
-            zone_id = None
-            zone_title = None
-            for z_id, z_title in all_zones:
-                if z_id not in definition.zone_ids:
-                    zone_id = z_id
-                    zone_title = z_title
-                    break
+            zone_id, zone_title = self._get_incorrect_zone_for_item(definition, all_zones)
             if zone_id is not None:  # Some items may be placed in any zone, ignore those.
                 self.place_item(definition.item_id, zone_id, action_key)
-                if assessment_mode:
-                    self.wait_until_ondrop_xhr_finished(self._get_item_by_value(definition.item_id))
-                    feedback_popup_html = feedback_popup_content.get_attribute('innerHTML')
-                    self.assertEqual(feedback_popup_html, '')
-                    self.assertFalse(popup.is_displayed())
-                    self.assert_placed_item(definition.item_id, zone_title, assessment_mode=True)
-                    if action_key:
-                        self._test_next_tab_goes_to_go_to_beginning_button()
-                else:
-                    self.wait_until_html_in(definition.feedback_negative, feedback_popup_content)
-                    self.assert_popup_incorrect(popup)
-                    self.assertTrue(popup.is_displayed())
-                    self.assert_reverted_item(definition.item_id)
-                    self._test_popup_focus_and_close(popup, action_key)
+                self.wait_until_ondrop_xhr_finished(self._get_item_by_value(definition.item_id))
+                feedback_popup_html = feedback_popup_content.get_attribute('innerHTML')
+                self.assertEqual(feedback_popup_html, '')
+                self.assertFalse(popup.is_displayed())
+                self.assert_placed_item(definition.item_id, zone_title, assessment_mode=True)
+                self.assert_reader_feedback_messages([])
+                if action_key:
+                    self._test_next_tab_goes_to_go_to_beginning_button()
 
     def parameterized_move_items_between_zones(self, items_map, all_zones, scroll_down=100, action_key=None):
         # Scroll drop zones into view to make sure Selenium can successfully drop items
@@ -247,11 +291,13 @@ class StandardInteractionTest(DefaultDataTestMixin, InteractionTestBase, Paramet
     """
     @data(*ITEM_DRAG_KEYBOARD_KEYS)
     def test_item_positive_feedback_on_good_move(self, action_key):
-        self.parameterized_item_positive_feedback_on_good_move(self.items_map, action_key=action_key)
+        self.parameterized_item_positive_feedback_on_good_move_standard(self.items_map, action_key=action_key)
 
     @data(*ITEM_DRAG_KEYBOARD_KEYS)
     def test_item_negative_feedback_on_bad_move(self, action_key):
-        self.parameterized_item_negative_feedback_on_bad_move(self.items_map, self.all_zones, action_key=action_key)
+        self.parameterized_item_negative_feedback_on_bad_move_standard(
+            self.items_map, self.all_zones, action_key=action_key
+        )
 
     @data(*ITEM_DRAG_KEYBOARD_KEYS)
     def test_cannot_move_items_between_zones(self, action_key):
@@ -332,6 +378,23 @@ class StandardInteractionTest(DefaultDataTestMixin, InteractionTestBase, Paramet
         # After placing all items, we get the full score.
         self.assertEqual(progress.text, '1/1 point (ungraded)')
 
+    @data(*ITEM_DRAG_KEYBOARD_KEYS)
+    def test_cannot_select_multiple_items(self, action_key):
+        if action_key:
+            all_item_ids = self.items_map.keys()
+            # Go through all items and select them all using the keyboard action key.
+            for item_id in all_item_ids:
+                item = self._get_item_by_value(item_id)
+                item.send_keys('')
+                item.send_keys(action_key)
+                # Item should be grabbed.
+                self.assert_item_grabbed(item)
+                # Other items should NOT be grabbed.
+                for other_item_id in all_item_ids:
+                    if other_item_id != item_id:
+                        other_item = self._get_item_by_value(other_item_id)
+                        self.assert_item_not_grabbed(other_item)
+
 
 class MultipleValidOptionsInteractionTest(DefaultDataTestMixin, InteractionTestBase, BaseIntegrationTest):
 
@@ -477,16 +540,22 @@ class MultipleBlocksDataInteraction(ParameterizedTestsMixin, InteractionTestBase
 
     def test_item_positive_feedback_on_good_move(self):
         self._switch_to_block(0)
-        self.parameterized_item_positive_feedback_on_good_move(self.item_maps['block1'])
+        self.parameterized_item_positive_feedback_on_good_move_standard(
+            self.item_maps['block1'], feedback=self.feedback['block1']
+        )
         self._switch_to_block(1)
-        self.parameterized_item_positive_feedback_on_good_move(self.item_maps['block2'], scroll_down=1000)
+        self.parameterized_item_positive_feedback_on_good_move_standard(
+            self.item_maps['block2'], feedback=self.feedback['block2'], scroll_down=1000
+        )
 
     def test_item_negative_feedback_on_bad_move(self):
         self._switch_to_block(0)
-        self.parameterized_item_negative_feedback_on_bad_move(self.item_maps['block1'], self.all_zones['block1'])
+        self.parameterized_item_negative_feedback_on_bad_move_standard(
+            self.item_maps['block1'], self.all_zones['block1'], feedback=self.feedback['block1']
+        )
         self._switch_to_block(1)
-        self.parameterized_item_negative_feedback_on_bad_move(
-            self.item_maps['block2'], self.all_zones['block2'], scroll_down=1000
+        self.parameterized_item_negative_feedback_on_bad_move_standard(
+            self.item_maps['block2'], self.all_zones['block2'], feedback=self.feedback['block2'], scroll_down=1000
         )
 
     def test_final_feedback_and_reset(self):

tests/integration/test_interaction_assessment.py

@@ -81,14 +81,12 @@ class AssessmentInteractionTest(
     """
     @data(*ITEM_DRAG_KEYBOARD_KEYS)
     def test_item_no_feedback_on_good_move(self, action_key):
-        self.parameterized_item_positive_feedback_on_good_move(
-            self.items_map, action_key=action_key, assessment_mode=True
-        )
+        self.parameterized_item_positive_feedback_on_good_move_assessment(self.items_map, action_key=action_key)
 
     @data(*ITEM_DRAG_KEYBOARD_KEYS)
     def test_item_no_feedback_on_bad_move(self, action_key):
-        self.parameterized_item_negative_feedback_on_bad_move(
-            self.items_map, self.all_zones, action_key=action_key, assessment_mode=True
+        self.parameterized_item_negative_feedback_on_bad_move_assessment(
+            self.items_map, self.all_zones, action_key=action_key
         )
 
     @data(*ITEM_DRAG_KEYBOARD_KEYS)
@@ -250,6 +248,18 @@ class AssessmentInteractionTest(
         """
         Test updating overall feedback after submitting solution in assessment mode
         """
+        def check_feedback(overall_feedback_lines, per_item_feedback_lines=None):
+            # Check that the feedback is correctly displayed in the overall feedback area.
+            expected_overall_feedback = "\n".join(["FEEDBACK"] + overall_feedback_lines)
+            self.assertEqual(self._get_feedback().text, expected_overall_feedback)
+
+            # Check that the SR.readText function was passed correct feedback messages.
+            sr_feedback_lines = overall_feedback_lines
+            if per_item_feedback_lines:
+                sr_feedback_lines += ["Some of your answers were not correct.", "Hints:"]
+                sr_feedback_lines += per_item_feedback_lines
+            self.assert_reader_feedback_messages(sr_feedback_lines)
+
         # used keyboard mode to avoid bug/feature with selenium "selecting" everything instead of dragging an element
         self.place_item(0, TOP_ZONE_ID, Keys.RETURN)
 
@@ -261,29 +271,25 @@ class AssessmentInteractionTest(
         expected_grade = 2.0 / 5.0
 
         feedback_lines = [
-            "FEEDBACK",
             FeedbackMessages.correctly_placed(1),
             FeedbackMessages.not_placed(3),
             START_FEEDBACK,
             FeedbackMessages.GRADE_FEEDBACK_TPL.format(score=expected_grade)
         ]
-        expected_feedback = "\n".join(feedback_lines)
-        self.assertEqual(self._get_feedback().text, expected_feedback)
+        check_feedback(feedback_lines)
 
         # Place the item into incorrect zone. The score does not change.
         self.place_item(1, BOTTOM_ZONE_ID, Keys.RETURN)
         self.click_submit()
 
         feedback_lines = [
-            "FEEDBACK",
             FeedbackMessages.correctly_placed(1),
             FeedbackMessages.misplaced_returned(1),
             FeedbackMessages.not_placed(2),
             START_FEEDBACK,
             FeedbackMessages.GRADE_FEEDBACK_TPL.format(score=expected_grade)
         ]
-        expected_feedback = "\n".join(feedback_lines)
-        self.assertEqual(self._get_feedback().text, expected_feedback)
+        check_feedback(feedback_lines, ["No, this item does not belong here. Try again."])
 
         # reach final attempt
         for _ in xrange(self.MAX_ATTEMPTS-3):
@@ -299,13 +305,11 @@ class AssessmentInteractionTest(
         expected_grade = 1.0
 
         feedback_lines = [
-            "FEEDBACK",
             FeedbackMessages.correctly_placed(4),
             FINISH_FEEDBACK,
             FeedbackMessages.FINAL_ATTEMPT_TPL.format(score=expected_grade)
         ]
-        expected_feedback = "\n".join(feedback_lines)
-        self.assertEqual(self._get_feedback().text, expected_feedback)
+        check_feedback(feedback_lines)
 
     def test_per_item_feedback_multiple_misplaced(self):
         self.place_item(0, MIDDLE_ZONE_ID, Keys.RETURN)

tests/integration/test_render.py

@@ -194,7 +194,7 @@ class TestDragAndDropRender(BaseIntegrationTest):
                 '#-Zone_{}'.format(zone_number), **zone_box_percentages
             )
             zone_name = zone.find_element_by_css_selector('p.zone-name')
-            self.assertEqual(zone_name.text, 'Zone {}'.format(zone_number))
+            self.assertEqual(zone_name.text, 'Zone {}\n, dropzone'.format(zone_number))
             zone_description = zone.find_element_by_css_selector('p.zone-description')
             self.assertEqual(zone_description.text, 'This describes zone {}'.format(zone_number))
             # Zone description should only be visible to screen readers:
@@ -204,12 +204,10 @@ class TestDragAndDropRender(BaseIntegrationTest):
         self.load_scenario()
 
         popup = self._get_popup()
-        popup_wrapper = self._get_popup_wrapper()
         popup_content = self._get_popup_content()
         self.assertFalse(popup.is_displayed())
         self.assertIn('popup', popup.get_attribute('class'))
         self.assertEqual(popup_content.text, "")
-        self.assertEqual(popup_wrapper.get_attribute('aria-live'), 'polite')
 
     @data(None, Keys.RETURN)
     def test_go_to_beginning_button(self, action_key):
@@ -253,9 +251,7 @@ class TestDragAndDropRender(BaseIntegrationTest):
     def test_feedback(self):
         self.load_scenario()
 
-        feedback = self._get_feedback()
         feedback_message = self._get_feedback_message()
-        self.assertEqual(feedback.get_attribute('aria-live'), 'polite')
         self.assertEqual(feedback_message.text, START_FEEDBACK)
 
     def test_background_image(self):

tests/integration/test_title_and_question.py

@@ -26,10 +26,10 @@ class TestDragAndDropTitleAndProblem(BaseIntegrationTest):
         self.addCleanup(scenarios.remove_scenario, const_page_id)
 
         page = self.go_to_page(const_page_name)
-        is_problem_header_visible = len(page.find_elements_by_css_selector('section.problem > h4')) > 0
+        is_problem_header_visible = len(page.find_elements_by_css_selector('.problem > h4')) > 0
         self.assertEqual(is_problem_header_visible, show_problem_header)
 
-        problem = page.find_element_by_css_selector('section.problem > p')
+        problem = page.find_element_by_css_selector('.problem > p')
         self.assertEqual(self.get_element_html(problem), problem_text)
 
     @unpack

tests/unit/test_basics.py

@@ -45,7 +45,7 @@ class BasicTests(TestCaseMixin, unittest.TestCase):
     def test_template_contents(self):
         context = {}
         student_fragment = self.block.runtime.render(self.block, 'student_view', context)
-        self.assertIn('<section class="themed-xblock xblock--drag-and-drop">', student_fragment.content)
+        self.assertIn('<div class="themed-xblock xblock--drag-and-drop">', student_fragment.content)
         self.assertIn('Loading drag and drop problem.', student_fragment.content)
 
     def test_get_configuration(self):