Replace a href=# elements with buttons

acceptance_tests/mixins.py

@@ -156,7 +156,7 @@ class PrimaryNavMixin(CourseApiMixin):
         """
         Verify the user menu functions properly.
         """
-        element = self.page.q(css='a.active-user.dropdown-toggle')
+        element = self.page.q(css='button.active-user.dropdown-toggle')
         self.assertTrue(element.present)
         self.assertEqual(element.attrs('aria-expanded')[0], 'false')
 

analytics_dashboard/courses/templates/courses/home.html

@@ -11,7 +11,7 @@
     <div class="container ">
       <ul class="nav navbar-nav">
         <li class="active nav-section">
-          <a href="#"><span class="link-label">{% trans "Course Home" %}</span></a>
+          <div class="course-label">{% trans "Course Home" %}</div>
           <span class="sr-only">({% trans "Active" %})</span>
         </li>
 

analytics_dashboard/static/apps/learners/roster/templates/search.underscore

@@ -8,15 +8,15 @@
             name="<%- name %>"
             <% if (value) { %> value="<%- value %>" <% } %>
         />
-        <a href="#" type="button" class="clear btn" data-backgrid-action="clear">
+        <button type="button" class="clear btn" data-backgrid-action="clear">
             <span class="fa fa-times" aria-hidden="true"></span>
             <span class="sr-only"><%- clearSearchText %></span>
-        </a>
+        </button>
     </div>
     <span class="input-group-btn">
-        <a href="#" type="button" class="search btn btn-primary">
+        <button type="button" class="search btn btn-primary">
             <span class="fa fa-search" aria-hidden="true"></span>
             <span class="sr-only"><%- executeSearchText %></span>
-        </a>
+        </button>
     </span>
 </div>

analytics_dashboard/static/apps/learners/roster/views/search.js

@@ -26,7 +26,11 @@ define(function(require) {
         },
 
         events: function() {
-            return _.extend(Backgrid.Extension.ServerSideFilter.prototype.events, {'click .search': 'search'});
+            return _.extend(Backgrid.Extension.ServerSideFilter.prototype.events,
+                {
+                    'click .search': 'search',
+                    'click .clear.btn': 'clear'
+                });
         },
 
         template: _.template(learnerSearchTemplate, null, {variable: null}),
@@ -37,6 +41,10 @@ define(function(require) {
             Backgrid.Extension.ServerSideFilter.prototype.initialize.call(this, options);
         },
 
+        clearButton: function() {
+            return this.$el.find('button[data-backgrid-action=clear]');
+        },
+
         render: function() {
             this.value = this.options.collection.getSearchString();
             this.$el.empty().append(this.template({
@@ -69,6 +77,7 @@ define(function(require) {
         clear: function(event) {
             event.preventDefault();
             this.collection.unsetSearchString();
+            this.searchBox().val('');
             this.execute();
         },
 

analytics_dashboard/static/apps/learners/roster/views/spec/roster-spec.js

@@ -560,7 +560,7 @@ define(function(require) {
                 executeSearch(searchString);
                 expectSearchedFor(searchString);
                 getLastRequest().respond(200, {}, JSON.stringify(getResponseBody(1, 1)));
-                $('a.clear').click();
+                $('button.clear').click();
                 expect(getLastRequestParams().text_search).toBeUndefined();
             });
 

analytics_dashboard/static/sass/_developer.scss

@@ -22,12 +22,30 @@
   }
 }
 
+#main-nav .navbar-nav li > button {
+  padding-top: 30px;
+  padding-bottom: 30px;
+}
+
 button.chart-info {
   padding-left: 0;
   padding-top: 0;
   border: none;
 }
 
+.clear.btn {
+  background: transparent;
+}
+
+.course-label {
+  padding-top: 18px;
+  padding-bottom: 0px;
+  padding-left: 15px;
+  padding-right: 15px;
+  min-height: 55px;
+  
+}
+
 .chart-tooltip {
   float: right;
   padding-right: $padding-small-horizontal;
@@ -155,6 +173,16 @@ button.chart-info {
   .nav-section {
     @include a-background(transparent);
   }
+
+  li > button {
+    line-height: 20px;
+    border: none;
+    background: transparent;
+  }
+
+  li > button:focus {
+    outline: dotted 1px #000;
+  }
 }
 
 // lens navigation consists of a drop down and the lens sections in a navigation
@@ -182,7 +210,8 @@ $lens-box-model: border-box;
     .dropdown {
       padding-right: 10px;
 
-      a {
+      a, button {
+        background: transparent;
         text-transform: uppercase;
         color: $navbar-default-link-active-color;
       }
@@ -206,6 +235,10 @@ $lens-box-model: border-box;
       padding-bottom: 0px;
     }
 
+    li > button {
+      min-height: $lens-nav-height;
+    }
+
     .nav-section {
       @include a-background(transparent);
     }

analytics_dashboard/templates/header.html

@@ -34,12 +34,12 @@ Partial: App-wide header element
           </li>
         {% endif %}
         <li class="dropdown">
-          <a href="#" class="dropdown-toggle active-user navbar-link" data-toggle="dropdown" role="button"
+          <button class="dropdown-toggle active-user navbar-link" data-toggle="dropdown" role="button"
              id="userMenu">
             <span class="ico-user fa fa-graduation-cap" aria-hidden="true"></span>
             <span class="active-user-name">{{ request.user.username }}</span>
             <span class="ico ico-indicator fa fa-caret-down" aria-hidden="true"></span>
-          </a>
+          </button>
 
           <ul class="dropdown-menu active-user-nav" role="menu" aria-labelledby="userMenu">
             <li>

analytics_dashboard/templates/lens-navigation.html

@@ -9,14 +9,14 @@ Partial for displaying the lens navigation and the sections within the lenses.
     <div class="container ">
       <ul class="nav navbar-nav">
         <li class="dropdown">
-          <a href="#" class="dropdown-toggle navbar-link" data-toggle="dropdown" role="button" id="lensPrimaryMenu">
+          <button class="dropdown-toggle navbar-link" data-toggle="dropdown" role="button" id="lensPrimaryMenu">
             <span class="link-label">
             <span class="ico fa {{ primary_nav_item.icon }}" aria-hidden="true"></span>
             {{ primary_nav_item.label }}
             {# Translators: This refers to the active tab/navigation item. #}
             <span class="sr-only">({% trans "Active" %})</span>
             <span class="ico ico-indicator fa fa-caret-down" aria-hidden="true"></span></span>
-          </a>
+          </button>
 
           <ul class="dropdown-menu" role="menu" aria-labelledby="lensPrimaryMenu">
             {% for item in primary_nav_items %}