From dd087a1e544322b22b16038e09d8ae9c794822ac Mon Sep 17 00:00:00 2001
From: Tyler Hallada <thallada@edx.org>
Date: Wed, 1 Nov 2017 16:47:28 -0400
Subject: [PATCH] Make the Section Highlights in outline a button

---
 cms/static/js/views/course_outline.js      | 8 +++++---
 cms/static/sass/views/_outline.scss        | 6 ++++++
 cms/templates/js/course-outline.underscore | 4 ++--
 3 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/cms/static/js/views/course_outline.js b/cms/static/js/views/course_outline.js
index 3872aa2bca..d93755e191 100644
--- a/cms/static/js/views/course_outline.js
+++ b/cms/static/js/views/course_outline.js
@@ -220,9 +220,11 @@ define(['jquery', 'underscore', 'js/views/xblock_outline', 'common/js/components
                     event.preventDefault();
                     this.publishXBlock();
                 }.bind(this));
-                element.find('.highlights-button').click(function(event) {
-                    event.preventDefault();
-                    this.highlightsXBlock();
+                element.find('.highlights-button').on('click keydown', function(event) {
+                    if (event.type === 'click' || event.which === 13 || event.which === 32) {
+                        event.preventDefault();
+                        this.highlightsXBlock();
+                    }
                 }.bind(this));
             },
 
diff --git a/cms/static/sass/views/_outline.scss b/cms/static/sass/views/_outline.scss
index ab5880b39b..3723e46e0d 100644
--- a/cms/static/sass/views/_outline.scss
+++ b/cms/static/sass/views/_outline.scss
@@ -638,6 +638,12 @@
   .highlights-button {
     cursor: pointer;
     color: theme-color("primary");
+
+    // remove button styling
+    border: none;
+    background: none;
+    padding: 0;
+    font-weight: 600;
   }
 
   .number-highlights {
diff --git a/cms/templates/js/course-outline.underscore b/cms/templates/js/course-outline.underscore
index 22dbb071c1..5599a00181 100644
--- a/cms/templates/js/course-outline.underscore
+++ b/cms/templates/js/course-outline.underscore
@@ -203,10 +203,10 @@ if (is_proctored_exam) {
             <% if (xblockInfo.get('highlights_enabled') && course.get('self_paced') && xblockInfo.isChapter()) { %>
                 <div class="block-highlights">
                     <% var number_of_highlights = (xblockInfo.get('highlights') || []).length; %>
-                        <span class="block-highlights-value highlights-button action-button">
+                        <button class="block-highlights-value highlights-button action-button">
                             <span class="number-highlights"><%- number_of_highlights %></span>
                             <%- gettext('Section Highlights') %>
-                        </span>
+                        </button>
                 </div>
             <% } %>
             <% if (xblockInfo.get('is_time_limited')) { %>