Inform user about the activated details pane

app/assets/javascripts/angular/work_packages/controllers/work-package-details-controller.js

@@ -50,6 +50,7 @@ angular.module('openproject.workPackages.controllers')
 
 .controller('WorkPackageDetailsController', [
   '$scope',
+  '$location',
   'latestTab',
   'workPackage',
   'I18n',
@@ -63,7 +64,7 @@ angular.module('openproject.workPackages.controllers')
   'CommonRelationsHandler',
   'ChildrenRelationsHandler',
   'ParentRelationsHandler',
-  function($scope, latestTab, workPackage, I18n, RELATION_TYPES, RELATION_IDENTIFIERS, $q, WorkPackagesHelper, PathHelper, UsersHelper, ConfigurationService, CommonRelationsHandler, ChildrenRelationsHandler, ParentRelationsHandler) {
+  function($scope, $location, latestTab, workPackage, I18n, RELATION_TYPES, RELATION_IDENTIFIERS, $q, WorkPackagesHelper, PathHelper, UsersHelper, ConfigurationService, CommonRelationsHandler, ChildrenRelationsHandler, ParentRelationsHandler) {
     $scope.$on('$stateChangeSuccess', function(event, toState){
       latestTab.registerState(toState.name);
     });
@@ -178,5 +179,16 @@ angular.module('openproject.workPackages.controllers')
       hideFullDescription: true,
       hideAllAttributes: true
     };
+
+    function getFocusAnchorLabel(path, workPackage) {
+      var splitPath = path.split('/');
+      var tab = splitPath[splitPath.length - 1];
+      var tabLabel = I18n.t('js.work_packages.tabs.' + tab);
+      var params = { tab: tabLabel, type: workPackage.props.type, subject: workPackage.props.subject };
+
+      return I18n.t('js.label_work_package_details_you_are_here', params);
+    }
+
+    $scope.focusAnchorLabel = getFocusAnchorLabel($location.path(), $scope.workPackage);
   }
 ]);

config/locales/js-de.yml

@@ -148,6 +148,7 @@ de:
     label_watch_work_package: "Arbeitspaket beobachten"
     label_watcher_added_successfully: "Beobachter wurde erfolgreich hinzugefügt!"
     label_watcher_deleted_successfully: "Beobachter wurde erfolgreich entfernt!"
+    label_work_package_details_you_are_here: "Sie sind auf dem Reiter %{tab} von %{type} %{subject}."
     label_unwatch_work_package: "Arbeitspaket nicht beobachten"
     label_uploaded_by: "Hochgeladen von"
     label_global_queries: "Benutzerdefinierte Filter"

config/locales/js-en.yml

@@ -147,6 +147,7 @@ en:
     label_watch_work_package: "Watch work package"
     label_watcher_added_successfully: "Watcher successfully added!"
     label_watcher_deleted_successfully: "Watcher successfully deleted!"
+    label_work_package_details_you_are_here: "You're on the %{tab} tab for %{type} %{subject}."
     label_unwatch_work_package: "Unwatch work package"
     label_uploaded_by: "Uploaded by"
     label_global_queries: "Global queries"

public/templates/work_packages.list.details.html

@@ -25,7 +25,7 @@
 </div>
 
 <div class="work-packages--details-content">
-  <span class="hidden-for-sighted" tabindex="-1" focus>
+  <span class="hidden-for-sighted" tabindex="-1" focus ng-bind="focusAnchorLabel">
   </span>
 
   <div class="select-type">{{ workPackage.props.type }}:&nbsp;</div>