Make button-action links into proper buttons.

drag_and_drop_v2/public/css/drag_and_drop.css

@@ -355,10 +355,16 @@
     margin-left: 2%;
 }
 
-.xblock--drag-and-drop .keyboard-help-button,
-.xblock--drag-and-drop .reset-button {
+.xblock--drag-and-drop .link-button {
+    padding: 0;
+    margin: 0;
     cursor: pointer;
     color: #2d74b3;
+    font-weight: normal;
+    font-size: 12pt;
+    background: none;
+    box-shadow: none;
+    border: none;
 }
 
 .xblock--drag-and-drop .reset-button {
@@ -366,6 +372,24 @@
     margin-top: 3px;
 }
 
+.xblock--drag-and-drop .link-button:focus {
+    background: none;
+    box-shadow: none;
+    border: none;
+}
+
+.xblock--drag-and-drop .link-button:active {
+    background: none;
+    box-shadow: none;
+    border: none;
+}
+
+.xblock--drag-and-drop .link-button:hover {
+    background: none;
+    box-shadow: none;
+    border: none;
+}
+
 /* Make sure screen-reader content is hidden in the workbench: */
 .xblock--drag-and-drop .sr {
     border: 0;

drag_and_drop_v2/public/js/view.js

@@ -174,8 +174,8 @@
         return (
             h('section.feedback', properties, [
                 h(
-                    'a.reset-button',
-                    { style: { display: reset_button_display }, attributes: { tabindex: 0 }},
+                    'button.reset-button.link-button',
+                    { style: { display: reset_button_display }, attributes: { tabindex: 0 }, 'aria-live': 'off'},
                     gettext('Reset problem')
                 ),
                 h('h3.title1', { style: { display: feedback_display } }, gettext('Feedback')),
@@ -189,7 +189,7 @@
         var dialog_style = {};
         return (
             h('section.keyboard-help', [
-                h('a.keyboard-help-button', { attributes: { tabindex: 0 } }, gettext('Keyboard Help')),
+                h('button.keyboard-help-button.link-button', { attributes: { tabindex: 0 } }, gettext('Keyboard Help')),
                 h('div.keyboard-help-dialog', [
                     h('div.modal-window-overlay'),
                     h('div.modal-window', { attributes: dialog_attributes, style: dialog_style }, [

drag_and_drop_v2/public/themes/apros.css

@@ -82,8 +82,7 @@
     font-size: 18pt;
 }
 
-.themed-xblock.xblock--drag-and-drop .keyboard-help-button,
-.themed-xblock.xblock--drag-and-drop .reset-button {
+.themed-xblock.xblock--drag-and-drop .link-button {
     cursor: pointer;
     color: #3384ca;
 }
\ No newline at end of file