From 5c1e695f8e5ab77f5c1aa5b1988e26fb2f7c91d8 Mon Sep 17 00:00:00 2001
From: Brian Jacobel <bjacobel@gmail.com>
Date: Wed, 17 Aug 2016 15:04:33 -0400
Subject: [PATCH 1/2] Add aria-label to WMD preview area

TNL-5168
---
 lms/static/coffee/src/customwmd.coffee | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lms/static/coffee/src/customwmd.coffee b/lms/static/coffee/src/customwmd.coffee
index 8a23f8231e..44b666d5b1 100644
--- a/lms/static/coffee/src/customwmd.coffee
+++ b/lms/static/coffee/src/customwmd.coffee
@@ -126,7 +126,7 @@ if Markdown?
       $elem.empty()
       _append = appended_id || ""
       wmdInputId = "wmd-input#{_append}"
-      $wmdPreviewContainer = $("<div>").addClass("wmd-preview-container")
+      $wmdPreviewContainer = $("<div>").addClass("wmd-preview-container").attr("aria-label", "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")

From 50dab15888e606c7e86cb4c4b743a6ba9a972c08 Mon Sep 17 00:00:00 2001
From: Brian Jacobel <bjacobel@gmail.com>
Date: Wed, 17 Aug 2016 16:13:10 -0400
Subject: [PATCH 2/2] Use real buttons for WMD buttons

TNL-5161
---
 lms/static/coffee/src/customwmd.coffee           | 4 +++-
 lms/static/js/Markdown.Editor.js                 | 3 +--
 lms/static/sass/discussion/_discussion.scss      | 8 ++------
 lms/static/sass/discussion/elements/_editor.scss | 9 +++++++--
 4 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/lms/static/coffee/src/customwmd.coffee b/lms/static/coffee/src/customwmd.coffee
index 44b666d5b1..c0240b4617 100644
--- a/lms/static/coffee/src/customwmd.coffee
+++ b/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")
diff --git a/lms/static/js/Markdown.Editor.js b/lms/static/js/Markdown.Editor.js
index 95e45a4464..9149a80471 100644
--- a/lms/static/js/Markdown.Editor.js
+++ b/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';
diff --git a/lms/static/sass/discussion/_discussion.scss b/lms/static/sass/discussion/_discussion.scss
index 67a0e99127..f237255670 100644
--- a/lms/static/sass/discussion/_discussion.scss
+++ b/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;
-  }
 }
 
 // ====================
diff --git a/lms/static/sass/discussion/elements/_editor.scss b/lms/static/sass/discussion/elements/_editor.scss
index eb63beeffa..1756ddfb53 100644
--- a/lms/static/sass/discussion/elements/_editor.scss
+++ b/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 {