Merge pull request #3691 from ulferts/fix/accessible-by-space

Fix/accessible by space

frontend/app/templates/components/accessible_by_keyboard.html

@@ -0,0 +1,6 @@
+<a data-ng-click='execute()'
+   href=''
+   class='{{ linkClass }}'
+   data-click-on-keypress="[13, 32]">
+   <span ng-transclude class='{{ spanClass }}'></span>
+</a>

frontend/app/templates/work_packages/attachments-edit.html

@@ -51,7 +51,8 @@
        class="work-package--attachments--drop-box"
        data-ngf-multiple="true"
        data-ngf-change="uploadFilteredFiles($files)"
-       data-ngf-max-size="{{::maximumFileSize}}">
+       data-ngf-max-size="{{::maximumFileSize}}"
+       data-click-on-keypress="[13, 32]">
     <div class="work-package--attachments--label">
       <i class="icon-attachment"></i>
       <p>

frontend/app/templates/work_packages/attachments.html

@@ -55,7 +55,8 @@
        data-ngf-max-size="{{::maximumFileSize}}"
        data-ng-disabled="fetchingConfiguration"
        data-ngf-keep="true"
-       data-ngf-change="filterFiles($files)">
+       data-ngf-change="filterFiles($files)"
+       data-click-on-keypress="[13, 32]">
     <div class="work-package--attachments--label">
       <i class="icon-attachment"></i>
       <p data-ng-hide="fetchingConfiguration">

frontend/app/templates/work_packages/inplace_editor/custom/editable/date.html

@@ -1,10 +1,9 @@
 <div class="inplace-edit--date">
-	<input execute-on-enter="execute()" 
-				 ng-model="fieldController.writeValue"
-				 ng-change="onEdit()"
-				 ng-click="showDatepicker()"
-				 title="{{ fieldController.editTitle }}"
-				 class="inplace-edit--date" 
-				 type="text" />
-	<div class="inplace-edit--date-picker"></div>
+  <input ng-model="fieldController.writeValue"
+         ng-change="onEdit()"
+         ng-click="showDatepicker()"
+         title="{{ fieldController.editTitle }}"
+         class="inplace-edit--date"
+         type="text" />
+  <div class="inplace-edit--date-picker"></div>
 </div>

frontend/app/templates/work_packages/inplace_editor/custom/editable/daterange.html

@@ -1,11 +1,13 @@
 <div class="inplace-edit--date-range">
-  <input type="text" class="inplace-edit--date-range-start-date" 
-  			 execute-on-enter="execute()" ng-change="onStartEdit()" 
-  			 ng-model="startDate" ng-class="{'inplace-edit--highlight': startDateIsChanged}" />
+  <input type="text"
+         class="inplace-edit--date-range-start-date"
+         ng-change="onStartEdit()"
+         ng-model="startDate" ng-class="{'inplace-edit--highlight': startDateIsChanged}" />
   <div class="inplace-edit--date-range-start-date-picker"></div>
   <span class="delimeter">-</span>
-  <input type="text" class="inplace-edit--date-range-end-date" 
-  			 execute-on-enter="execute()" ng-change="onEndEdit()" 
-  			 ng-model="endDate" ng-class="{'inplace-edit--highlight': endDateIsChanged}" />
+  <input type="text"
+         class="inplace-edit--date-range-end-date"
+         ng-change="onEndEdit()"
+         ng-model="endDate" ng-class="{'inplace-edit--highlight': endDateIsChanged}" />
   <div class="inplace-edit--date-range-end-date-picker"></div>
 </div>

frontend/app/templates/work_packages/tabs/_panel_expander.html

@@ -1,6 +1,6 @@
 <div class="panel-toggler"
-     ng-click="collapsed = !collapsed" tabindex="-1">
-  <accessible-by-keyboard link-class="button -small -transparent {{ !collapsed ? '-active' : '' }}">
+     tabindex="-1">
+  <accessible-by-keyboard link-class="button -small -transparent {{ !collapsed ? '-active' : '' }}" data-execute="toggle()">
     <span ng-if="!collapsed">
       <span ng-bind="collapseText"/>
     </span>

frontend/app/ui_components/accessible-by-keyboard-directive.js

@@ -35,12 +35,6 @@ module.exports = function() {
       linkClass: '@',
       spanClass: '@'
     },
-    template: "<a execute-on-enter='execute()' default-event-handling='defaultEventHandling'" +
-      " ng-click='execute()' href='' class='{{ linkClass }}'>" +
-      "<span ng-transclude class='{{ spanClass }}'></span>" +
-      "</a>",
-    link: function(scope, element, attrs) {
-      scope.defaultEventHandling = !attrs.execute;
-    }
+    templateUrl: '/templates/components/accessible_by_keyboard.html'
   };
 };

frontend/app/ui_components/click-on-keypress-directive.js

@@ -26,21 +26,36 @@
 // See doc/COPYRIGHT.rdoc for more details.
 //++
 
-module.exports = function(ENTER_KEY) {
+module.exports = function() {
+  'use strict';
+
   return {
     restrict: 'A',
-    scope: { executeOnEnter: '&', defaultEventHandling: '=' },
+    scope: {
+      clickOnKeypress: '='
+    },
     link: function(scope, element) {
-      element.on('keydown', function(event) {
-        if(event.which === ENTER_KEY) {
-          if (!scope.defaultEventHandling) {
-            event.preventDefault();
+      var doIfWatchedKey = function(keyEvent, callback) {
+        if (scope.clickOnKeypress.indexOf(keyEvent.which) !== -1){
+          keyEvent.stopPropagation();
+          keyEvent.preventDefault();
+
+          if (callback !== undefined) {
+            callback(keyEvent);
           }
-          scope.$apply(function() {
-            scope.$eval(scope.executeOnEnter, { 'event': event });
-          });
         }
+      };
+
+      element.on('keydown', function(keyEvent) {
+        doIfWatchedKey(keyEvent);
+      });
+
+      element.on('keyup', function(keyEvent) {
+        doIfWatchedKey(keyEvent, function() {
+          angular.element(keyEvent.target).click();
+        });
       });
     }
   };
 };
+

frontend/app/ui_components/index.js

@@ -46,8 +46,6 @@ angular.module('openproject.uiComponents')
   .directive('opDateTime', ['$compile', 'TimezoneService', require('./date/date-time-directive')])
   .directive('emptyElement', [require('./empty-element-directive')])
   .constant('ENTER_KEY', 13)
-  .directive('executeOnEnter', ['ENTER_KEY', require(
-    './execute-on-enter-directive')])
   .directive('expandableSearch', ['ENTER_KEY', require('./expandable-search')])
   .directive('focus', ['FocusHelper', require('./focus-directive')])
   .constant('FOCUSABLE_SELECTOR', 'a, button, :input, [tabindex], select')
@@ -106,4 +104,5 @@ angular.module('openproject.uiComponents')
   .filter('ancestorsExpanded', require('./filters/ancestors-expanded-filter'))
   .filter('latestItems', require('./filters/latest-items-filter'))
   .directive('highlightCol', [require('./highlight-col-directive')])
-  .directive('confirmPopup', ['$window', require('./confirm-popup-directive')]);
+  .directive('confirmPopup', ['$window', require('./confirm-popup-directive')])
+  .directive('clickOnKeypress', [require('./click-on-keypress-directive')]);

frontend/app/work_packages/directives/work-package-attachments-directive.js

@@ -40,6 +40,7 @@ module.exports = function(
 
   var attachmentsController = function(scope, element, attrs) {
     scope.files = [];
+    scope.element = element;
 
     var workPackage = scope.workPackage(),
         upload = function(event, workPackage) {
@@ -140,7 +141,6 @@ module.exports = function(
   return {
     restrict: 'E',
     replace: true,
-    reqire: '^workPackageField',
     scope: {
       workPackage: '&'
     },

frontend/app/work_packages/tabs/panel-expander-directive.js

@@ -35,6 +35,11 @@ module.exports = function() {
       collapsed: '=',
       expandText: '@',
       collapseText: '@'
+    },
+    link: function(scope) {
+      scope.toggle = function() {
+        scope.collapsed = !scope.collapsed;
+      };
     }
   };
 };

frontend/tests/unit/tests/ui_components/click-on-keypress-directive-test.js

@@ -28,7 +28,7 @@
 
 /*jshint expr: true*/
 
-describe('executeOnEnter Directive', function() {
+describe('clickOnKeypress Directive', function() {
     var compile, element, rootScope, scope;
 
     beforeEach(angular.mock.module('openproject.uiComponents'));
@@ -36,7 +36,7 @@ describe('executeOnEnter Directive', function() {
 
     beforeEach(inject(function($rootScope, $compile) {
       var html;
-      html = '<input execute-on-enter="myFunction()"></input>';
+      html = '<a click-on-keypress="[13, 32]" ng-click="myFunction()"></a>';
 
       element = angular.element(html);
       rootScope = $rootScope;
@@ -54,11 +54,11 @@ describe('executeOnEnter Directive', function() {
         compile();
       });
 
-      it('should execute the function passed to its scope', function() {
-        var event = jQuery.Event('keydown', { which: 13 });
+      it('should execute the function defined for ng-click', function() {
+        var event = jQuery.Event('keyup', { which: 13 });
         element.trigger(event);
+
         expect(scope.myFunction).to.have.been.called;
       });
-
     });
 });

frontend/tests/unit/tests/work_packages/directives/query-filters-directive-test.js

@@ -91,12 +91,13 @@ describe('queryFilters', function() {
       var filter2 = Factory.build('Filter', { name: 'start_date' });
       var filter3 = Factory.build('Filter', { name: 'done_ratio' });
 
-      var enterEvent = jQuery.Event('keydown', { which: 13 });
-
       var removeFilter = function(filterName) {
         var removeLinkElement = angular.element(element).find('#filter_' + filterName +
           ' .advanced-filters--remove-filter a');
+        var enterEvent = jQuery.Event('keyup', { which: 13 });
+
         angular.element(removeLinkElement[0]).trigger(enterEvent);
+
         $timeout.flush();
       };