Basic accessibility for inline-create row

This commit:

1. Allows entering the inline-create mode by keyboard
2. Allows cancelling by x button with keyboard
3. Re-focuses the inline-create button when cancelling creation
pull/4381/head
Oliver Günther 9 years ago
parent a30c500a58
commit aca68c92b6
  1. 3
      frontend/app/components/wp-buttons/wp-inline-create-button/wp-inline-create-button.controller.ts
  2. 1
      frontend/app/components/wp-buttons/wp-inline-create-button/wp-inline-create-button.directive.html
  3. 11
      frontend/app/components/wp-table/wp-table.directive.html
  4. 1
      frontend/app/components/wp-table/wp-table.directive.js

@ -41,6 +41,8 @@ class WorkPackageInlineCreateButtonController extends WorkPackageCreateButtonCon
protected $state, protected $state,
protected $scope, protected $scope,
protected $rootScope, protected $rootScope,
protected $element,
protected FocusHelper,
protected I18n, protected I18n,
protected ProjectService, protected ProjectService,
protected WorkPackageResource, protected WorkPackageResource,
@ -68,6 +70,7 @@ class WorkPackageInlineCreateButtonController extends WorkPackageCreateButtonCon
if (row.object === this._wp) { if (row.object === this._wp) {
this.rows.splice(index, 1); this.rows.splice(index, 1);
this.show(); this.show();
FocusHelper.focusElement(this.$element);
} }
}); });
} }

@ -5,6 +5,7 @@
ng-click="$ctrl.addWorkPackageRow()" ng-click="$ctrl.addWorkPackageRow()"
ng-disabled="$ctrl.isDisabled()" ng-disabled="$ctrl.isDisabled()"
aria-label="{{ ::$ctrl.text.create }}" aria-label="{{ ::$ctrl.text.create }}"
data-click-on-keypress="[13, 32]"
aria-haspopup="true"> aria-haspopup="true">
<i class="icon icon-add"></i> <i class="icon icon-add"></i>

@ -132,11 +132,12 @@
</td> </td>
<td ng-if="row.object.isNew" class="cancel-inline-create -short"> <td ng-if="row.object.isNew" class="cancel-inline-create -short">
<span> <span>
<a class="wp-table--cancel-create-link" <accessible-by-keyboard
ng-click="cancelInlineWorkPackage($index, row)"> execute="cancelInlineWorkPackage($index, row)"
<i class="icon icon-cancel"></i> span-class="icon icon-cancel"
<span ng-bind="I18n.t('js.button_cancel')"/> link-title="{{ text.cancel }}"
</a> link-class="wp-table--cancel-create-link">
</accessible-by-keyboard>
</span> </span>
</td> </td>

@ -228,6 +228,7 @@ function WorkPackagesTableController($scope, $rootScope) {
$scope.locale = I18n.locale; $scope.locale = I18n.locale;
$scope.text = { $scope.text = {
cancel: I18n.t('js.button_cancel'),
collapse: I18n.t('js.label_collapse'), collapse: I18n.t('js.label_collapse'),
expand: I18n.t('js.label_expand'), expand: I18n.t('js.label_expand'),
sumFor: I18n.t('js.label_sum_for'), sumFor: I18n.t('js.label_sum_for'),

Loading…
Cancel
Save