Skip to content

X
xblock-drag-and-drop-v2
Commit ddc87acd by E. Kolpakov
Options

Fixed tests and quality violations, updated translations, simplified some CSS… 

Fixed tests and quality violations, updated translations, simplified some CSS styling, other cleanups
parent 7a1982d2
Showing with 174 additions and 90 deletions
drag_and_drop_v2/public/css/drag_and_drop.css
...@@ -43,6 +43,7 @@ ...@@ -43,6 +43,7 @@
display: inline-block; display: inline-block;
color: #5e5e5e; color: #5e5e5e;
font-size: 0.875em; font-size: 0.875em;
margin-bottom: 0.5em;
} }
.xblock--drag-and-drop .problem p { .xblock--drag-and-drop .problem p {
...@@ -444,8 +445,6 @@ ...@@ -444,8 +445,6 @@
.xblock--drag-and-drop .btn-brand { .xblock--drag-and-drop .btn-brand {
display: inline-block; display: inline-block;
font-weight: normal; font-weight: normal;
background: #0079bc;
color: #fcfcfc;
-webkit-transition: color 0.125s ease-in-out 0s, border-color 0.125s ease-in-out 0s, background 0.125s ease-in-out 0s, box-shadow 0.125s ease-in-out 0s; -webkit-transition: color 0.125s ease-in-out 0s, border-color 0.125s ease-in-out 0s, background 0.125s ease-in-out 0s, box-shadow 0.125s ease-in-out 0s;
-moz-transition: color 0.125s ease-in-out 0s, border-color 0.125s ease-in-out 0s, background 0.125s ease-in-out 0s, box-shadow 0.125s ease-in-out 0s; -moz-transition: color 0.125s ease-in-out 0s, border-color 0.125s ease-in-out 0s, background 0.125s ease-in-out 0s, box-shadow 0.125s ease-in-out 0s;
transition: color 0.125s ease-in-out 0s, border-color 0.125s ease-in-out 0s, background 0.125s ease-in-out 0s, box-shadow 0.125s ease-in-out 0s; transition: color 0.125s ease-in-out 0s, border-color 0.125s ease-in-out 0s, background 0.125s ease-in-out 0s, box-shadow 0.125s ease-in-out 0s;
...@@ -472,6 +471,12 @@ ...@@ -472,6 +471,12 @@
font-size: 0.875em; font-size: 0.875em;
} }
.xblock--drag-and-drop .btn-link {
padding: 1px;
font-size: 0.875em;
font-weight: normal;
}
.xblock--drag-and-drop .btn-default:hover, .xblock--drag-and-drop .btn-default:hover,
.xblock--drag-and-drop .btn-default.is-hovered, .xblock--drag-and-drop .btn-default.is-hovered,
.xblock--drag-and-drop .btn-default:focus, .xblock--drag-and-drop .btn-default:focus,
...@@ -625,6 +630,10 @@ ...@@ -625,6 +630,10 @@
display: block; display: block;
} }
.xblock--drag-and-drop .btn-link .btn-icon {
display: inline;
}
/*** ACTIONS TOOLBAR END ***/ /*** ACTIONS TOOLBAR END ***/
/*** KEYBOARD HELP ***/ /*** KEYBOARD HELP ***/
......
drag_and_drop_v2/public/js/drag_and_drop.js
...@@ -2,9 +2,6 @@ function DragAndDropTemplates(configuration) { ...@@ -2,9 +2,6 @@ function DragAndDropTemplates(configuration) {
"use strict"; "use strict";
var h = virtualDom.h; var h = virtualDom.h;
var keyboardHelpButtonClass = "keyboard-help-button";
var keyboardHelpText = gettext('Keyboard Help');
var itemSpinnerTemplate = function(item) { var itemSpinnerTemplate = function(item) {
if (!item.xhr_active) { if (!item.xhr_active) {
return null; return null;
...@@ -73,7 +70,8 @@ function DragAndDropTemplates(configuration) { ...@@ -73,7 +70,8 @@ function DragAndDropTemplates(configuration) {
'draggable': !item.drag_disabled, 'draggable': !item.drag_disabled,
'aria-grabbed': item.grabbed, 'aria-grabbed': item.grabbed,
'data-value': item.value, 'data-value': item.value,
'tabindex': item.focusable ? 0 : undefined 'tabindex': item.focusable ? 0 : undefined,
'aria-live': 'polite'
}; };
var style = {}; var style = {};
if (item.background_color) { if (item.background_color) {
...@@ -102,9 +100,7 @@ function DragAndDropTemplates(configuration) { ...@@ -102,9 +100,7 @@ function DragAndDropTemplates(configuration) {
$.extend(style, bankItemWidthStyles(item, ctx)); $.extend(style, bankItemWidthStyles(item, ctx));
} }
// Define children // Define children
var children = [
itemSpinnerTemplate(item)
];
var item_content = itemContentTemplate(item); var item_content = itemContentTemplate(item);
var item_description = null; var item_description = null;
// Insert information about zone in which this item has been placed // Insert information about zone in which this item has been placed
...@@ -128,15 +124,14 @@ function DragAndDropTemplates(configuration) { ...@@ -128,15 +124,14 @@ function DragAndDropTemplates(configuration) {
description_content description_content
); );
} }
children.splice(1, 0, item_description);
children.splice(1, 0, item_content);
var itemSRNote = h( var itemSRNote = h(
'span', 'span.sr.draggable',
{ className: 'sr draggable' }, (item.grabbed) ? gettext(", draggable, grabbed") : gettext(", draggable")
(item.grabbed) ? gettext("draggable, grabbed") : gettext("draggable")
); );
children.splice(2, 0, itemSRNote);
var children = [
itemSpinnerTemplate(item), item_content, itemSRNote, item_description
];
return ( return (
h( h(
...@@ -302,14 +297,14 @@ function DragAndDropTemplates(configuration) { ...@@ -302,14 +297,14 @@ function DragAndDropTemplates(configuration) {
h('h2.modal-window-title#'+labelledby_id, gettext('Keyboard Help')) h('h2.modal-window-title#'+labelledby_id, gettext('Keyboard Help'))
]), ]),
h('div.modal-content', [ h('div.modal-content', [
h('p', {className:'sr'}, gettext('This is a screen reader-friendly problem')), h('p.sr', gettext('This is a screen reader-friendly problem.')),
h('p.sr', gettext('Drag and Drop problems consist of draggable items and dropzones. Users should select a draggable item with their keyboard and then navigate to an appropriate dropzone to drop it.')),
h('p', gettext('You can complete this problem using only your keyboard by following the guidance below:')), h('p', gettext('You can complete this problem using only your keyboard by following the guidance below:')),
h('p', {className:'sr'}, gettext('Drag and Drop problems consist of draggable items and dropzones. Users should select a draggable item with their keyboard and then navigate to an appropriate dropzone to drop it.')),
h('ul', [ h('ul', [
h('li', gettext('Use only TAB and SHIFT+TAB to navigate between draggable items and drop zones.')), h('li', gettext('Use only TAB and SHIFT+TAB to navigate between draggable items and drop zones.')),
h('li', gettext('Press CTRL+M to select a draggable item (effectively picking it up).')), h('li', gettext('Press CTRL+M to select a draggable item (effectively picking it up).')),
h('li', gettext('Navigate using TAB and SHIFT+TAB to the appropriate dropzone and press CTRL+M once more to drop it here.')), h('li', gettext('Navigate using TAB and SHIFT+TAB to the appropriate dropzone and press CTRL+M once more to drop it here.')),
h('li', gettext('Press "Esc" if you want to cancel the drop operation (for example, to select a different item).')), h('li', gettext('Press ESC if you want to cancel the drop operation (for example, to select a different item).')),
h('li', gettext('TAB back to the list of draggable items and repeat this process until all of the draggable items have been placed on their respective dropzones.')), h('li', gettext('TAB back to the list of draggable items and repeat this process until all of the draggable items have been placed on their respective dropzones.')),
]) ])
]), ]),
...@@ -381,7 +376,6 @@ function DragAndDropTemplates(configuration) { ...@@ -381,7 +376,6 @@ function DragAndDropTemplates(configuration) {
} }
return( return(
h("section.action-toolbar-item.sidebar-buttons", {}, [ h("section.action-toolbar-item.sidebar-buttons", {}, [
sidebarButtonTemplate(keyboardHelpButtonClass, "fa-question", keyboardHelpText),
sidebarButtonTemplate("reset-button", "fa-refresh", gettext('Reset'), ctx.disable_reset_button), sidebarButtonTemplate("reset-button", "fa-refresh", gettext('Reset'), ctx.disable_reset_button),
showAnswerButton, showAnswerButton,
]) ])
...@@ -453,7 +447,19 @@ function DragAndDropTemplates(configuration) { ...@@ -453,7 +447,19 @@ function DragAndDropTemplates(configuration) {
}; };
var forwardKeyboardHelpButtonTemplate = function(ctx) { var forwardKeyboardHelpButtonTemplate = function(ctx) {
return h("button", { attributes: {tabindex: 0}, className: keyboardHelpButtonClass }, keyboardHelpText); return h(
'button.unbutton.btn-link.keyboard-help-button',
[
h(
"span.btn-icon.fa.fa-keyboard-o",
{attributes: {"aria-hidden": true}}
),
// appending space is the simplest way to avoid sticking text to the button, but also to have
// them underlined together on hover. When margin was used there was a gap in underlining
" ",
gettext('Keyboard Help')
]
);
}; };
var progressTemplate = function(ctx) { var progressTemplate = function(ctx) {
...@@ -535,11 +541,11 @@ function DragAndDropTemplates(configuration) { ...@@ -535,11 +541,11 @@ function DragAndDropTemplates(configuration) {
h('section.themed-xblock.xblock--drag-and-drop', [ h('section.themed-xblock.xblock--drag-and-drop', [
problemTitle, problemTitle,
problemProgress, problemProgress,
h('div', [forwardKeyboardHelpButtonTemplate(ctx)]),
h('section.problem', [ h('section.problem', [
problemHeader, problemHeader,
h('p', {innerHTML: ctx.problem_html}), h('p', {innerHTML: ctx.problem_html}),
]), ]),
h('div', {'className': 'sr'}, [forwardKeyboardHelpButtonTemplate(ctx)]),
h('section.drag-container', {}, [ h('section.drag-container', {}, [
h('div.item-bank', item_bank_properties, [ h('div.item-bank', item_bank_properties, [
renderCollection(itemTemplate, items_in_bank, ctx), renderCollection(itemTemplate, items_in_bank, ctx),
......
drag_and_drop_v2/translations/en/LC_MESSAGES/text.po
...@@ -449,6 +449,14 @@ msgstr "" ...@@ -449,6 +449,14 @@ msgstr ""
msgid "Correctly placed in: {zone_title}" msgid "Correctly placed in: {zone_title}"
msgstr "" msgstr ""
#: drag_and_drop_v2/public/js/drag_and_drop.js:137
msgid ", draggable, grabbed"
msgstr ""
#: drag_and_drop_v2/public/js/drag_and_drop.js:137
msgid ", draggable"
msgstr ""
#: public/js/drag_and_drop.js #: public/js/drag_and_drop.js
msgid "Reset" msgid "Reset"
msgstr "" msgstr ""
...@@ -473,32 +481,51 @@ msgstr "" ...@@ -473,32 +481,51 @@ msgstr ""
msgid "Keyboard Help" msgid "Keyboard Help"
msgstr "" msgstr ""
#: public/js/drag_and_drop.js #: drag_and_drop_v2/public/js/drag_and_drop.js:305
msgid "You can complete this problem using only your keyboard." msgid "This is a screen reader-friendly problem"
msgstr "" msgstr ""
#: public/js/drag_and_drop.js #: drag_and_drop_v2/public/js/drag_and_drop.js:306
msgid "Use \"Tab\" and \"Shift-Tab\" to navigate between items and zones." msgid ""
"You can complete this problem using only your keyboard by following the "
"guidance below:"
msgstr "" msgstr ""
#: public/js/drag_and_drop.js #: drag_and_drop_v2/public/js/drag_and_drop.js:307
msgid "" msgid ""
"Press \"Enter\", \"Space\", \"Ctrl-m\", or \"⌘-m\" on an item to select it " "Drag and Drop problems consist of draggable items and dropzones. Users "
"for dropping, then navigate to the zone you want to drop it on." "should select a draggable item with their keyboard and then navigate to an "
"appropriate dropzone to drop it."
msgstr "" msgstr ""
#: public/js/drag_and_drop.js #: drag_and_drop_v2/public/js/drag_and_drop.js:309
msgid "" msgid ""
"Press \"Enter\", \"Space\", \"Ctrl-m\", or \"⌘-m\" to drop the item on the " "Use only TAB and SHIFT+TAB to navigate between draggable items and drop "
"current zone." "zones."
msgstr "" msgstr ""
#: public/js/drag_and_drop.js #: drag_and_drop_v2/public/js/drag_and_drop.js:310
msgid "Press CTRL+M to select a draggable item (effectively picking it up)."
msgstr ""
#: drag_and_drop_v2/public/js/drag_and_drop.js:311
msgid "" msgid ""
"Press \"Esc\" if you want to cancel the drop operation (for example, to " "Navigate using TAB and SHIFT+TAB to the appropriate dropzone and press CTRL"
"+M once more to drop it here."
msgstr ""
#: drag_and_drop_v2/public/js/drag_and_drop.js:312
msgid ""
"Press ESC if you want to cancel the drop operation (for example, to "
"select a different item)." "select a different item)."
msgstr "" msgstr ""
#: drag_and_drop_v2/public/js/drag_and_drop.js:313
msgid ""
"TAB back to the list of draggable items and repeat this process until all of "
"the draggable items have been placed on their respective dropzones."
msgstr ""
#: public/js/drag_and_drop.js #: public/js/drag_and_drop.js
msgid "OK" msgid "OK"
msgstr "" msgstr ""
...@@ -532,7 +559,7 @@ msgid "None" ...@@ -532,7 +559,7 @@ msgid "None"
msgstr "" msgstr ""
#: public/js/drag_and_drop_edit.js #: public/js/drag_and_drop_edit.js
msgid "Close item feedback popup" msgid "Close"
msgstr "" msgstr ""
......
drag_and_drop_v2/translations/eo/LC_MESSAGES/text.po
...@@ -521,6 +521,14 @@ msgstr "Pläçéd ïn: {zone_title} Ⱡ'σяєм ιρѕυм ∂σłσя ѕιт ...@@ -521,6 +521,14 @@ msgstr "Pläçéd ïn: {zone_title} Ⱡ'σяєм ιρѕυм ∂σłσя ѕιт
msgid "Correctly placed in: {zone_title}" msgid "Correctly placed in: {zone_title}"
msgstr "Çörréçtlý pläçéd ïn: {zone_title} Ⱡ'σяєм ιρѕυм ∂σłσя ѕιт αмєт, #" msgstr "Çörréçtlý pläçéd ïn: {zone_title} Ⱡ'σяєм ιρѕυм ∂σłσя ѕιт αмєт, #"
#: drag_and_drop_v2/public/js/drag_and_drop.js
msgid ", draggable, grabbed"
msgstr ", dräggäßlé, gräßßéd Ⱡ'σяєм ιρѕυм ∂σłσя ѕιт αмєт#"
#: drag_and_drop_v2/public/js/drag_and_drop.js
msgid ", draggable"
msgstr "dräggäßlé Ⱡ'σяєм ιρѕυм ∂σł#"
#: public/js/drag_and_drop.js #: public/js/drag_and_drop.js
msgid "Reset" msgid "Reset"
msgstr "Rését Ⱡ'σяєм ιρѕυм ∂σłσя ѕι#" msgstr "Rését Ⱡ'σяєм ιρѕυм ∂σłσя ѕι#"
...@@ -545,42 +553,79 @@ msgstr "Féédßäçk Ⱡ'σяєм ιρѕυм ∂#" ...@@ -545,42 +553,79 @@ msgstr "Féédßäçk Ⱡ'σяєм ιρѕυм ∂#"
msgid "Keyboard Help" msgid "Keyboard Help"
msgstr "Kéýßöärd Hélp Ⱡ'σяєм ιρѕυм ∂σłσя ѕι#" msgstr "Kéýßöärd Hélp Ⱡ'σяєм ιρѕυм ∂σłσя ѕι#"
#: public/js/drag_and_drop.js #: drag_and_drop_v2/public/js/drag_and_drop.js
msgid "You can complete this problem using only your keyboard." msgid "This is a screen reader-friendly problem."
msgstr "" msgstr ""
"Ýöü çän çömplété thïs prößlém üsïng önlý ýöür kéýßöärd. Ⱡ'σяєм ιρѕυм ∂σłσя " "Thïs ïs ä sçréén réädér-frïéndlý prößlém. Ⱡ'σяєм ιρѕυм ∂σłσя ѕιт αмєт, "
"ѕιт αмєт, ¢σηѕє¢тєтυя α#" "¢σηѕє¢тєтυя#"
#: public/js/drag_and_drop.js #: drag_and_drop_v2/public/js/drag_and_drop.js
msgid "Use \"Tab\" and \"Shift-Tab\" to navigate between items and zones." msgid ""
"You can complete this problem using only your keyboard by following the "
"guidance below:"
msgstr "" msgstr ""
"Ûsé \"Täß\" änd \"Shïft-Täß\" tö nävïgäté ßétwéén ïtéms änd zönés. Ⱡ'σяєм " "Ýöü çän çömplété thïs prößlém üsïng önlý ýöür kéýßöärd ßý föllöwïng thé "
"ιρѕυм ∂σłσя ѕιт αмєт, ¢σηѕє¢тєтυя α#" "güïdänçé ßélöw: Ⱡ'σяєм ιρѕυм ∂σłσя ѕιт αмєт, ¢σηѕє#"
#: public/js/drag_and_drop.js #: drag_and_drop_v2/public/js/drag_and_drop.js
msgid "" msgid ""
"Press \"Enter\", \"Space\", \"Ctrl-m\", or \"⌘-m\" on an item to select it " "Drag and Drop problems consist of draggable items and dropzones. Users "
"for dropping, then navigate to the zone you want to drop it on." "should select a draggable item with their keyboard and then navigate to an "
"appropriate dropzone to drop it."
msgstr "" msgstr ""
"Préss \"Éntér\", \"Späçé\", \"Çtrl-m\", ör \"⌘-m\" ön än ïtém tö séléçt ït " "Dräg änd Dröp prößléms çönsïst öf dräggäßlé ïtéms änd dröpzönés. Ûsérs "
"för dröppïng, thén nävïgäté tö thé zöné ýöü wänt tö dröp ït ön. Ⱡ'#" "shöüld séléçt ä dräggäßlé ïtém wïth théïr kéýßöärd änd thén nävïgäté tö än "
"äppröprïäté dröpzöné tö dröp ït. Ⱡ'σяєм ιρѕυм ∂σłσя ѕιт αмєт, ¢σηѕє¢тєтυя "
"α∂ιριѕι¢ιηg єłιт, ѕє∂ ∂σ єιυѕмσ∂ тємρσя ιη¢ι∂ι∂υηт υт łαвσяє єт ∂σłσяє мαgηα"
" αłιqυα. υт єηιм α∂ мιηιм νєηιαм, qυιѕ ησѕтяυ∂ єχєя¢ιтαтιση υłłαм¢σ łαвσяιѕ "
"ηιѕι υт αłιqυιρ єχ єα ¢σммσ∂σ ¢σηѕєqυαт. ∂υιѕ αυтє ιяυяє ∂σłσя ιη "
"яєρяєнєη∂єяιт ιη νσłυρтαтє νєłιт єѕѕє ¢ιłłυм ∂σłσяє єυ ƒυgιαт ηυłłα "
"ραяιαтυя. єχ¢єρтєυя ѕιηт σ¢¢αє¢αт ¢υρι∂αтαт ηση ρяσι∂єηт, ѕυηт ιη #"
#: public/js/drag_and_drop.js #: drag_and_drop_v2/public/js/drag_and_drop.js
msgid "" msgid ""
"Press \"Enter\", \"Space\", \"Ctrl-m\", or \"⌘-m\" to drop the item on the " "Use only TAB and SHIFT+TAB to navigate between draggable items and drop "
"current zone." "zones."
msgstr "" msgstr ""
"Préss \"Éntér\", \"Späçé\", \"Çtrl-m\", ör \"⌘-m\" tö dröp thé ïtém ön thé " "Ûsé önlý TÀB änd SHÌFT+TÀB tö nävïgäté ßétwéén dräggäßlé ïtéms änd dröp "
"çürrént zöné. Ⱡ'σяєм ιρѕυм ∂σłσя ѕιт αмєт, ¢σηѕє¢тє#" "zönés. Ⱡ'σяєм ιρѕυм ∂σłσя ѕιт αмєт, ¢σηѕє¢тєт#"
#: public/js/drag_and_drop.js #: drag_and_drop_v2/public/js/drag_and_drop.js
msgid "Press CTRL+M to select a draggable item (effectively picking it up)."
msgstr ""
"Préss ÇTRL+M tö séléçt ä dräggäßlé ïtém (éfféçtïvélý pïçkïng ït üp). Ⱡ'σяєм "
"ιρѕυм ∂σłσя ѕιт αмєт, ¢σηѕє¢тєтυя #"
#: drag_and_drop_v2/public/js/drag_and_drop.js
msgid "" msgid ""
"Press \"Esc\" if you want to cancel the drop operation (for example, to " "Navigate using TAB and SHIFT+TAB to the appropriate dropzone and press "
"CTRL+M once more to drop it here."
msgstr ""
"Nävïgäté üsïng TÀB änd SHÌFT+TÀB tö thé äppröprïäté dröpzöné änd préss "
"ÇTRL+M önçé möré tö dröp ït héré. Ⱡ'σяєм ιρѕυм ∂σłσя ѕιт α#"
#: drag_and_drop_v2/public/js/drag_and_drop.js
msgid ""
"Press ESC if you want to cancel the drop operation (for example, to "
"select a different item)." "select a different item)."
msgstr "" msgstr ""
"Préss \"Ésç\" ïf ýöü wänt tö çänçél thé dröp öpérätïön (för éxämplé, tö " "Préss ÉSÇ ïf ýöü wänt tö çänçél thé dröp öpérätïön (för éxämplé, tö "
"séléçt ä dïfférént ïtém). Ⱡ'σяєм ιρѕυм ∂σłσя ѕιт αмєт, ¢#" "séléçt ä dïfférént ïtém). Ⱡ'σяєм ιρѕυм ∂σłσя ѕιт αмєт, ¢#"
#: drag_and_drop_v2/public/js/drag_and_drop.js
msgid ""
"TAB back to the list of draggable items and repeat this process until all of"
" the draggable items have been placed on their respective dropzones."
msgstr ""
"TÀB ßäçk tö thé lïst öf dräggäßlé ïtéms änd répéät thïs pröçéss üntïl äll öf"
" thé dräggäßlé ïtéms hävé ßéén pläçéd ön théïr réspéçtïvé dröpzönés. Ⱡ'σяєм "
"ιρѕυм ∂σłσя ѕιт αмєт, ¢σηѕє¢тєтυя α∂ιριѕι¢ιηg єłιт, ѕє∂ ∂σ єιυѕмσ∂ тємρσя "
"ιη¢ι∂ι∂υηт υт łαвσяє єт ∂σłσяє мαgηα αłιqυα. υт єηιм α∂ мιηιм νєηιαм, qυιѕ "
"ησѕтяυ∂ єχєя¢ιтαтιση υłłαм¢σ łαвσяιѕ ηιѕι υт αłιqυιρ єχ єα ¢σммσ∂σ "
"¢σηѕєqυαт. ∂υιѕ αυтє ιяυяє ∂σłσя ιη яєρяєнєη∂єяιт ιη νσłυρтαтє νєłιт єѕѕє "
"¢ιłłυм ∂σłσяє єυ ƒυgιαт ηυłłα ραяιαтυя. єχ¢єρтєυя ѕιηт σ¢¢αє¢αт ¢υρι∂αтαт "
"ηση ρяσι∂єηт, ѕυηт ιη ¢υłρα qυι σƒƒι¢ια ∂єѕєяυηт мσłłιт αηιм ι∂ є#"
#: public/js/drag_and_drop.js #: public/js/drag_and_drop.js
msgid "OK" msgid "OK"
msgstr "ÖK Ⱡ'σя#" msgstr "ÖK Ⱡ'σя#"
...@@ -641,9 +686,9 @@ msgid_plural "{possible} points possible (ungraded)" ...@@ -641,9 +686,9 @@ msgid_plural "{possible} points possible (ungraded)"
msgstr[0] "{possible} pöïnt pössïßlé (üngrädéd) Ⱡ'σяєм ιρѕυм ∂σłσя ѕιт αмєт, ¢σηѕє¢т#" msgstr[0] "{possible} pöïnt pössïßlé (üngrädéd) Ⱡ'σяєм ιρѕυм ∂σłσя ѕιт αмєт, ¢σηѕє¢т#"
msgstr[1] "{possible} pöïnts pössïßlé (üngrädéd) Ⱡ'σяєм ιρѕυм ∂σłσя ѕιт αмєт, ¢σηѕє¢т#" msgstr[1] "{possible} pöïnts pössïßlé (üngrädéd) Ⱡ'σяєм ιρѕυм ∂σłσя ѕιт αмєт, ¢σηѕє¢т#"
#: public/js/drag_and_drop_edit.js #: drag_and_drop_v2/public/js/drag_and_drop.js
msgid "Close item feedback popup" msgid "Close"
msgstr "Çlösé ïtém féédßäçk pöpüp Ⱡ'σяєм ιρѕυм ∂σłσя ѕιт αмєт, ¢σηѕ#" msgstr "Çlösé Ⱡ'σяєм ιρѕ#"
#: utils.py:44 #: utils.py:44
msgid "Your highest score is {score}" msgid "Your highest score is {score}"
......
tests/integration/test_base.py
...@@ -4,6 +4,7 @@ ...@@ -4,6 +4,7 @@
import json import json
from xml.sax.saxutils import escape from xml.sax.saxutils import escape
from selenium.common.exceptions import NoSuchElementException
from selenium.webdriver import ActionChains from selenium.webdriver import ActionChains
from selenium.webdriver.common.keys import Keys from selenium.webdriver.common.keys import Keys
from selenium.webdriver.support.ui import WebDriverWait from selenium.webdriver.support.ui import WebDriverWait
...@@ -384,7 +385,7 @@ class InteractionTestBase(object): ...@@ -384,7 +385,7 @@ class InteractionTestBase(object):
self.wait_until_ondrop_xhr_finished(item) self.wait_until_ondrop_xhr_finished(item)
item_content = item.find_element_by_css_selector('.item-content') item_content = item.find_element_by_css_selector('.item-content')
self.wait_until_visible(item_content) self.wait_until_visible(item_content)
item_description = item.find_element_by_css_selector('.sr') item_description = item.find_element_by_css_selector('.sr.description')
self.wait_until_visible(item_description) self.wait_until_visible(item_description)
item_description_id = '-item-{}-description'.format(item_value) item_description_id = '-item-{}-description'.format(item_value)
...@@ -421,12 +422,13 @@ class InteractionTestBase(object): ...@@ -421,12 +422,13 @@ class InteractionTestBase(object):
self.assertEqual(item.get_attribute('class'), 'option') self.assertEqual(item.get_attribute('class'), 'option')
self.assertEqual(item.get_attribute('tabindex'), '0') self.assertEqual(item.get_attribute('tabindex'), '0')
self.assertEqual(item.get_attribute('aria-grabbed'), 'false') self.assertEqual(item.get_attribute('aria-grabbed'), 'false')
item_description_id = '-item-{}-description'.format(item_value) self.assertEqual(item_content.get_attribute('aria-describedby'), None)
self.assertEqual(item_content.get_attribute('aria-describedby'), item_description_id)
describedby_text = (u'Press "Enter", "Space", "Ctrl-m", or "⌘-m" on an item to select it for dropping, ' try:
'then navigate to the zone you want to drop it on.') item.find_element_by_css_selector('.sr.description')
self.assertEqual(item.find_element_by_css_selector('.sr').text, describedby_text) self.fail("Description element exists")
except NoSuchElementException:
pass
def place_decoy_items(self, items_map, action_key): def place_decoy_items(self, items_map, action_key):
decoy_items = self._get_items_without_zone(items_map) decoy_items = self._get_items_without_zone(items_map)
......
tests/integration/test_interaction.py
...@@ -169,7 +169,7 @@ class ParameterizedTestsMixin(object): ...@@ -169,7 +169,7 @@ class ParameterizedTestsMixin(object):
self.assertDictEqual(locations_after_reset[item_key], initial_locations[item_key]) self.assertDictEqual(locations_after_reset[item_key], initial_locations[item_key])
self.assert_reverted_item(item_key) self.assert_reverted_item(item_key)
def interact_with_keyboard_help(self, scroll_down=250, use_keyboard=False): def interact_with_keyboard_help(self, scroll_down=100, use_keyboard=False):
keyboard_help_button = self._get_keyboard_help_button() keyboard_help_button = self._get_keyboard_help_button()
keyboard_help_dialog = self._get_keyboard_help_dialog() keyboard_help_dialog = self._get_keyboard_help_dialog()
dialog_modal_overlay, dialog_modal = self._get_dialog_components(keyboard_help_dialog) dialog_modal_overlay, dialog_modal = self._get_dialog_components(keyboard_help_dialog)
...@@ -238,15 +238,12 @@ class StandardInteractionTest(DefaultDataTestMixin, InteractionTestBase, Paramet ...@@ -238,15 +238,12 @@ class StandardInteractionTest(DefaultDataTestMixin, InteractionTestBase, Paramet
for _, definition in self.items_map.items(): for _, definition in self.items_map.items():
item = self._get_unplaced_item_by_value(definition.item_id) item = self._get_unplaced_item_by_value(definition.item_id)
ActionChains(self.browser).move_to_element(item).perform() ActionChains(self.browser).move_to_element(item).perform()
keyboard_help_text = (u'Press Ctrl-m on an item to select it for dropping, ' self.assertEqual(item.find_element_by_css_selector('.sr.draggable').text, ", draggable")
'then navigate to the zone you want to drop it on.')
self.assertEqual(item.find_element_by_css_selector('.sr.description').text, keyboard_help_text)
self.assertEqual(item.find_element_by_css_selector('.sr draggable').text, "draggable")
item.send_keys("") item.send_keys("")
item.send_keys(action_key) # grabbed an item item.send_keys(Keys.ENTER) # grabbed an item
self.assertEqual(item.find_element_by_css_selector('.sr draggable').text, "draggable, grabbed") self.assertEqual(item.find_element_by_css_selector('.sr.draggable').text, ", draggable, grabbed")
item.send_keys(Keys.ESCAPE) item.send_keys(Keys.ESCAPE)
self.assertEqual(item.find_element_by_css_selector('.sr draggable').text, "draggable") self.assertEqual(item.find_element_by_css_selector('.sr.draggable').text, ", draggable")
def test_alt_text_for_zones(self): def test_alt_text_for_zones(self):
self._get_popup() self._get_popup()
...@@ -450,21 +447,21 @@ class MultipleBlocksDataInteraction(ParameterizedTestsMixin, InteractionTestBase ...@@ -450,21 +447,21 @@ class MultipleBlocksDataInteraction(ParameterizedTestsMixin, InteractionTestBase
self._switch_to_block(0) 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(self.item_maps['block1'])
self._switch_to_block(1) self._switch_to_block(1)
self.parameterized_item_positive_feedback_on_good_move(self.item_maps['block2'], scroll_down=900) self.parameterized_item_positive_feedback_on_good_move(self.item_maps['block2'], scroll_down=1000)
def test_item_negative_feedback_on_bad_move(self): def test_item_negative_feedback_on_bad_move(self):
self._switch_to_block(0) 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(self.item_maps['block1'], self.all_zones['block1'])
self._switch_to_block(1) self._switch_to_block(1)
self.parameterized_item_negative_feedback_on_bad_move( self.parameterized_item_negative_feedback_on_bad_move(
self.item_maps['block2'], self.all_zones['block2'], scroll_down=900 self.item_maps['block2'], self.all_zones['block2'], scroll_down=1000
) )
def test_final_feedback_and_reset(self): def test_final_feedback_and_reset(self):
self._switch_to_block(0) self._switch_to_block(0)
self.parameterized_final_feedback_and_reset(self.item_maps['block1'], self.feedback['block1']) self.parameterized_final_feedback_and_reset(self.item_maps['block1'], self.feedback['block1'])
self._switch_to_block(1) self._switch_to_block(1)
self.parameterized_final_feedback_and_reset(self.item_maps['block2'], self.feedback['block2'], scroll_down=900) self.parameterized_final_feedback_and_reset(self.item_maps['block2'], self.feedback['block2'], scroll_down=1000)
def test_keyboard_help(self): def test_keyboard_help(self):
self._switch_to_block(0) self._switch_to_block(0)
...@@ -474,7 +471,7 @@ class MultipleBlocksDataInteraction(ParameterizedTestsMixin, InteractionTestBase ...@@ -474,7 +471,7 @@ class MultipleBlocksDataInteraction(ParameterizedTestsMixin, InteractionTestBase
self._switch_to_block(1) self._switch_to_block(1)
# Test mouse and keyboard interaction # Test mouse and keyboard interaction
self.interact_with_keyboard_help(scroll_down=1200) self.interact_with_keyboard_help(scroll_down=1000)
self.interact_with_keyboard_help(scroll_down=0, use_keyboard=True) self.interact_with_keyboard_help(scroll_down=0, use_keyboard=True)
......
tests/integration/test_interaction_assessment.py
...@@ -7,6 +7,7 @@ from mock import Mock, patch ...@@ -7,6 +7,7 @@ from mock import Mock, patch
import time import time
import re import re
from selenium.common.exceptions import NoSuchElementException
from selenium.webdriver.support.ui import WebDriverWait from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.common.keys import Keys from selenium.webdriver.common.keys import Keys
...@@ -161,7 +162,7 @@ class AssessmentInteractionTest( ...@@ -161,7 +162,7 @@ class AssessmentInteractionTest(
# Incorrect item remains placed # Incorrect item remains placed
def _assert_placed(item_id, zone_title): def _assert_placed(item_id, zone_title):
item = self._get_placed_item_by_value(item_id) item = self._get_placed_item_by_value(item_id)
item_description = item.find_element_by_css_selector('.sr') item_description = item.find_element_by_css_selector('.sr.description')
self.assertEqual(item_description.text, 'Placed in: {}'.format(zone_title)) self.assertEqual(item_description.text, 'Placed in: {}'.format(zone_title))
_assert_placed(1, TOP_ZONE_TITLE) _assert_placed(1, TOP_ZONE_TITLE)
...@@ -206,12 +207,13 @@ class AssessmentInteractionTest( ...@@ -206,12 +207,13 @@ class AssessmentInteractionTest(
self.assertEqual(item.get_attribute('class'), 'option fade') self.assertEqual(item.get_attribute('class'), 'option fade')
item_content = item.find_element_by_css_selector('.item-content') item_content = item.find_element_by_css_selector('.item-content')
item_description_id = '-item-{}-description'.format(item_definition.item_id) self.assertEqual(item_content.get_attribute('aria-describedby'), None)
self.assertEqual(item_content.get_attribute('aria-describedby'), item_description_id)
describedby_text = (u'Press "Enter", "Space", "Ctrl-m", or "⌘-m" on an item to select it for dropping, ' try:
'then navigate to the zone you want to drop it on.') item.find_element_by_css_selector('.sr.description')
self.assertEqual(item.find_element_by_css_selector('.sr').text, describedby_text) self.fail("Description element should not be present")
except NoSuchElementException:
pass
def test_show_answer(self): def test_show_answer(self):
""" """
......
tests/integration/test_render.py
...@@ -166,10 +166,7 @@ class TestDragAndDropRender(BaseIntegrationTest): ...@@ -166,10 +166,7 @@ class TestDragAndDropRender(BaseIntegrationTest):
def test_item_bank(self): def test_item_bank(self):
self.load_scenario() self.load_scenario()
item_bank = self._page.find_element_by_css_selector('.item-bank') item_bank = self._page.find_element_by_css_selector('.item-bank')
description = item_bank.find_element_by_css_selector('p.zone-description') self.assertEqual(item_bank.get_attribute("aria-label"), 'Item Bank')
self.assertEqual(description.text, 'Item Bank')
# Description should only be visible to screen readers:
self.assertEqual(description.get_attribute('class'), 'zone-description sr')
def test_zones(self): def test_zones(self):
self.load_scenario() self.load_scenario()
...@@ -216,12 +213,10 @@ class TestDragAndDropRender(BaseIntegrationTest): ...@@ -216,12 +213,10 @@ class TestDragAndDropRender(BaseIntegrationTest):
def test_keyboard_help(self): def test_keyboard_help(self):
self.load_scenario() self.load_scenario()
keyboard_help_button = self._get_keyboard_help_button()
keyboard_help_dialog = self._get_keyboard_help_dialog() keyboard_help_dialog = self._get_keyboard_help_dialog()
dialog_modal_overlay = keyboard_help_dialog.find_element_by_css_selector('.modal-window-overlay') dialog_modal_overlay = keyboard_help_dialog.find_element_by_css_selector('.modal-window-overlay')
dialog_modal = keyboard_help_dialog.find_element_by_css_selector('.modal-window') dialog_modal = keyboard_help_dialog.find_element_by_css_selector('.modal-window')
self.assertEqual(keyboard_help_button.get_attribute('tabindex'), '0')
self.assertFalse(dialog_modal_overlay.is_displayed()) self.assertFalse(dialog_modal_overlay.is_displayed())
self.assertFalse(dialog_modal.is_displayed()) self.assertFalse(dialog_modal.is_displayed())
self.assertEqual(dialog_modal.get_attribute('role'), 'dialog') self.assertEqual(dialog_modal.get_attribute('role'), 'dialog')
......
tests/pylintrc
...@@ -14,7 +14,8 @@ disable= ...@@ -14,7 +14,8 @@ disable=
too-few-public-methods, too-few-public-methods,
too-many-public-methods, too-many-public-methods,
invalid-name, invalid-name,
no-member no-member,
star-args
[SIMILARITIES] [SIMILARITIES]
min-similarity-lines=4 min-similarity-lines=4
......
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