Use real buttons for WMD buttons

TNL-5161

lms/static/coffee/src/customwmd.coffee

@@ -126,7 +126,9 @@ if Markdown?
       $elem.empty()
       _append = appended_id || ""
       wmdInputId = "wmd-input#{_append}"
-      $wmdPreviewContainer = $("<div>").addClass("wmd-preview-container").attr("aria-label", "HTML preview of post")
+      $wmdPreviewContainer = $("<div>").addClass("wmd-preview-container")
+          .attr("role", "region")
+          .attr("aria-label", gettext("HTML preview of post"))
           .append($("<div>").addClass("wmd-preview-label").text(gettext("Preview")))
           .append($("<div>").attr("id", "wmd-preview#{_append}").addClass("wmd-panel wmd-preview"))
       $wmdPanel = $("<div>").addClass("wmd-panel")

lms/static/js/Markdown.Editor.js

@@ -1434,8 +1434,7 @@
             buttonRow = buttonBar.appendChild(buttonRow);
             var xPosition = 0;
             var makeButton = function(id, title, XShift, textOp) {
-                var button = document.createElement('span');
-                button.setAttribute('role', 'button');
+                var button = document.createElement('button');
                 button.tabIndex = 0;
                 button.className = 'wmd-button';
                 button.style.left = xPosition + 'px';

lms/static/sass/discussion/_discussion.scss

@@ -143,15 +143,15 @@ body.discussion {
   }
 
   .wmd-button {
-    @include padding-right(3px);
-    @include padding-left(3px);
     position: absolute;
     display: inline-block;
     width: 20px;
     height: 20px;
+    border: none;
     background: none;
     list-style: none;
     cursor: pointer;
+    padding: 0;
   }
 
   .wmd-button > span {
@@ -337,10 +337,6 @@ body.discussion {
     @include blue-button;
     @include float(left);
   }
-
-  .wmd-button {
-    width: 15px;
-  }
 }
 
 // ====================

lms/static/sass/discussion/elements/_editor.scss

@@ -87,13 +87,18 @@
   .wmd-button {
     position: absolute;
     display: inline-block;
-    padding-right: 3px;
-    padding-left: 2px;
     width: 20px;
     height: 20px;
+    border: none;
     background: none;
     list-style: none;
     cursor: pointer;
+    padding: 0;
+  }
+
+  .wmd-button:hover {
+    background: none;
+    box-shadow: none;
   }
 
   .wmd-button > span {