Merge pull request #1884 from 0xF013/feature/8747-keyboard-shortcuts-and-help-not-working-on-workpackage-list

fix keyboard shortcuts and help not working on workpackage list

app/assets/javascripts/keyboard_shortcuts.js

@@ -29,6 +29,11 @@
 //= require mousetrap
 
 (function($){
+
+  var accessibleListSelector = "table.list, table.keyboard-accessible-list";
+  var accessibleRowSelector = "table.list tr, table.keyboard-accessible-list tr";
+
+
   var menu_sidebar = function() {
     return $('div#menu-sidebar');
   };
@@ -130,7 +135,7 @@
   var find_list_in_page = function(){
     var dom_lists, focus_elements;
     focus_elements = [];
-    dom_lists = $('table.list');
+    dom_lists = $(accessibleListSelector);
     dom_lists.find('tbody tr').each(function(index, tr){
       var first_link = $(tr).find('a:visible')[0];
       if ( first_link !== undefined ) { focus_elements.push(first_link); }
@@ -142,7 +147,7 @@
     var list, index;
     list = find_list_in_page();
     if (list === null) { return; }
-    index = list.indexOf($(document.activeElement).parents('table.list tr').find('a:visible')[0]);
+    index = list.indexOf($(document.activeElement).parents(accessibleRowSelector).find('a:visible')[0]);
     $(list[(index+offset+list.length) % list.length]).focus();
   };
 
@@ -175,16 +180,18 @@
 
   Mousetrap.bind('p',     function(){ search_project();      return false; });
   Mousetrap.bind('s',     function(){ search_global();       return false; });
-})(jQuery);
 
-jQuery(function(){
-  // simulated hover effect on table lists when using the keyboard
-  var tables = jQuery('table.list');
-  if (tables.size() === 0) { return; }
-  tables.on('blur', 'tr *', function(){
-    jQuery(this).parents('table.list tr').removeClass('keyboard_hover');
-  });
-  tables.on('focus', 'tr *', function(){
-    jQuery(this).parents('table.list tr').addClass('keyboard_hover');
+  jQuery(function(){
+    // simulated hover effect on table lists when using the keyboard
+    var tables = jQuery(accessibleListSelector);
+    if (tables.size() === 0) { return; }
+    tables.on('blur', 'tr *', function(){
+      jQuery(this).parents(accessibleRowSelector).removeClass('keyboard_hover');
+    });
+    tables.on('focus', 'tr *', function(){
+      jQuery(this).parents(accessibleRowSelector).addClass('keyboard_hover');
+    });
   });
-});
+  
+})(jQuery);
+

public/templates/work_packages/work_packages_table.html

@@ -1,4 +1,4 @@
-<table class="workpackages-table list">
+<table class="workpackages-table keyboard-accessible-list">
   <colgroup>
     <col />
     <col ng-hide="hideWorkPackageDetails" />

spec/features/accessibility/work_packages/work_package_query_spec.rb

@@ -32,8 +32,7 @@ require 'features/work_packages/work_packages_page'
 describe 'Work package index accessibility', :type => :feature do
   let(:user) { FactoryGirl.create(:admin) }
   let(:project) { FactoryGirl.create(:project) }
-  let(:work_package) { FactoryGirl.create(:work_package,
-                                          project: project) } 
+  let(:work_package) { FactoryGirl.create(:work_package, project: project) }
   let(:work_packages_page) { WorkPackagesPage.new(project) }
   let(:sort_ascending_selector) { '.icon-sort-ascending' }
   let(:sort_descending_selector) { '.icon-sort-descending' }
@@ -206,8 +205,12 @@ describe 'Work package index accessibility', :type => :feature do
     before {work_packages_page.visit_index}                                        
 
     context 'focus' do
-      let(:first_link_selector) { "table.list tbody tr:first-child a:focus" }
-      let(:second_link_selector) { "table.list tbody tr:nth-child(2) a:focus" }
+      let(:first_link_selector) do
+        "table.list tbody tr:first-child a:focus, table.keyboard-accessible-list tbody tr:first-child a:focus"
+      end
+      let(:second_link_selector) do
+        "table.list tbody tr:nth-child(2) a:focus, table.keyboard-accessible-list tbody tr:nth-child(2) a:focus"
+      end
 
       it 'navigates with J' do
         body.native.send_keys('j')