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 {