Merge pull request #16418 from edx/thallada/ret-section-highlights-button

Make the Section Highlights in outline a button

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));
             },
 

cms/static/sass/views/_outline.scss

@@ -639,6 +639,12 @@
   .highlights-button {
     cursor: pointer;
     color: theme-color("primary");
+
+    // remove button styling
+    border: none;
+    background: none;
+    padding: 0;
+    font-weight: 600;
   }
 
   .number-highlights {

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')) { %>