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

Fix/accessible by space
pull/3621/merge
Stefan Botzenhart 9 years ago
commit 927fd4d69e
  1. 6
      frontend/app/templates/components/accessible_by_keyboard.html
  2. 3
      frontend/app/templates/work_packages/attachments-edit.html
  3. 3
      frontend/app/templates/work_packages/attachments.html
  4. 15
      frontend/app/templates/work_packages/inplace_editor/custom/editable/date.html
  5. 14
      frontend/app/templates/work_packages/inplace_editor/custom/editable/daterange.html
  6. 4
      frontend/app/templates/work_packages/tabs/_panel_expander.html
  7. 8
      frontend/app/ui_components/accessible-by-keyboard-directive.js
  8. 33
      frontend/app/ui_components/click-on-keypress-directive.js
  9. 5
      frontend/app/ui_components/index.js
  10. 2
      frontend/app/work_packages/directives/work-package-attachments-directive.js
  11. 5
      frontend/app/work_packages/tabs/panel-expander-directive.js
  12. 10
      frontend/tests/unit/tests/ui_components/click-on-keypress-directive-test.js
  13. 5
      frontend/tests/unit/tests/work_packages/directives/query-filters-directive-test.js

@ -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>

@ -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>

@ -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">

@ -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>

@ -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>

@ -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>

@ -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'
};
};

@ -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();
});
});
}
};
};

@ -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')]);

@ -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: '&'
},

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

@ -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;
});
});
});

@ -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();
};

Loading…
Cancel
Save