From aca68c92b64972d32660f6edf42493069ee5d305 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Oliver=20G=C3=BCnther?= <mail@oliverguenther.de>
Date: Mon, 2 May 2016 14:16:20 +0200
Subject: [PATCH] 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
---
 .../wp-inline-create-button.controller.ts             |  3 +++
 .../wp-inline-create-button.directive.html            |  1 +
 .../app/components/wp-table/wp-table.directive.html   | 11 ++++++-----
 .../app/components/wp-table/wp-table.directive.js     |  1 +
 4 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/frontend/app/components/wp-buttons/wp-inline-create-button/wp-inline-create-button.controller.ts b/frontend/app/components/wp-buttons/wp-inline-create-button/wp-inline-create-button.controller.ts
index 0a68b4d481..d597f82e54 100644
--- a/frontend/app/components/wp-buttons/wp-inline-create-button/wp-inline-create-button.controller.ts
+++ b/frontend/app/components/wp-buttons/wp-inline-create-button/wp-inline-create-button.controller.ts
@@ -41,6 +41,8 @@ class WorkPackageInlineCreateButtonController extends WorkPackageCreateButtonCon
     protected $state,
     protected $scope,
     protected $rootScope,
+    protected $element,
+    protected FocusHelper,
     protected I18n,
     protected ProjectService,
     protected WorkPackageResource,
@@ -68,6 +70,7 @@ class WorkPackageInlineCreateButtonController extends WorkPackageCreateButtonCon
       if (row.object === this._wp) {
         this.rows.splice(index, 1);
         this.show();
+        FocusHelper.focusElement(this.$element);
       }
     });
   }
diff --git a/frontend/app/components/wp-buttons/wp-inline-create-button/wp-inline-create-button.directive.html b/frontend/app/components/wp-buttons/wp-inline-create-button/wp-inline-create-button.directive.html
index a19d79057b..3a9527b764 100644
--- a/frontend/app/components/wp-buttons/wp-inline-create-button/wp-inline-create-button.directive.html
+++ b/frontend/app/components/wp-buttons/wp-inline-create-button/wp-inline-create-button.directive.html
@@ -5,6 +5,7 @@
           ng-click="$ctrl.addWorkPackageRow()"
           ng-disabled="$ctrl.isDisabled()"
           aria-label="{{ ::$ctrl.text.create }}"
+          data-click-on-keypress="[13, 32]"
           aria-haspopup="true">
 
     <i class="icon icon-add"></i>
diff --git a/frontend/app/components/wp-table/wp-table.directive.html b/frontend/app/components/wp-table/wp-table.directive.html
index c03517acb2..e055afe98f 100644
--- a/frontend/app/components/wp-table/wp-table.directive.html
+++ b/frontend/app/components/wp-table/wp-table.directive.html
@@ -132,11 +132,12 @@
           </td>
           <td ng-if="row.object.isNew" class="cancel-inline-create -short">
             <span>
-              <a class="wp-table--cancel-create-link"
-                 ng-click="cancelInlineWorkPackage($index, row)">
-                <i class="icon icon-cancel"></i>
-                <span ng-bind="I18n.t('js.button_cancel')"/>
-              </a>
+              <accessible-by-keyboard
+                          execute="cancelInlineWorkPackage($index, row)"
+                          span-class="icon icon-cancel"
+                          link-title="{{ text.cancel }}"
+                          link-class="wp-table--cancel-create-link">
+              </accessible-by-keyboard>
             </span>
           </td>
 
diff --git a/frontend/app/components/wp-table/wp-table.directive.js b/frontend/app/components/wp-table/wp-table.directive.js
index 95350aa818..b98263453b 100644
--- a/frontend/app/components/wp-table/wp-table.directive.js
+++ b/frontend/app/components/wp-table/wp-table.directive.js
@@ -228,6 +228,7 @@ function WorkPackagesTableController($scope, $rootScope) {
   $scope.locale = I18n.locale;
 
   $scope.text = {
+    cancel: I18n.t('js.button_cancel'),
     collapse: I18n.t('js.label_collapse'),
     expand: I18n.t('js.label_expand'),
     sumFor: I18n.t('js.label_sum_for'),