Merge pull request #10527 from edx/clytwynec/ac-230

Navigation dropdown link should be button 

common/test/acceptance/tests/lms/test_account_settings.py

@@ -461,7 +461,7 @@ class AccountSettingsA11yTest(AccountSettingsTestMixin, WebAppTest):
         self.visit_account_settings_page()
         self.account_settings_page.a11y_audit.config.set_rules({
             'ignore': [
-                'link-href',  # TODO: AC-233, AC-230
+                'link-href',  # TODO: AC-233, AC-238
                 'skip-link',  # TODO: AC-179
             ],
         })

common/test/acceptance/tests/lms/test_lms_dashboard.py

@@ -236,7 +236,7 @@ class LmsDashboardA11yTest(BaseLmsDashboardTest):
         self.dashboard_page.a11y_audit.config.set_rules({
             "ignore": [
                 'skip-link',  # TODO: AC-179
-                'link-href',  # TODO: AC-230
+                'link-href',  # TODO: AC-238, AC-179
             ],
         })
 

lms/static/js/my_courses_dropdown.js

 $(document).ready(function () {
+  'use strict';
+
   // define variables for code legibility
-  var dropdownMenuToggle = $('a.dropdown');
-  var dropdownMenu = $('ul.dropdown-menu');
+  var dropdownMenuToggle = $('.dropdown');
+  var dropdownMenu = $('.dropdown-menu');
   var menuItems = dropdownMenu.find('a');
 
   // bind menu toggle click for later use

lms/static/sass/shared/_header.scss

@@ -191,6 +191,16 @@ header.global {
       }
     }
 
+    .dropdown {
+      font-size: $body-font-size;
+      padding: 0 ($baseline/2);
+      color: $base-font-color;
+      border: none;
+      background: $white;
+      box-shadow: none;
+      text-shadow: none;
+    }
+
     .dropdown-menu {
       background: $white;
       border-radius: 4px;
@@ -534,6 +544,16 @@ header.global-new {
       }
     }
 
+    .dropdown {
+      font-size: $body-font-size;
+      padding: 0 ($baseline/2);
+      color: $base-font-color;
+      border: none;
+      background: $white;
+      box-shadow: none;
+      text-shadow: none;
+    }
+
     .dropdown-menu {
       background: $border-color-4;
       border-radius: 4px;

lms/templates/navigation-edx.html

@@ -83,7 +83,7 @@ site_status_msg = get_site_status_msg(course_id)
         </a>
       </li>
       <li class="primary">
-        <a href="#" class="dropdown" aria-haspopup="true" aria-expanded="false"><span class="sr">${_("More options dropdown")}</span> &#9662;</a>
+        <button class="dropdown" aria-haspopup="true" aria-expanded="false"><span class="sr">${_("More options dropdown")}</span> &#9662;</button>
         <ul class="dropdown-menu" aria-label="More Options" role="menu">
           <%block name="navigation_dropdown_menu_links" >
             <li><a href="${reverse('dashboard')}">${_("Dashboard")}</a></li>

lms/templates/navigation.html

@@ -86,7 +86,7 @@ site_status_msg = get_site_status_msg(course_id)
         </a>
       </li>
       <li class="primary">
-        <a href="#" class="dropdown" aria-haspopup="true" aria-expanded="false"><span class="sr">${_("More options dropdown")}</span><i class="fa fa-sort-desc" aria-hidden="true"></i></a>
+        <button class="dropdown" aria-haspopup="true" aria-expanded="false"><span class="sr">${_("More options dropdown")}</span><span class="fa fa-sort-desc" aria-hidden="true"></span></button>
         <ul class="dropdown-menu" aria-label="More Options" role="menu">
           <%block name="navigation_dropdown_menu_links" >
             <li><a href="${reverse('dashboard')}">${_("Dashboard")}</a></li>