[TNL-6022] Added SR-only keyboard help button to the front of the problem.

drag_and_drop_v2/public/js/drag_and_drop.js

@@ -2,6 +2,9 @@ function DragAndDropTemplates(configuration) {
     "use strict";
     var h = virtualDom.h;
 
+    var keyboardHelpButtonClass = "keyboard-help-button";
+    var keyboardHelpText = gettext('Keyboard Help');
+
     var itemSpinnerTemplate = function(item) {
         if (!item.xhr_active) {
             return null;
@@ -380,7 +383,7 @@ function DragAndDropTemplates(configuration) {
         }
         return(
             h("section.action-toolbar-item.sidebar-buttons", {}, [
-                sidebarButtonTemplate("keyboard-help-button", "fa-question", gettext('Keyboard Help')),
+                sidebarButtonTemplate(keyboardHelpButtonClass, "fa-question", keyboardHelpText),
                 sidebarButtonTemplate("reset-button", "fa-refresh", gettext('Reset'), ctx.disable_reset_button),
                 showAnswerButton,
             ])
@@ -451,6 +454,10 @@ function DragAndDropTemplates(configuration) {
         )
     };
 
+    var forwardKeyboardHelpButtonTemplate = function(ctx) {
+        return h("button", { attributes: {tabindex: 0}, className: keyboardHelpButtonClass }, keyboardHelpText);
+    };
+
     var progressTemplate = function(ctx) {
         // Formats a number to 4 decimals without trailing zeros
         // (1.00 -> '1'; 1.50 -> '1.5'; 1.333333333 -> '1.3333').
@@ -531,6 +538,7 @@ function DragAndDropTemplates(configuration) {
                     problemHeader,
                     h('p', {innerHTML: ctx.problem_html}),
                 ]),
+                h('div', {'className': 'sr'}, [forwardKeyboardHelpButtonTemplate(ctx)]),
                 h('section.drag-container', {}, [
                     h('div.item-bank', item_bank_properties, [
                         h('p', { className: 'zone-description sr' }, gettext('Item Bank')),