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

@@ -1,9 +1,11 @@
 $(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
   dropdownMenuToggle.toggle(function() {
     dropdownMenu.addClass("expanded").find('a').first().focus();
@@ -12,7 +14,7 @@ $(document).ready(function () {
     dropdownMenu.removeClass("expanded");
     dropdownMenuToggle.removeClass("active").attr("aria-expanded", "false").focus();
   });
-  
+
   //catch keypresses when focused on dropdownMenuToggle (we only care about spacebar keypresses here)
   dropdownMenuToggle.on('keydown', function(event){
     // if space key pressed
@@ -21,12 +23,12 @@ $(document).ready(function () {
       event.preventDefault();
     }
   });
-  
+
   //catch keypresses when inside dropdownMenu (we want to catch spacebar; escape; up arrow or shift+tab; and down arrow or tab)
   dropdownMenu.on('keydown', function(event){
     catchKeyPress($(this), event);
   });
-  
+
   function catchKeyPress(object, event) {
     // get currently focused item
     var focusedItem = jQuery(':focus');
@@ -36,22 +38,22 @@ $(document).ready(function () {
 
     // get the index of the currently focused item
     var focusedItemIndex = menuItems.index(focusedItem);
-    
+
     // var to store next focused item index
     var itemToFocusIndex;
-    
+
     // if space key pressed
     if ( event.which == 32) {
       dropdownMenuToggle.click();
       event.preventDefault();
     }
-    
+
     // if escape key pressed
     if (event.which == 27) {
       dropdownMenuToggle.click();
       event.preventDefault();
     }
-    
+
     // if up arrow key pressed or shift+tab
     if (event.which == 38 || (event.which == 9 && event.shiftKey)) {
       // if first item go to last
@@ -63,7 +65,7 @@ $(document).ready(function () {
       }
       event.preventDefault();
     }
-    
+
     // if down arrow key pressed or tab key
     if (event.which == 40 || event.which == 9) {
       // if last item go to first
@@ -76,4 +78,4 @@ $(document).ready(function () {
       event.preventDefault();
     }
   }
-});
+});

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;
@@ -486,7 +496,7 @@ header.global-new {
         }
       }
     }
-     a.user-link {
+    a.user-link {
       @include padding(5px, 2px, 10px, 10px);
       position: relative;
       text-transform: none;
@@ -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>