Merge pull request #4078 from ulferts/feature/accessible_wp_attributes
Feature/accessible wp attributespull/4057/merge
Oliver Günther
9 years ago
commit
8a151e4a40
@ -1,13 +1,16 @@ |
||||
<div class="version-wrapper"> |
||||
<span ng-if="!field.text"> |
||||
<span ng-if="!field.text" |
||||
wp-accessible-attribute="field"> |
||||
{{field.placeholder}} |
||||
</span> |
||||
<span ng-if="field.text && customEditorController.isVersionLinkViewable()"> |
||||
<a ng-href="{{ customEditorController.getVersionLink() }}"> |
||||
<a ng-href="{{ customEditorController.getVersionLink() }}" |
||||
aria-label="{{ field.getKeyValue() }}"> |
||||
{{field.text.props.name}} |
||||
</a> |
||||
</span> |
||||
<span ng-if="field.text && !customEditorController.isVersionLinkViewable()"> |
||||
<span ng-if="field.text && !customEditorController.isVersionLinkViewable()" |
||||
wp-accessible-attribute="field"> |
||||
{{field.text.props.name}} |
||||
</span> |
||||
</div> |
||||
|
||||
@ -0,0 +1,89 @@ |
||||
//-- copyright
|
||||
// OpenProject is a project management system.
|
||||
// Copyright (C) 2012-2015 the OpenProject Foundation (OPF)
|
||||
//
|
||||
// This program is free software; you can redistribute it and/or
|
||||
// modify it under the terms of the GNU General Public License version 3.
|
||||
//
|
||||
// OpenProject is a fork of ChiliProject, which is a fork of Redmine. The copyright follows:
|
||||
// Copyright (C) 2006-2013 Jean-Philippe Lang
|
||||
// Copyright (C) 2010-2013 the ChiliProject Team
|
||||
//
|
||||
// This program is free software; you can redistribute it and/or
|
||||
// modify it under the terms of the GNU General Public License
|
||||
// as published by the Free Software Foundation; either version 2
|
||||
// of the License, or (at your option) any later version.
|
||||
//
|
||||
// This program is distributed in the hope that it will be useful,
|
||||
// but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
// GNU General Public License for more details.
|
||||
//
|
||||
// You should have received a copy of the GNU General Public License
|
||||
// along with this program; if not, write to the Free Software
|
||||
// Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
|
||||
//
|
||||
// See doc/COPYRIGHT.rdoc for more details.
|
||||
//++
|
||||
|
||||
describe('wpAccessibleAttributeDirective', function() { |
||||
var html = '<div wp-accessible-attribute="field"></div>'; |
||||
var scope, element, $compile; |
||||
|
||||
beforeEach(angular.mock.module('openproject.workPackages.directives')); |
||||
|
||||
beforeEach(inject(function(_$compile_, |
||||
$rootScope){ |
||||
scope = $rootScope.$new(); |
||||
|
||||
$compile = _$compile_; |
||||
})); |
||||
|
||||
describe('on noneditable fields', function() { |
||||
beforeEach(function() { |
||||
scope.field = { |
||||
isEditable: function() { |
||||
return false; |
||||
}, |
||||
getKeyValue: function() { |
||||
return 'myKeyValue'; |
||||
} |
||||
}; |
||||
|
||||
element = $compile(html)(scope); |
||||
scope.$apply(); |
||||
}); |
||||
|
||||
it('has a tabindex of 0', function() { |
||||
expect(element.attr('tabindex')).to.eq('0'); |
||||
}); |
||||
|
||||
it('has an aria-label with the keyValue', function() { |
||||
expect(element.attr('aria-label')).to.eq(scope.field.getKeyValue()); |
||||
}); |
||||
}); |
||||
|
||||
describe('on editable fields', function() { |
||||
beforeEach(function() { |
||||
scope.field = { |
||||
isEditable: function() { |
||||
return true; |
||||
}, |
||||
getKeyValue: function() { |
||||
return 'myKeyValue'; |
||||
} |
||||
}; |
||||
|
||||
element = $compile(html)(scope); |
||||
scope.$apply(); |
||||
}); |
||||
|
||||
it('has no tabindex', function() { |
||||
expect(element.attr('tabindex')).to.eq(undefined); |
||||
}); |
||||
|
||||
it('has an aria-label with the keyValue', function() { |
||||
expect(element.attr('aria-label')).to.eq(undefined); |
||||
}); |
||||
}); |
||||
}); |
||||
@ -0,0 +1,53 @@ |
||||
//-- copyright
|
||||
// OpenProject is a project management system.
|
||||
// Copyright (C) 2012-2015 the OpenProject Foundation (OPF)
|
||||
//
|
||||
// This program is free software; you can redistribute it and/or
|
||||
// modify it under the terms of the GNU General Public License version 3.
|
||||
//
|
||||
// OpenProject is a fork of ChiliProject, which is a fork of Redmine. The copyright follows:
|
||||
// Copyright (C) 2006-2013 Jean-Philippe Lang
|
||||
// Copyright (C) 2010-2013 the ChiliProject Team
|
||||
//
|
||||
// This program is free software; you can redistribute it and/or
|
||||
// modify it under the terms of the GNU General Public License
|
||||
// as published by the Free Software Foundation; either version 2
|
||||
// of the License, or (at your option) any later version.
|
||||
//
|
||||
// This program is distributed in the hope that it will be useful,
|
||||
// but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
// GNU General Public License for more details.
|
||||
//
|
||||
// You should have received a copy of the GNU General Public License
|
||||
// along with this program; if not, write to the Free Software
|
||||
// Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
|
||||
//
|
||||
// See doc/COPYRIGHT.rdoc for more details.
|
||||
//++
|
||||
|
||||
function wpAccessibleAttribute() { |
||||
return { |
||||
restrict: 'A', |
||||
scope: { |
||||
field: '=wpAccessibleAttribute' |
||||
}, |
||||
|
||||
link: function(scope, element) { |
||||
scope.$watch('field', function(field) { |
||||
if (!field.isEditable()) { |
||||
angular.element(element).attr('aria-label', field.getKeyValue()) |
||||
.attr('tabindex', 0); |
||||
} |
||||
else { |
||||
angular.element(element).removeAttr('aria-label') |
||||
.removeAttr('tabindex'); |
||||
} |
||||
}); |
||||
} |
||||
}; |
||||
} |
||||
|
||||
angular |
||||
.module('openproject.workPackages.directives') |
||||
.directive('wpAccessibleAttribute', wpAccessibleAttribute); |
||||
@ -1,6 +1,7 @@ |
||||
<a data-ng-click='execute()' |
||||
class='{{ linkClass }}' |
||||
title='{{ linkTitle }}' |
||||
aria-label="{{ ariaLabel }}" |
||||
data-click-on-keypress="[13, 32]"> |
||||
<span ng-transclude class='{{ spanClass }}'></span> |
||||
</a> |
||||
|
||||
@ -1 +1,2 @@ |
||||
<span ng-bind="field.text"></span> |
||||
<span ng-bind="field.text" |
||||
wp-accessible-attribute="field"></span> |
||||
|
||||
@ -1 +1,5 @@ |
||||
<op-date date-value="field.text.startDate" no-date-text="field.text.noStartDate"></op-date> - <op-date date-value="field.text.dueDate" no-date-text="field.text.noEndDate"></op-date> |
||||
<span wp-accessible-attribute="field"> |
||||
<op-date date-value="field.text.startDate" no-date-text="field.text.noStartDate"></op-date> |
||||
- |
||||
<op-date date-value="field.text.dueDate" no-date-text="field.text.noEndDate"></op-date> |
||||
</span> |
||||
|
||||
@ -1 +1,2 @@ |
||||
<span ng-bind="field.text.props.name || field.text.props.value || field.placeholder"></span> |
||||
<span wp-accessible-attribute="field" |
||||
ng-bind="field.text.props.name || field.text.props.value || field.placeholder"></span> |
||||
|
||||
@ -1,2 +1,6 @@ |
||||
<span ng-if="field.isEmpty()" ng-bind="field.placeholder"></span> |
||||
<span ng-if="!field.isEmpty()" ng-bind="field.text"></span> |
||||
<span ng-if="field.isEmpty()" |
||||
ng-bind="field.placeholder" |
||||
wp-accessible-attribute="field"></span> |
||||
<span ng-if="!field.isEmpty()" |
||||
ng-bind="field.text" |
||||
wp-accessible-attribute="field"></span> |
||||
|
||||
@ -1 +1,2 @@ |
||||
<span ng-bind-html="field.text.html || field.placeholder"></span> |
||||
<span ng-bind-html="field.text.html || field.placeholder" |
||||
wp-accessible-attribute="field"></span> |
||||
|
||||
Loading…
Reference in new issue