Keyboard accessibility for resetting exercise.

drag_and_drop_v2/public/js/drag_and_drop.js

@@ -61,6 +61,11 @@ function DragAndDropBlock(runtime, element, configuration) {
                 }
             });
             $element.on('click', '.reset-button', resetExercise);
+            $element.on('keydown', '.reset-button', function(evt) {
+                if (evt.which === RET) {
+                    resetExercise(evt);
+                }
+            });
             $element.on('click', '.submit-input', submitInput);
 
             // Indicate that exercise is done loading
@@ -483,7 +488,8 @@ function DragAndDropBlock(runtime, element, configuration) {
         applyState();
     };
 
-    var resetExercise = function() {
+    var resetExercise = function(evt) {
+        evt.preventDefault();
         $.ajax({
             type: 'POST',
             url: runtime.handlerUrl(element, 'reset'),

drag_and_drop_v2/public/js/view.js

@@ -147,10 +147,13 @@
         var properties = { attributes: { 'aria-live': 'polite' } };
         return (
             h('section.feedback', properties, [
-                h('div.reset-button', {style: {display: reset_button_display}}, gettext('Reset exercise')),
-                h('h3.title1', {style: {display: feedback_display}}, gettext('Feedback')),
-                h('p.message', {style: {display: feedback_display},
-                                innerHTML: ctx.feedback_html})
+                h(
+                    'a.reset-button',
+                    { style: { display: reset_button_display }, attributes: { tabindex: 0 }},
+                    gettext('Reset exercise')
+                ),
+                h('h3.title1', { style: { display: feedback_display } }, gettext('Feedback')),
+                h('p.message', { style: { display: feedback_display }, innerHTML: ctx.feedback_html })
             ])
         );
     };