Add labels to inplace containers, rather than spans.

frontend/app/components/inplace-edit/directives/display-pane/display-pane.directive.html

@@ -4,6 +4,7 @@
         class="inplace-editing--trigger-container"
         span-class="inplace-editing--container"
         link-class="inplace-editing--trigger-link"
+        link-title="{{ fieldController.editTitle }}"
         execute="displayPaneController.startEditing()">
         <span
             class="inplace-edit--read-value"

frontend/app/components/inplace-edit/directives/edit-pane/edit-pane.directive.html

@@ -4,11 +4,15 @@
       </div>
     <div class="inplace-edit--dashboard">
       <div class="inplace-edit--controls" ng-hide="fieldController.state.isBusy || !editPaneController.isActive()">
-        <accessible-by-keyboard execute="editPaneController.submit()" class="inplace-edit--control inplace-edit--control--save">
+        <accessible-by-keyboard execute="editPaneController.submit()"
+                                link-title="{{ editPaneController.saveTitle }}"
+                                class="inplace-edit--control inplace-edit--control--save">
           <icon-wrapper icon-name="yes" icon-title="{{ editPaneController.saveTitle }}">
           </icon-wrapper>
         </accessible-by-keyboard>
-        <accessible-by-keyboard execute="editPaneController.discardEditing()" class="inplace-edit--control inplace-edit--control--cancel">
+        <accessible-by-keyboard execute="editPaneController.discardEditing()"
+                                link-title="{{ editPaneController.cancelTitle }}"
+                                class="inplace-edit--control inplace-edit--control--cancel">
           <icon-wrapper icon-name="close" icon-title="{{ editPaneController.cancelTitle }}">
           </icon-wrapper>
         </accessible-by-keyboard>

frontend/app/components/inplace-edit/directives/edit-pane/edit-pane.directive.js

@@ -95,6 +95,9 @@ function InplaceEditorEditPaneController($scope, $element, $location, $timeout,
   var field = $scope.field;
   var wpStore = inplaceEditMultiStorage.stores.workPackage;
 
+  this.saveTitle = I18n.t('js.inplace.button_save', { attribute: field.name });
+  this.cancelTitle = I18n.t('js.inplace.button_cancel', { attribute: field.name });
+
   this.submit = function() {
     var detectedViolations = [];
 

frontend/app/components/work-packages/directives/work-package-comment/work-package-comment.directive.html

@@ -9,6 +9,7 @@
               class="inplace-editing--trigger-container"
               span-class="inplace-editing--container"
               link-class="inplace-editing--trigger-link"
+              link-title="{{ fieldController.editTitle }}"
               execute="fieldController.startEditing()">
         <span class="inplace-edit--read-value"
               ng-class="{'-default': fieldController.isEmpty()}">

frontend/app/components/work-packages/directives/work-package-comment/work-package-comment.directive.js

@@ -43,7 +43,7 @@ function workPackageComment($rootScope, $timeout, $location, EditableFieldsState
     ctrl.state = EditableFieldsState;
     ctrl.field = 'activity-comment';
 
-    ctrl.editTitle = I18n.t('js.inplace.button_edit', { attribute: I18n.t('js.label_comment') });
+    ctrl.editTitle = I18n.t('js.label_add_comment');
     ctrl.placeholder = I18n.t('js.label_add_comment_title');
     ctrl.title = I18n.t('js.label_add_comment_title');
 

frontend/app/templates/components/accessible_by_keyboard.html

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

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

@@ -33,6 +33,7 @@ module.exports = function() {
     scope: {
       execute: '&',
       linkClass: '@',
+      linkTitle: '@',
       spanClass: '@'
     },
     templateUrl: '/templates/components/accessible_by_keyboard.html'