From f1406ec61e0b289c4b2d6e3db750ddfaa8eb80d7 Mon Sep 17 00:00:00 2001
From: "E. Kolpakov" <eugeny@opencraft.com>
Date: Wed, 3 Aug 2016 10:15:50 +0300
Subject: [PATCH] [SOL-1944] Review notes:

* Unique labelledby for modal popups
* Removed stale button template parameters
* Help and Reset are left aligned for smaller screens
---
 drag_and_drop_v2/public/css/drag_and_drop.css | 22 +++++++++++++++----
 drag_and_drop_v2/public/js/drag_and_drop.js   |  7 +++---
 2 files changed, 22 insertions(+), 7 deletions(-)

diff --git a/drag_and_drop_v2/public/css/drag_and_drop.css b/drag_and_drop_v2/public/css/drag_and_drop.css
index 4205b008d..918ee0266 100644
--- a/drag_and_drop_v2/public/css/drag_and_drop.css
+++ b/drag_and_drop_v2/public/css/drag_and_drop.css
@@ -420,6 +420,7 @@
 .xblock--drag-and-drop .actions-toolbar {
     min-height: 3.75em;
     width: auto;
+    position: relative;
 }
 
 .xblock--drag-and-drop .actions-toolbar .action-toolbar-item {
@@ -434,21 +435,34 @@
 }
 
 .xblock--drag-and-drop .actions-toolbar .action-toolbar-item.sidebar-buttons {
-    float: right;
-    margin: 0;
+    text-align: left;
+    display: block;
+}
+
+@media (min-width: 768px) {
+    .xblock--drag-and-drop .actions-toolbar .action-toolbar-item.sidebar-buttons {
+        position: absolute;
+        right: 0;
+        margin: 0;
+        padding-right: -5px;
+    }
 }
 
 .xblock--drag-and-drop .sidebar-buttons .sidebar-button-wrapper {
     border-right: 1px solid #ddd;
     border-collapse: collapse;
-    padding-right: 5px;
-    margin-left: 5px;
+    padding: 0 5px;
     display: inline-block;
     height: 100%;
 }
 
+.xblock--drag-and-drop .sidebar-buttons .sidebar-button-wrapper:first-child {
+    padding-left: 0;
+}
+
 .xblock--drag-and-drop .sidebar-buttons .sidebar-button-wrapper:last-child {
     border-right: none;
+    padding-right: 0;
 }
 
 .xblock--drag-and-drop .sidebar-buttons .btn-brand {
diff --git a/drag_and_drop_v2/public/js/drag_and_drop.js b/drag_and_drop_v2/public/js/drag_and_drop.js
index ce8c3d7e5..4153e623e 100644
--- a/drag_and_drop_v2/public/js/drag_and_drop.js
+++ b/drag_and_drop_v2/public/js/drag_and_drop.js
@@ -197,12 +197,13 @@ function DragAndDropTemplates(configuration) {
     };
 
     var keyboardHelpPopupTemplate = function(ctx) {
+        var labelledby_id = 'modal-window-title-'+configuration.url_name;
         return (
             h('div.keyboard-help-dialog', [
                 h('div.modal-window-overlay'),
-                h('div.modal-window', {attributes: {role: 'dialog', 'aria-labelledby': 'modal-window-title'}}, [
+                h('div.modal-window', {attributes: {role: 'dialog', 'aria-labelledby': labelledby_id}}, [
                     h('div.modal-header', [
-                        h('h2.modal-window-title#modal-window-title', gettext('Keyboard Help'))
+                        h('h2.modal-window-title#'+labelledby_id, gettext('Keyboard Help'))
                     ]),
                     h('div.modal-content', [
                         h('p', gettext('You can complete this problem using only your keyboard.')),
@@ -238,7 +239,7 @@ function DragAndDropTemplates(configuration) {
         );
     };
 
-    var sidebarButtonTemplate = function(buttonClass, iconClass, buttonText, disabled, tabindex) {
+    var sidebarButtonTemplate = function(buttonClass, iconClass, buttonText, disabled) {
         return (
             h('span.sidebar-button-wrapper', {}, [
                 h(